// =============================================
//        SCSS mixins by Gary Hepting 
//          Last Updated:2013-1-21
// =============================================




// ====================
//  media query helpers
// ====================

@mixin large-desktop {
  @media only screen and (min-width:1201px) {
    @content;
  }
}

@mixin desktop {
  @media only screen and (min-width:1025px) {
    .hide-on-desktop { display:none; }
    // helper overrides
    .no-padding-desktop { padding:0; }
    .no-margin-desktop { margin:0; }
    .zero-desktop { @include _zero; }
    @content;
  }
}

@mixin ipad {
  @media only screen and (min-width:768px) and (max-width:1024px) {
    .ipad-only { display:inline-block; }
    .hide-on-ipad { display:none; }
    .desktop-only { display:none; }
    // helper overrides
    .no-padding-ipad { padding:0; }
    .no-margin-ipad { margin:0; }
    .zero-ipad { @include _zero; }
    @content;
  }
}

@mixin ipad-above {
  @media only screen and (min-width: 768px) {
    @content;
  }
}

@mixin small-tablet {
  @media only screen and (max-width:767px) {
    .small-tablet-only { display:inline-block; }
    .hide-on-small-tablet { display:none; }
    .desktop-only { display:none; }
    // helper overrides
    .no-padding-small-tablet { padding:0; }
    .no-margin-small-tablet { margin:0; }
    .zero-small-tablet { @include _zero; }
    @content;
  }
}

@mixin mobile {
  @media only screen and (max-width:480px) {
    .mobile-only { display:inline-block; }
    .hide-on-mobile { display:none; }
    .desktop-only { display:none; }
    // helper overrides
    .no-padding-mobile { padding:0; }
    .no-margin-mobile { margin:0; }
    .zero-mobile { @include _zero; }
    @content;
  }
}

@mixin small-mobile {
  @media only screen and (max-width:319px) {
    @content;
  }
}

// ====================
//       helpers
// ====================

@mixin _zero { margin:0; padding:0; }

// ====================
//      functions
// ====================

// strip unit of measurement from a value
@function numericvalue($val) {
  $unit: unit($val);
  $number: $val / ($val * 0 + 1);
  @return $number;
}

// ====================
//      utilities
// ====================

// inline image with fallback support for IE 7-
@mixin data-image($file) {
  background-image:url("#{$root_path}#{$images_path}#{$file}");       // fallback
  background-image:inline-image($file);             // data URI
  *background-image:url("#{$root_path}#{$images_path}#{$file}");      // IE7- hack
}

// // vertical gradient with support for IE 6-8 & 10
// @mixin vertical-gradient($startColor, $endColor) {
//   background:$endColor;
//   @include background-image(linear-gradient($startColor, $endColor));
//   @include filter-gradient($startColor, $endColor);
// }

// // horizontal gradient with support for IE 6-8 & 10
// @mixin horizontal-gradient($startColor, $endColor) {
//   background:$endColor;
//   @include background-image(linear-gradient(left, $startColor, $endColor));
//   @include filter-gradient($startColor, $endColor, 1);
// }

// vertical gradient
@mixin gradient($startColor:$white, $endColor:$gray-2) {
  background:$startColor; // fallback
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}',GradientType=0 ); // IE 6-8
  background:-ms-linear-gradient(top, $startColor 0%, $endColor 100%); // IE 10+
  background:-o-linear-gradient(top, $startColor 0%, $endColor 100%); // Opera
  background:-moz-linear-gradient(top, $startColor 0%, $endColor 100%); // Firefox
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor));  // Webkit (Safari, Chrome, other)
  background:-webkit-linear-gradient(top, $startColor 0%, $endColor 100%);  // Webkit (Safari, Chrome, other)
  background:linear-gradient(to bottom, $startColor 0%, $endColor 100%);
}

// box shadow
@mixin drop-shadow($color:rgba(0,0,0,0.2), $blur:5px, $x:2px, $y:2px) { // color, blur, x, y
  -ms-box-shadow:$x $y $blur $color; // IE10+
  @if ($x == 0 and $y == 0) { // non directional glow
    filter: Glow(color=#{ie-hex-str($color)},strength=#{numericvalue($blur)});
    -ms-filter: glow(color=#{ie-hex-str($color)},strength=#{numericvalue($blur)});
  } @else {
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=#{numericvalue($blur)}, Direction=#{degrees($x, $y)}, Color='#{ie-hex-str($color)}')"; // IE8
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=#{numericvalue($blur)}, Direction=#{degrees($x, $y)}, Color='#{ie-hex-str($color)}'); // IE7-
  }
  -o-box-shadow:$x $y $blur $color; // Opera
  -moz-box-shadow:$x $y $blur $color; // Firefox
  -webkit-box-shadow:$x $y $blur $color; // Webkit (Safari, Chrome, other)
  box-shadow:$x $y $blur $color;
}
// filter drop shadow
@mixin filter-shadow($color:rgba(0,0,0,0.2), $blur:0, $x:0, $y:0) { // color, blur, x, y
  -ms-filter: drop-shadow($x $y $blur $color); // IE9+
  -o-filter: drop-shadow($x $y $blur $color); // Opera
  -moz-filter: drop-shadow($x $y $blur $color); // Firefox
  -webkit-filter: drop-shadow($x $y $blur $color); // Webkit (Safari, Chrome, other)
  filter: drop-shadow($x $y $blur $color);
}

// inner box shadow
@mixin inner-shadow($color, $blur:0, $x:0, $y:0) { // color, blur, x, y
  -ms-box-shadow:inset $x $y $blur $color; // IE10+
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{ie-hex-str($color)}')"; // IE8
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{ie-hex-str($color)}'); // IE7-
  -o-box-shadow:inset $x $y $blur $color; // Opera
  -moz-box-shadow:inset $x $y $blur $color; // Firefox
  -webkit-box-shadow:inset $x $y $blur $color; // Webkit (Safari, Chrome, other)
  box-shadow:inset $x $y $blur $color;
}

// text/UI Element states
@mixin state($state:'disabled',$mode:normal,$color:default) {
  @if $color == 'default' {
    @if $state == 'disabled' {
      $color: $disabled-color;
    }@else if $state == 'success' {
      $color: $success-color;
    }@else if $state == 'warning' {
      $color: $warning-color;
    }@else if $state == 'error' {
      $color: $error-color;
    }
  }
  color:lighten($color, 35%);
  @if $mode != 'textOnly' {
  background:lighten($color, 15%);
  border-color:$color;
  }
  @if $state == 'disabled' {
  cursor:not-allowed;
  text-decoration:none;
  outline:none;
    &:hover, &:focus, &:visited {
      color:lighten($color, 35%);
      @if $mode != 'textOnly' {
      background:lighten($color, 15%);
      border-color:$color;
      }
      cursor:not-allowed;
      text-decoration:none;
      outline:none;
    }
  }
}

// transition
@mixin transition($transition:all 0.2s) {
  -ms-transition:$transition; // IE10+
  -o-transition:$transition; // Opera
  -moz-transition:$transition; // Firefox
  -webkit-transition:$transition; // Webkit (Safari, Chrome, other)
  transition:$transition;
}

// border radius
@mixin rounded($radius:4px) {
  -ms-border-radius:$radius; // IE10+
  -o-border-radius:$radius; // Opera
  -moz-border-radius:$radius; // Firefox
  -webkit-border-radius:$radius; // Webkit (Safari, Chrome, other)
  border-radius:$radius;
}

// rotate
@mixin rotate($deg:0deg) {
  -ms-transform:rotate($deg); // IE10+
  -o-transform:rotate($deg); // Opera
  -moz-transform:rotate($deg); // Firefox
  -webkit-transform:rotate($deg); // Webkit (Safari, Chrome, other)
  transform:rotate($deg);
}

// spin
@mixin spin($count:infinite,$speed:2s,$easing:linear) {
  -moz-animation: spin $speed $easing;
  -moz-animation-iteration-count: $count;
  -o-animation: spin $speed $easing;
  -o-animation-iteration-count: $count;
  -webkit-animation: spin $speed $easing;
  -webkit-animation-iteration-count: $count;
  animation: spin $speed $easing;
  animation-iteration-count: $count;
}

// scale
@mixin scale($scale:0) {
  -ms-transform:scale($scale); // IE10+
  -o-transform:scale($scale); // Opera
  -moz-transform:scale($scale); // Firefox
  -webkit-transform:scale($scale); // Webkit (Safari, Chrome, other)
  transform:scale($scale);
}

// translate
@mixin translate($x:0, $y:0) {
  -ms-transform:translate($x,$y); // IE10+
  -o-transform:translate($x,$y); // Opera
  -moz-transform:translate($x,$y); // Firefox
  -webkit-transform:translate($x,$y); // Webkit (Safari, Chrome, other)
  transform:translate($x,$y);
}

// transform (translate, rotate & scale)
@mixin transform($x:0, $y:0, $scale:0, $deg:0deg) {
  -ms-transform:translate($x,$y) rotate($deg) scale($scale); // IE10+
  -o-transform:translate($x,$y) rotate($deg) scale($scale); // Opera
  -moz-transform:translate($x,$y) rotate($deg) scale($scale); // Firefox
  -webkit-transform:translate($x,$y) rotate($deg) scale($scale); // Webkit (Safari, Chrome, other)
  transform:translate($x,$y) rotate($deg) scale($scale);
}

// transform origin
@mixin transform-origin($x:0, $y:0) {
  -ms-transform-origin:$x $y; // IE10+
  -o-transform-origin:$x $y; // Opera
  -moz-transform-origin:$x $y; // Firefox
  -webkit-transform-origin:$x $y; // Webkit (Safari, Chrome, other)
  transform-origin:$x $y;
}




// ====================
//       fonts 
// ====================

// font stacks
@mixin font-stack($primaryFont:"", $secondaryFont:"", $fallbackFonts:"Arial, Helvetica, Geneva, sans-serif") {
  /* might add inline-font-files() at some point */
  @if $secondaryFont != "" {
    font-family:#{$primaryFont}, #{$secondaryFont}, #{$fallbackFonts};
  } @else {
    @if $primaryFont != "" {
      font-family:#{$primaryFont}, #{$fallbackFonts};
    } @else {
      font-family:#{$fallbackFonts};
    }
  }
}