/* ==============================================
   Mixins
============================================== */


/* Media Queries
------------------------------------ */
/**
 * Breakpoint mixin to easily add media query driven styles
 * inline with given style delcaration blocks.
 * 
 * $breakpoints variable is used in helper classes to create
 * namespaced modifiers to classes. It should reflect the
 * breakpoints available in `include breakpoint()`.
 * The variable is declared in this file for clarity.
 */

$breakpoints: mobile-only, tablet-only, tablet-up, tablet-down, desktop-up, max-only;

@mixin breakpoint($media, $ie-include: false) {
  @if $ie == true {
    @if $ie-include == true {
      @content;
    }
  } @else if $media == "mobile-only" {
    @media only screen and (max-width: $mobile-landscape) {
      @content;
    }
  } @else if $media == "tablet-only" {
    @media only screen and (min-width: $mobile-landscape + 1) and (max-width: $tablet-portrait) {
      @content;
    }
  } @else if $media == "tablet-up" {
    @media only screen and (min-width: $mobile-landscape + 1) {
      @content;
    }
  } @else if $media == "tablet-down" {
    @media only screen and (max-width: $tablet-portrait) {
      @content;
    }
  } @else if $media == "desktop-up" {
    @media only screen and (min-width: $tablet-portrait + 1) {
      @content;
    }
  } @else if $media == "max-only" {
    @media only screen and (min-width: $page-max-width) {
      @content;
    }
  }
}


/* Typography
------------------------------------ */

/**
 * Create a fully formed type style (sizing and vertical rhythm) by passing
 * in a single value.
 *
   `@include font-size(10px);`
 *
 * [1] - Fallback for IE < 9 which do not support rem units.
 */

@mixin font-size($font-size, $line-height: true) {
  font-size: $font-size; /* [1] */
  font-size: ($font-size / $base-font-size) * 1rem;
  @if $line-height == true {
    line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
  }
}

/**
 * Force overly long spans of text to truncate on a given boundary.
 *
   `@include truncate(400px);`
 *
 */
@mixin truncate($boundary: 100%) {
  max-width: $boundary;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* Box Model and Layout
------------------------------------ */

/**
 * Inline-block shorthand to include fallback for IE7.
 *
   ` @include inline-block();`
 *
 */
@mixin inline-block($align: middle) {
  display: inline-block;
  *display: inline;
  vertical-align: $align;
  *zoom: 1;
}



/* CSS3
------------------------------------ */

/**
 * Create vendor-prefixed CSS in one go.
 *
   `@include vendor(border-radius, 4px);`
 *
 */
@mixin prefix($property, $value...) {
  -webkit-#{$property}: $value;
  -moz-#{$property}: $value;
  -ms-#{$property}: $value;
  -o-#{$property}: $value;
  #{$property}: $value;
}

/**
 * Shorthand for border-radius. Most commonly used
 * in conjuction with $border-radius variable, this
 * saves a rundant call to the longhand function
 * @include prefix(border-radius, $border-radius);
 *
   `@include border-radius;`
   `@include border-radius(100%);`
   `@include border-radius(5px);`
 *
 */
@mixin border-radius($radius: $border-radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}


/**
 * Set a transition with a prefixed property
 *
   `@include transition-with-prefix("transform", 1s ease);`
 *
 */
@mixin transition-with-prefix($property, $value) {
  -webkit-transition: -webkit-#{$property} #{$value};
  -moz-transition: -moz-#{$property} #{$value};
  -ms-transition: -moz-#{$property} #{$value};
  -o-transition: -o-#{$property} #{$value};
  transition: #{$property} #{$value};
}


/**
 * Create CSS keyframe animations for all vendors in one go, e.g.:
 *
   .foo {
     @include vendor(animation, shrink 3s);
   }

   @include keyframe(shrink) {
     from {
       font-size:5em;
     }
   }
 *
 */
@mixin keyframe ($animation-name) {
  @-webkit-keyframes $animation-name { @content; }
  @-moz-keyframes $animation-name { @content; }
  @-ms-keyframes $animation-name { @content;}
  @-o-keyframes $animation-name { @content; }
  @keyframes $animation-name { @content; }
}


/**
 * Cross-browser opacity support.
 * It is perfectly acceptable to bypass this mixin
 * for use with transparent PNGs due to IE filter
 * black gunk issues.
 *
   `@include opacity(.4);
 *
 */
@mixin opacity($value) {
  opacity: $value;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="$value * 100")";
  filter: alpha(opacity=$value * 100);
  zoom: 1;
}


/**
 * Create cross-browser compatible linear
 * gradients. This mixin could be extended
 * in the future to allow for other gradient
 * variations.
 *
 * `@include gradient("#fff", "ff0000", "fallback-gradient.png")`
 *
 */
@mixin gradient($from, $to, $filename: "") {
  background-color: mix($from, $to);
  @if $filename != "" {
    background-image: url($filename);
  }
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image: -moz-linear-gradient(top, $from, $to);
  background-image: -ms-linear-gradient(top, $from, $to);
  background-image: -o-linear-gradient(top, $from, $to);
} 


/**
 * Make CSS Arrows!
 * Provide a direction, overall size, arrow stretch (e.g. length)
 * and color values to turn an element into an arrow.
 *
   `@include make-arrow("left", 10px, 15px, #fff);
 *
 */
@mixin make-arrow($dir, $size, $stretch, $color) {
  width: 0;
  height: 0;
  @if $dir == "top" {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $stretch solid $color;
    border-top: none;
  }
  @if $dir == "right" {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $stretch solid $color;
    border-right: none;
  }
  @if $dir == "bottom" {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $stretch solid $color;
    border-bottom: none;
  }
  @if $dir == "left" {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $stretch solid $color;
    border-left: none;
  }
}