// max-screen-size = max-font-size / ( viewport-units-font-size / 100 )
// min-screen-size = min-font-size / ( viewport-units-font-size / 100 )

// 16 = min font size
// 24 = max font size
// 400 = min screen size
// 800 = max screen size
// calc(16px + (24 - 16)*(100vw - 400px)/(800-400) );

@function calc-screen-size($fontSize, $viewportUnits) {
  @return $fontSize / ( $viewportUnits / 100 );
}

/*
 * Parameters
 * (min-font-size, max-font-size, viewport-units)
 */
@mixin min-max-fontsize-vw($min-font-size, $max-font-size, $viewport-units-font-size) {
  font-size: #{$min-font-size}px;

  @media (min-width: #{calc-screen-size($min-font-size, $viewport-units-font-size)}px) {
    font-size: calc(#{$min-font-size}px + (#{$max-font-size} - #{$min-font-size})*(100vw - #{calc-screen-size($min-font-size, $viewport-units-font-size)}px)/(#{calc-screen-size(#{$max-font-size}, $viewport-units-font-size)} - #{calc-screen-size($min-font-size, $viewport-units-font-size)}) );
  }

  @media (min-width: #{calc-screen-size($max-font-size, $viewport-units-font-size)}px) {
    font-size: #{$max-font-size}px;
  }
}

/*
 * Parameters
 * (min-line-height, max-line-height, viewport-units)
 */
@mixin min-max-lineheight-vw($min-line-height, $max-line-height, $viewport-units-line-height) {
  line-height: #{$min-line-height}px;

  @media (min-width: #{calc-screen-size($min-line-height, $viewport-units-line-height)}px) {
    line-height: calc(#{$min-line-height}px + (#{$max-line-height} - #{$min-line-height})*(100vw - #{calc-screen-size($min-line-height, $viewport-units-line-height)}px)/(#{calc-screen-size(#{$max-line-height}, $viewport-units-line-height)} - #{calc-screen-size($min-line-height, $viewport-units-line-height)}) );
  }

  @media (min-width: #{calc-screen-size($max-line-height, $viewport-units-line-height)}px) {
    line-height: #{$max-line-height}px;
  }
}

// USAGE:

/*
 * Parameters
 * (min-font-size, max-font-size, viewport-units)
 */
@include min-max-fontsize-vw(64, 245, 14);

/*
 * Parameters
 * (min-line-height, max-line-height, viewport-units)
 */
@include min-max-lineheight-vw(60, 225, 13);