////
/// @group Main
////
@use "sass:list";
@use "sass:map";
@use "../functions/scale-clamp" as *;

/// Scale a value for any number of properites relative to the viewport width
/// @param {String | List} $properties - Properties to scale
/// @param {Map} $map - Map of breakpoints and values
/// @param {Boolean} $initial [true] - Output initial value (not inside media query)
/// @require {function} scale-clamp
/// @ignore Demo https://www.sassmeister.com/gist/37c4f4876609516eebab247178ea4b3b
/// @link http://www.sassmeister.com/gist/7f22e44ace49b5124eec
/// @link http://madebymike.com.au/writing/precise-control-responsive-typography/
/// @link https://zellwk.com/blog/viewport-based-typography/
/// @link http://codepen.io/indrekpaas/pen/VarLaJ?editors=1100
/// @link http://codepen.io/maranomynet/pen/ozNpXV?editors=1100
/// @link https://www.smashingmagazine.com/2016/05/fluid-typography/
/// @link https://github.com/Jakobud/poly-fluid-sizing
@mixin scale($properties, $map, $initial: true) {
  $length: list.length($map);

  @if ($length < 2) {
    @error "scale() requires at least two breakpoints";
  }

  $breakpoints: map.keys($map);
  $values: map.values($map);

  // Initial value
  $start-val: list.nth($values, 1);

  @if $initial {
    @each $property in $properties {
      #{$property}: $start-val;
    }
  }

  // Scale up with calc() at each breakpoint
  @for $i from 1 through ($length - 1) {
    $start-breakpoint: list.nth($breakpoints, $i);
    $end-breakpoint: list.nth($breakpoints, $i + 1);
    $start-value: list.nth($values, $i);
    $end-value: list.nth($values, $i + 1);

    @if list.length($start-value) > 2 {
      @warn "scale(): #{$start-breakpoint}: (#{$start-value}) contains too many values, only the first two will be used";
    }

    @if list.length($end-value) > 2 {
      @warn "scale(): #{$end-breakpoint}: (#{$end-value}) contains too many values, only the first two will be used";
    }

    // If multiple start values exist, use the second one.
    // Note: The first value was the ending value in the previous media query.
    @if list.length($start-value) > 1 {
      // If multiple end values exist, use the first one.
      $new-end-value: $end-value;

      @if list.length($end-value) > 1 {
        $new-end-value: list.nth($end-value, 1);
      }

      @media (min-width: $start-breakpoint) {
        @each $property in $properties {
          #{$property}: scale-clamp(($start-breakpoint: list.nth($start-value, 2), $end-breakpoint: $new-end-value));
        }
      }
    }
    // If muliple ending values exist, use the first one.
    @else if list.length($end-value) > 1 {
      @media (min-width: $start-breakpoint) {
        @each $property in $properties {
          #{$property}: scale-clamp(($start-breakpoint: $start-value, $end-breakpoint: list.nth($end-value, 1)));
        }
      }
    }
    // Single values
    @else {
      @media (min-width: $start-breakpoint) {
        @each $property in $properties {
          #{$property}: scale-clamp(($start-breakpoint: $start-value, $end-breakpoint: $end-value));
        }
      }
    }
  }

  // Final value
  $end-val: list.nth($values, $length);
  $end-breakpoint: list.nth($breakpoints, $length);

  @media (min-width: $end-breakpoint) {
    @each $property in $properties {
      #{$property}: $end-val;
    }
  }
}