@use 'sass:math';

/*wsui-vw-rem Start*/
$wsui-vw-rem-screen-width: 375px !default;
$wsui-vw-rem-base-font-size: 10px !default;
$wsui-vw-rem-media-list: ( 320, 360, 375, 393, 414, 480, 540, 640, 720, 768 ) !default;

@mixin wsui-vw-rem() {
  // configurations:
  $std-width: $wsui-vw-rem-screen-width;
  $std-size: $wsui-vw-rem-base-font-size;
  $list: $wsui-vw-rem-media-list;

  // calcuations:
  // $vw-size: $std-size * 100 / $std-width;
  // use dart sass: $std-size * 100 / $std-width;
  $vw-size: math.div($std-size * 100, $std-width);
  $vw-font-size: #{$vw-size}vw;

  $len: length($list);
  $first: nth($list, 1);
  $last: nth($list, $len);

  html {
    font-size: $vw-font-size;
  }

  @media screen and (max-width: #{$first}px) {
    html {
      font-size: math.div($std-size * $first, $std-width) + px;
      font-size: $vw-font-size;
    }
  }

  @media screen and (min-width: #{$last + 1}px) {
    html {
      font-size: math.div($std-size * $last, $std-width) + px;
      font-size: $vw-font-size;
    }
  }

  @for $i from 1 to $len {
    $value: nth($list, $i);
    $current: $value + 1;
    $next: nth($list, $i + 1);

    @media screen and (min-width: #{$current}px) and (max-width: #{$next}px) {
      html {
        font-size: math.div($std-size * $next, $std-width) + px;
        font-size: $vw-font-size;
      }
    }
  }
}
/*wsui-vw-rem End*/