//FONTSIZE UNITS
$font-xx-small                  :         0.7em; //12px
$font-x-small                   :         0.8em; //14px
$font-small                     :         1em; //16px
$font-x-medium                  :         1.1em; //18px
$font-medium                    :         1.2em; //20px
$font-large                     :         1.3em; //22px
$font-x-large                   :         1.5em; //24px

//SPACING UNITS
$spacer-small                   :         5px;
$spacer-half                    :         10px;
$spacer-mid                     :         15px;
$spacer-multiple                :         20px;
$spacer-x-max                   :         30px;
$spacer-max                     :         40px;
$spacer-inner                   :         5.5%;


//BREAKPOINTS: Using base unit 16px NOT 18px
@mixin for-size($range) {
  $featurephone_boundary        :         16.875em;      // 270px
  $smartphone_lower_boundary    :         20.000em;      // 320px
  $smartphone_portrait          :         22.500em;      // 360px
  $smartphone_landscape         :         23.438em;      // 375px
  $smartphone_upper_boundary    :         30.000em;      // 480px

  $tablet_lower_boundary        :         45.000em;      // 720px
  $tablet_portrait              :         48.000em;      // 768px
  $tablet_landscape             :         62.000em;      // 992px [?]
  $tablet_upper_boundary        :         64.000em;      // 1024px

  $desktop_lower_boundary       :         80.000em;      // 1280px
  $desktop_smaller              :         85.375em;      // 1366px
  $desktop_mid_smaller          :         86.813em;      // 1389px
  $desktop_medium               :         90.000em;      // 1440px
  $desktop_larger               :         100.000em;     // 1600px
  $desktop_upper_boundary       :         120.000em;     // 1920px

  @if $range == feature-only {
    @media (min-width: $featurephone_boundary) {
      @content;
    }
  } @else if $range == phone-only {
    @media (min-width: $smartphone_lower_boundary) {
      @content;
    }
  } @else if $range == tablet-portrait-up {
    @media (min-width: $tablet_lower_boundary) {
      @content;
    }
  } @else if $range == tablet-landscape-up {
    @media (min-width:  $tablet_upper_boundary) {
      @content;
    }
  } @else if $range == desktop-up {
    @media (min-width:  $desktop_lower_boundary) {
      @content;
    }
  } @else if $range == big-desktop-up {
    @media (min-width:  $desktop_medium) {
      @content;
    }
  }
}
