// Global mixins - distinct from component mixins

//*----------------------------------*\
//  #TOOLS - VISUALLY HIDDEN
//\*----------------------------------*/

/// Visually hidden - Make an element visually hidden, but accessible to screen readers, etc.
/// @author John Albin
/// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
/// @link https://github.com/JohnAlbin/zen-style-guide/blob/gh-pages/sass/init/visually-hidden/_visually-hidden.scss
/// @group Tools
/// @example scss - basic usage
///   .centered {
///     @include visually-hidden();
///   }
/// @output Output from the example
///   .centered {
///     position: absolute !important;
///     height: 1px;
///     width: 1px;
///     overflow: hidden;
///     clip: rect(1px, 1px, 1px, 1px);
///     word-wrap: normal;
///   }

@mixin visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal;
}

@mixin overlay($color: #000, $opacity: 0.5, $z-index: 2, $gradient: null) {
  position: relative;
  pointer-events: none;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color, $opacity);
    background: rgba($color, var(--cu-overlay-opacity, #{$opacity}));
    z-index: $z-index;

    // Initial boolean implementation for portrait gradients.
    // The gradient implementation will be extended to include variations here.
    @if $gradient {
      background: transparent;
      background-image: linear-gradient(to bottom, transparent 25%, rgba($color, $opacity) 100%);

      @include breakpoint(md) {
        background-image: linear-gradient(to bottom, transparent 50%, rgba($color, $opacity) 100%);
      }
    }
  }
}