/* ----------------------------------------------------------------------------
 * Mixins
 * ------------------------------------------------------------------------- */

/**
 * Transition
 *
 * @include transition(all .4s ease);
 */

 @mixin transition($args...) {
   -webkit-transition: $args;
   -moz-transition: $args;
   -ms-transition: $args;
   -o-transition: $args;
   transition: $args;
 }


/*
 * Mixin for clearfix
 * @include clearfix;
*/
@mixin clearfix {
  &:before, &:after { content: ""; display: table; }
  &:after { clear: both; }
  *zoom: 1;
}

/*
 * Apply a CSS3 linear gradient
 *
 * $from - The original colour stop of the gradient, eg #FF0000 or #FF0000 20%
 * $to - The final colour stop of the gradient
 * $fallback - A fallback background-color; if none is provided, the $from colour is used
 * $start - The starting point of the gradient
 *
 * @include linearGradient(red, green);
 * @include linearGradient(red, green, transparent);
 * @include linearGradient(red 50%, green 100%);
 */
@mixin linearGradient($from, $to, $solid: false, $start: top) {
  @if ($solid) {
    background-color: $solid;
  } @else {
    background-color: $from;
  }
  background-image: -webkit-linear-gradient($start, $from, $to);
  background-image: -moz-linear-gradient($start, $from, $to);
  background-image: -ms-linear-gradient($start, $from, $to);
  background-image: -o-linear-gradient($start, $from, $to);
  background-image: linear-gradient($start, $from, $to);
}


/*
 * Mixin for placeholder styling
*/
@mixin placeHolder($color) {
  &::-webkit-input-placeholder { color:$color; }
  &:-moz-placeholder { color:$color; }
}

/*
 * Used to normalise select dropdowns
 * Styles from formalize.me
 * @include normaliseSelect();
 */
@mixin normaliseSelect() {
  -webkit-appearance: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  /* IE7 */
  *padding-top: 2px;
  *padding-bottom: 1px;
  *height: auto;
}


/*
 * @font-face mixin
 * Bulletproof font-face via Font Squirrel
 * @include fontface('family', 'assets/fonts/', 'myfontname');
 */

@mixin fontface($font-family, $font-url, $font-name) {
	@font-face {

            font: {
    			           family: $font-family;
                      style: normal;
                      weight: normal;
            }

            src: url($font-url + '/' + $font-name + '.eot');
        		src: url($font-url + '/' + $font-name + '.eot#iefix') format('embedded-opentype'),
          			 url($font-url + '/' + $font-name + '.woff') format('woff'),
          			 url($font-url + '/' + $font-name + '.ttf')  format('truetype'),
          			 url($font-url + '/' + $font-name + '.svg#' + $font-name) format('svg');
        }
}

/**
 * Retina Image
 *
 * @include image-2x(/img/image.png, 100%, auto);
 */
@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}

/* ----------------------------------------------------------------------------
 * Responsive
 * Usage

     @include r(240)  { }
     @include r(320)  { }
     @include r(480)  { }
     @include r(768)  { }
     @include r(1024) { }
     @include r(1280) { }


 * ------------------------------------------------------------------------- */

 @mixin r($point) {
    @if $point == 240 {
      @media (min-width: 240px) { @content; }
    }
   @if $point == 320 {
     @media (min-width: 320px) { @content; }
   }
   @if $point == 480 {
     @media (min-width: 480px) { @content; }
   }
   @if $point == 600 {
     @media (min-width: 600px) { @content; }
   }
   @if $point == 768 {
     @media (min-width: 768px) { @content; }
   }
   @if $point == 1024 {
     @media (min-width: 1024px) { @content; }
   }
   @if $point == 1140 {
     @media (min-width: 1140px) { @content; }
   }
   @if $point == 1280 {
     @media (min-width: 1280px) { @content; }
   }
   @if $point == 1500 {
     @media (min-width: 1500px) { @content; }
   }
 }