@import "../config/index.scss";

.u-flex {
  display: flex !important;
}

.u-block {
  display: block !important;
}

.u-hidden {
  display: none !important;
}


// Completely remove from the flow but leave available to screen readers.

.u-hiddenVisually {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.u-inline {
  display: inline !important;
}

// 1. Fix for Firefox bug: an image styled `max-width:100%` within an
// inline-block will display at its default size, and not limit its width to
// 100% of an ancestral container.

.u-inlineBlock {
  display: inline-block !important;
  max-width: 100%; // 1
}

.u-overflowHidden {
  overflow: hidden !important;
}

@if $responsive == true {
  @each $name, $value in $breakpoints {
    @media (min-width: $value) {
      .u-#{$name}-flex {
        display: flex !important;
      }

      .u-#{$name}-block {
        display: block !important;
      }

      .u-#{$name}-hidden {
        display: none !important;
      }

      .u-#{$name}-hiddenVisually {
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
      }

      .u-#{$name}-inline {
        display: inline !important;
      }

      .u-#{$name}-inlineBlock {
        display: inline-block !important;
        max-width: 100%;
      }

      .u-#{$name}-overflowHidden {
        overflow: hidden !important;
      }
    }
  }
}