/* --------------------------------------------------
    #FLUID TYPE
    Responsive Type
    More Infos: http://madebymike.com.au/writing/fluid-type-calc-examples/

    Single property
    html {
      @include fluid(14px, 18px, font-size, 320px, 1366px);
    }

    Multiple properties with same values
    h1 {
      @include fluid(20px, 100px, padding-bottom padding-top,  320px, 1440px);
    }
   -------------------------------------------------- */

// Dependencies
@import 'tools.function.calc-rem';
@import 'tools.function.calc-em';

@mixin fluid($min-value, $max-value, $properties: font-size, $min-vw: $msWidth-min, $max-vw: $msWidth-max) {
  // Check If Value is PX
  @if is-px($min-value) {
    $min-value: calc-rem($min-value);
  }
  // Check If Value is PX
  @if is-px($max-value) {
    $max-value: calc-rem($max-value);
  }

  @if is-px($min-vw) {
    $min-vw: calc-em($min-vw);
  }

  // Check If Value is PX
  @if is-px($max-vw) {
    $max-vw: calc-em($max-vw);
  }

  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
    @each $property in $properties {
      $min-vw-REM: strip-unit($min-vw) + 0rem;
      $max-vw-REM: strip-unit($max-vw) + 0rem;
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw-REM}) / (#{strip-unit($max-vw-REM - $min-vw-REM)}));
    }
  }

  @media screen and (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

@function is-px($value) {
  @return is-number($value) and index('px', unit($value)) != null;
}

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

// Shorthand Version
@mixin f($args...) {
  @include fluid($args...);
}
