/* ==========================================================================
   #HIDE
   ========================================================================== */

/**
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.au-u-hidden-visually {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/**
 * Hide visually and from screen readers.
 */

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

/**
 * Hide elements visually and on screen readers starting from certain breakpoints, but show visually and for screen readers on others.
 */

@if (variable-exists(mq-breakpoints)) {
  @each $au-bp-name, $au-bp-value in $mq-breakpoints {
    @include mq($from: $au-bp-name) {
      .au-u-hidden-from\@#{$au-bp-name} {
        display: none !important;
      }
    }
  }
}