@use "variables" as _variables;
@use "functions" as _functions;

// --------------------------------------------------------------------------
// Mixins - Fluid width - font-size, etc.
// Adapted from Geoff Graham to use configs $s-breakpoints map keys (https://css-tricks.com/snippets/css/fluid-typography)
// Based on the math calculation by Mike Riethmuller (https://www.madebymike.com.au/writing/fluid-type-calc-examples)
// --------------------------------------------------------------------------

@mixin fluid($property, $min-bp, $max-bp, $min-size, $max-size ) {

   $min-breakpoint: _functions.get-breakpoint($min-bp);
   $max-breakpoint: _functions.get-breakpoint($max-bp);

   @if $min-breakpoint <= 0 {
      @error "You minimum breakpoint #{$min-bp} value is 0. Please use a bigger breakpoint like sm for the fluid range.";
   }
   // $min-breakpoint
   #{$property}: $min-size;
   // between fluid calculation
   @media screen and (min-width: $min-breakpoint) {
      #{$property}: calc(#{$min-size} + #{_functions.strip-unit($max-size - $min-size)} *
      ((100vw - #{$min-breakpoint}) / #{_functions.strip-unit($max-breakpoint - $min-breakpoint)}));
   }
   // $max-breakpoint
   @media screen and (min-width: $max-breakpoint) {
      #{$property}: $max-size;
   }
}


// --------------------------------------------------------------------------
// Legacy - Mixins are separated for legacy support
// --------------------------------------------------------------------------

@mixin fluid-font($min-bp, $max-bp, $min-size, $max-size) {
   @include fluid("font-size", $min-bp, $max-bp, $min-size, $max-size);
}

@mixin fluid-width($min-bp, $max-bp, $min-size, $max-size) {
   @include fluid("width", $min-bp, $max-bp, $min-size, $max-size);
}