@use "system";
@use "sass:math";

/* 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(math.unit($responsive) == "vh", "height", "width");
  $min-breakpoint: calc($min / $responsive-unitless * 100);
  font-size: $responsive;

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

  @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;
    }
  }
}

// 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(system.$color-rich-black, 0.07),
    0 0 0 1px system.tint(system.$color-rich-black, 80%);
}

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