// ==========================================================================
// ## UTILITIES: DISPLAY
// ==========================================================================

/// @content Utility classes to hide/show elements.
///
///   .u-hidden-visually {}   - hide and visible for a11y.
///   .u-hide {}              - always hidden.
///   .u-visible {}           - always visible.
///   and others...
///

// Always hide an element.
.u-hide {
  display: none !important;
}

/// Reponsive hiding utility classes.
/// @todo
/// Reponsive hiding utility classes.
@mixin responsive-hide-helpers() {
  // We need to handle xxs and xlg breakpoints differently
  $hide-breakpoints: map-remove($breakpoints, xxs, xlg);

  .u-hide-xxs {
    @include mq-only('xxs') {
      display: none !important;
    }
  }

  @each $bp in map-keys($hide-breakpoints) {
    .u-hide-#{$bp}-up {
      @include mq-up($bp) {
        display: none !important;
      }
    }

    .u-hide-#{$bp}-down {
      @include mq-down($bp) {
        display: none !important;
      }
    }
  }

  .u-hide-xlg {
    @include mq-only('xlg') {
      display: none !important;
    }
  }
}

@include responsive-hide-helpers();

// Hide only visually, but have it available for screen readers.
.u-hide-visually {
  position: absolute !important;
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0 !important;
  width: 1px;
  word-wrap: normal !important;
}

// Allows an accessibly hidden element to be focusable via keyboard navigation.
.u-hide-visually-focusable {
  position: absolute !important;
  word-wrap: normal !important;
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0 !important;
  width: 1px;

  @include actus {
    clip: auto;
    width: auto;
    height: auto;
  }
}

// Reduce motion for accessibility
@media (prefers-reduced-motion) {
  .u-motion-reduce {
    transition: none !important;
  }
}

// Always show an element.
.u-show,
.u-hide-none {
  display: block !important;
  visibility: visible !important;
}

/// @throw Dangerous for a11y - Use with care
.u-focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

// Control visibility without affecting flow.
.u-visible {
  visibility: visible !important;
  opacity: 1 !important;
}

.u-invisible {
  visibility: hidden !important;
  opacity: 0 !important;
}
