/* GLOBAL MIXINS
--------------------------------------------- */

/* AUTO SCALING FOR TYPE WITH MIN/MAX SIZES

  @param {Number}  $responsive  - Viewport-based size
  @param {Number}  $min         - Minimum font size (px)
  @param {Number}  $max         - Maximum font size (px) (optional)

  @param {Number}  $fallback    - Fallback for viewport-based units (optional)

  @example SCSS - 5vw size, 35px min & 150px max size + 50px fallback:

  @include responsive-font(5vw, 35px, 150px, 50px);
*/
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
    $responsive-unitless: strip-unit($responsive);
    $dimension: if(unit($responsive) == "vh", "height", "width");
    $min-breakpoint: calc($min / $responsive-unitless * 100);

    @media (max-#{$dimension}: #{$min-breakpoint}) {
      font-size: $min;
    }

    @if $max {
      $max-breakpoint: calc($max / $responsive-unitless * 100);

      @media (min-#{$dimension}: #{$max-breakpoint}) {
        font-size: $max;
      }
    }

    @if $fallback {
      font-size: $fallback;
    }

    font-size: $responsive;
  }

  // Reset
  @mixin reset {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  // Used to prevent text selection on an element
  @mixin prevent-user-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  /// Used to hide an element visually, but keeping it accessible for
  /// accessibility tools.
  @mixin visually-hidden {
    // Need to make sure we override any existing styles.
    position: absolute !important;
    top: 0;
    clip: rect(1px, 1px, 1px, 1px) !important;
    overflow: hidden !important;
    height: 1px !important;
    width: 1px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /// To be used on flex items. Resolves some common layout issues, such as
  /// text truncation not respecting padding or breaking out of container.
  /// https://css-tricks.com/flexbox-truncated-text/
  @mixin layout-flex-fix {
    min-width: 0;
    max-width: 100%;
  }

  // Box shadow for input elements
  @mixin box-shadow-inputs {
    box-shadow: inset 0 1px 0 0 rgba($color-rich-black, 0.07), 0 0 0 1px tint($color-rich-black, 80%);
  }

  // Hover state of box shadow for input elements
  @mixin box-shadow-inputs-hover {
    box-shadow: 0 1px 5px 0 rgba($color-rich-black, 0.07), 0 0 0 1px tint($color-rich-black, 60%);
  }