//
// Foundation Variables
//

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with brower-based text zoom or user-set defaults.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it effect the grid breakpoints,
// set $em-base to $base-font-size and make sure $base-font-size is a px value.
$base-font-size: 100% !default;

// $base-line-height is 24px while $base-font-size is 16px
$base-line-height: 150% !default;

// This is the default html and body font-size for the base em value.
$em-base: 16px !default;

// It strips the unit of measure and returns it
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of em's.
// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported
// em-calc(10 20 30px 40);
// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
// em-calc((10, 20, 30, 40px));
// Optionally call with a different base (eg: 8px) to calculate em.
// em-calc(16px 32px 48px, 8px);
// If you require to comma separate your list
// em-calc((16px, 32px, 48), 8px);

@function convert-to-em($value, $base-value: $em-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1em;
  @if ($value == 0em) { $value: 0; } // Turn 0em into 0
  @return $value;
}

@function em-calc($values, $base-value: $em-base) {
  $max: length($values);

  @if $max == 1 { @return convert-to-em(nth($values, 1), $base-value); }

  $emValues: ();
  @for $i from 1 through $max {
    $emValues: append($emValues, convert-to-em(nth($values, $i), $base-value));
  }
  @return $emValues;
}

// Support for the old syntax

@function emCalc($values){
  @return em-calc($values);
}

@function em($values){
  @return em-calc($values);
}

// Maybe you want to create rems with pixels
// $rem-base: 0.625 !default; //Set the value corresponding to body font size. In this case, you should set as: body {font-size: 62.5%;}
// @function remCalc($pxWidth) {
//   @return $pxWidth / $rem-base * 1rem;
// }