// Foundation Global Function, Variables and Mixins
//
// 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.
$base-font-size: 100% !default;

// Set your base font-size in pixels so emCalc can do its magic below
$em-base: 16px !default;

// We use these to control various global styles
$body-bg: #fff !default;
$body-font-color: #222 !default;
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
$body-font-weight: normal !default;
$body-font-style: normal !default;

// We use these to control text direction settings
$text-direction: ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
$default-float: left !default;
$opposite-direction: right !default;
// No need to change this conditional statement, $text-direction variable controls it all.
@if $text-direction == ltr {
  $default-float: left;
  $opposite-direction: right;
} @else {
  $default-float: right;
  $opposite-direction: left;
}

// We use these as default colors throughout
$primary-color: #2ba6cb !default;
$secondary-color: #e9e9e9 !default;
$alert-color: #c60f13 !default;
$success-color: #5da423 !default;

// We use these to make sure border radius matches unless we want it different.
$global-radius: 3px !default;
$global-rounded: 1000px !default;

// We use these to control inset shadow shiny edges and depressions.
$shiny-edge-size: 0 1px 0 !default;
$shiny-edge-color: rgba(#fff, .5) !default;
$shiny-edge-active-color: rgba(#000, .2) !default;

// We use this to control whether or not CSS classes come through in the gem files.
$include-html-classes: true !default;
$include-print-styles: true !default;

$include-html-grid-classes: $include-html-classes !default;
$include-html-visibility-classes: $include-html-classes !default;
$include-html-button-classes: $include-html-classes !default;
$include-html-form-classes: $include-html-classes !default;
$include-html-media-classes: $include-html-classes !default;
$include-html-section-classes: $include-html-classes !default;
$include-html-reveal-classes: $include-html-classes !default;
$include-html-alert-classes: $include-html-classes !default;
$include-html-nav-classes: $include-html-classes !default;
$include-html-label-classes: $include-html-classes !default;
$include-html-panel-classes: $include-html-classes !default;
$include-html-pricing-classes: $include-html-classes !default;
$include-html-progress-classes: $include-html-classes !default;
$include-html-magellan-classes: $include-html-classes !default;

//
// Functions
//

// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
@function emCalc($pxWidth) {
  @return $pxWidth / $em-base * 1em;
}

// Creating rems and pixels
@function remCalc($pxWidth) {
  @return $pxWidth / $em-base * 1rem;
}

// Grid Calculation for Percentages
@function gridCalc($colNumber, $totalColumns) {
  @return percentage(($colNumber / $totalColumns));
}


//
// Mixins
//

// We use this to control border radius.
@mixin radius($radius:$global-radius) {
  @if $radius {
    -webkit-border-radius: $radius;
    border-radius: $radius;
  }
}

// We use this to create equal side border radius on elements.
@mixin side-radius($side, $radius) {
  @include radius(0);
  @if $side == left {
    -moz-border-radius-bottomleft: $radius;
    -moz-border-radius-topleft: $radius;
    -webkit-border-bottom-left-radius: $radius;
    -webkit-border-top-left-radius: $radius;
    border-bottom-left-radius: $radius;
    border-top-left-radius: $radius;
  }
  @else if $side == right {
    -moz-border-radius-topright: $radius;
    -moz-border-radius-bottomright: $radius;
    -webkit-border-top-right-radius: $radius;
    -webkit-border-bottom-right-radius: $radius;
    border-top-right-radius: $radius;
    border-bottom-right-radius: $radius;
  }
  @else if $side == top {
    -moz-border-radius-topright: $radius;
    -moz-border-radius-topleft: $radius;
    -webkit-border-top-right-radius: $radius;
    -webkit-border-top-left-radius: $radius;
    border-top-right-radius: $radius;
    border-top-left-radius: $radius;
  }
  @else if $side == bottom {
    -moz-border-radius-bottomright: $radius;
    -moz-border-radius-bottomleft: $radius;
    -webkit-border-bottom-right-radius: $radius;
    -webkit-border-bottom-left-radius: $radius;
    border-bottom-right-radius: $radius;
    border-bottom-left-radius: $radius;
  }
}

// We can control whether or not we have inset shadows edges.
@mixin inset-shadow($active:true) {
  -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
  box-shadow: $shiny-edge-size $shiny-edge-color inset;

  @if $active { &:active {
    -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
    box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
}

// We use this to add transitions to elements
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
  -webkit-transition: $property $speed $ease;
  -moz-transition: $property $speed $ease;
  transition: $property $speed $ease;
}

// We use this to add box-sizing across browser prefixes
@mixin box-sizing($type:border-box) {
  -moz-box-sizing: $type;
  -webkit-box-sizing: $type;
  box-sizing: $type;
}

// We use this to create equalateral triangles
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: solid $triangle-size;
  @if ($triangle-direction == top) {
    border-color: $triangle-color transparent transparent transparent;
  }
  @if ($triangle-direction == bottom) {
    border-color: transparent transparent $triangle-color transparent;
  }
  @if ($triangle-direction == left) {
    border-color: transparent transparent transparent $triangle-color;
  }
  @if ($triangle-direction == right) {
    border-color: transparent $triangle-color transparent transparent;
  }
}

// We use this to do clear floats
@mixin clearfix() {
  *zoom:1;
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

// Media Queries
$small-screen: emCalc(768px) !default;
$medium-screen: emCalc(1280px) !default;
$large-screen: emCalc(1440px) !default;

$screen: "only screen" !default;
$small: "only screen and (min-width:"#{$small-screen}")" !default;
$medium: "only screen and (min-width:"#{$medium-screen}")" !default;
$large: "only screen and (min-width:"#{$large-screen}")" !default;
$landscape: "only screen and (orientation: landscape)" !default;
$portrait: "only screen and (orientation: portrait)" !default;