// Fluid type & padding/margin

// Fluid scale stolen from:
// https://codepen.io/chriscoyier/pen/pPRGLP
// Idea madebymike

// An attempt to drop media-breakpoints at all 
// and to make all sizing really fluid, without steps
// and reasonable Min & Max values

// USAGE: Set "$fluid-scale" true in SCSS vars in built.

// TBD / STATUS:
// * adds complexity
// * BREAKING: makes resizing/painting muuuuuuuuuch slower

$fluid-scale: false !default; 

@if $fluid-scale == true {

  @function strip-unit($value) { @return $value / ($value * 0 + 1); }

  @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
    $u1: unit($min-vw);
    $u2: unit($max-vw);
    $u3: unit($min-font-size);
    $u4: unit($max-font-size);

    @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
      & {

        font-size: $min-font-size;
        @media screen and (min-width: $min-vw) {
          font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
        }

        @media screen and (min-width: $max-vw) {
          font-size: $max-font-size;
        }
      }
    }
  }

  $min-width: 340px;
  $max-width: 1600px;
  $min-font:  12px;
  $max-font:  16px;

  html {
    @include fluid-type($min-width, $max-width, $min-font, $max-font);
  }
}