@use 'sass:math';

/*  mixin for fluid styles
    takes arguements for the css style, smallest breakpoint, largest breakpoint, minimum unit size, and maximum unit size
    usage: 
      $breakpoint-sm: 576px;
      $breakpoint-xl: 1200px;
      $min_font: 30px;
      $max_font: 65px;
      @include fluid-style(font-size, $breakpoint-sm, $breakpoint-xl, $min_font, $max_font);
*/
@function strip-unit($value) {
  @return math.div($value, $value * 0 + 1);
}

@mixin fluid-style($style, $min-vw, $max-vw, $min-unit-size, $max-unit-size) {
  $u1: math.unit($min-vw);
  $u2: math.unit($max-vw);
  $u3: math.unit($min-unit-size);
  $u4: math.unit($max-unit-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      #{$style}: $min-unit-size;
      @media screen and (min-width: $min-vw) {
        #{$style}: calc(#{$min-unit-size} + #{strip-unit($max-unit-size - $min-unit-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})) !important;
      }
      @media screen and (min-width: $max-vw) {
        #{$style}: $max-unit-size !important;
      }
    }
  }
}

@mixin hover-focus() {
  &:hover,
  &:focus {
    @content;
  }
}

@mixin hover-focus-active() {
  &:hover,
  &:focus,
  &:active,
  &.active {
    @content;
  }
}