@import "helpers";

/**
 * Font Sizes
 */

@mixin font-sizes($font_sizes) {
  @each $breakpoint, $values in $font_sizes {
    @if is-breakpoint($breakpoint) {
      // Responsive value
      @include media-screen($breakpoint) {
        :root {
          @for $i from 1 through length($values) {
            $value: nth($values, $i);
            $postfix: get-desktop-value($i, $font_sizes);

            //@debug $value, $postfix;

            /// if changed compare with desktop value
            @if $value != $postfix {
              $previous_postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $font_sizes);

              // and changed compare with the previous value
              @if $value != $previous_postfix {
                @include get-variable(size-#{replace-prop($postfix)}, #{format-value($value)});
              }
            }
          }
        }
      }
    } @else {
      // Desktop value
      :root {
        @for $i from 1 through length($values) {
          $value: nth($values, $i);
          $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $font_sizes);
          //@debug $value, $postfix;

          @include get-variable(size-#{replace-prop($postfix)}, #{format-value($value)});
        }
      }

      // generate font size selector
      @for $i from 1 through length($values) {
        $value: nth($values, $i);
        $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $font_sizes);
        //@debug $value, $postfix;

        $var: var(#{get-variable(size-#{replace-prop($postfix)})});

        .fs#{replace-prop($postfix)} {
          font-size: #{$var};
        }
      }

    }
  }
}

@mixin print-font-size-custom-class($data) {

  // print
  $list: map-get($font_sizes, 'values');

  :root {
    @each $name, $value in $data {
      $isValid: map-search($list, $value);
      // if the value is not existing in the $font_sizes, create 'px' for the value
      @if (not $isValid) {
        @include get-variable(size-#{replace-prop($name)}, format-value($value));
      } @else {
        @include get-variable(size-#{replace-prop($name)}, var(#{get-variable(size-#{replace-prop($value)})}));
      }
    }
  }
}

@include font-sizes($font_sizes);
@include print-font-size-custom-class($font_size_custom);