@use 'sass:math';

/// A way to generate viewport sized typography with minimum and maximum values
/// through the use of calculated media queries. A fork of a mixin by Eduardo
/// Boucas.
///
/// @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 -
/// // A 5vw font size (with 50px fallback),
/// // A min of 35px and max of 150px:
/// .element {
///   @include responsive-font(5vw, 35px, 150px, 50px);
/// }
///
/// @author Eduardo Boucas <@eduardoboucas>
/// @link https://css-tricks.com/snippets/sass/viewport-sized-typography-minimum-maximum-sizes/
///
/// @group Utilities
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: math.div($responsive, ($responsive - $responsive + 1));
  $dimension: if(
    list.index(('vh' 'svh' 'dvh' 'lvh'), math.unit($responsive)),
    'height',
    'width'
  );
  $min-breakpoint: math.div($min, $responsive-unitless * 100);

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

  @if $max {
    $max-breakpoint: math.div($max, $responsive-unitless) * 100;

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

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

  font-size: $responsive;
}