// ---- CSS3 SASS MIXINS ----
// https://github.com/madr/css3-sass-mixins
//  
//  Copyright (C) 2011 by Anders Ytterström
//  
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
//  copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
//  The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE.
//

// ---- LEGACY IE SUPPORT USING FILTERS ----
//  Should IE filters be used or not?
//  PROS: gradients, drop shadows etc will be handled by css.
//  CONS: will harm the site performance badly, 
//        especially on sites with heavy rendering and scripting. 
$useIEFilters: 0; 
// might be 0 or 1. disabled by default.
// ---- /LEGACY IE SUPPORT USING FILTERS ----


@mixin background-size ($value) {
  -webkit-background-size: $value;
          background-size: $value;
}

@mixin border-image ($path, $offsets, $repeats) {
     -moz-border-image: $path $offsets $repeats;
       -o-border-image: $path $offsets $repeats;
  -webkit-border-image: $path $offsets $repeats;
          border-image: $path $offsets $repeats;
}

@mixin border-radius ($values) {
     -moz-border-radius: $values;
  -webkit-border-radius: $values;
          border-radius: $values;
             -moz-background-clip: padding; 
          -webkit-background-clip: padding-box; 
                  background-clip: padding-box;
}

@mixin box-shadow ($x, $y, $offset, $hex, $ie: $useIEFilters, $inset: null, $spread:null) {
     -moz-box-shadow: $x $y $offset $spread $hex $inset;
  -webkit-box-shadow: $x $y $offset $spread $hex $inset;
          box-shadow: $x $y $offset $spread $hex $inset;
  
  @if $ie == 1 {
    $iecolor: '#' + red($hex) + green($hex) + blue($hex);
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}');
    -ms-filter: quote(progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}'));
  }
}

@mixin box-sizing($value) {
     -moz-box-sizing: $value;
  -webkit-box-sizing: $value;
          box-sizing: $value;
}

// requires sass 3.2
//@mixin keyframes {
//     @-moz-keyframes { @content; }
//      @-ms-keyframes { @content; }
//       @-o-keyframes { @content; }
//  @-webkit-keyframes { @content; }
//          @keyframes { @content; }
//}

@mixin linear-gradient($from, $to, $ie: $useIEFilters) {
  @if $ie != 1 { background-color: $to; }
  
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $from),color-stop(1, $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);
  background-image: linear-gradient(top, bottom, $from, $to);

  @if $ie == 1 { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
    -ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}'));
  }
}

@mixin rgba-bg ($hex, $alpha, $ie: $useIEFilters) {     
  @if $ie == 1 { 
    background-color: none;
    $hexopac: ie-hex-str(rgba($hex, $alpha));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$hexopac}',EndColorStr='#{$hexopac}}');
    -ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$hexopac}',EndColorStr='#{$hexopac}'));
  }
  @else {
    background-color: $hex;
    background-color: rgba($hex, $alpha);
  }
}

@mixin perspective($perspective) {
     -moz-perspective: $perspective;
      -ms-perspective: $perspective;
  -webkit-perspective: $perspective;
          perspective: $perspective;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

@mixin transform ($transforms) {
       -moz-transform: $transforms;
         -o-transform: $transforms;
        -ms-transform: $transforms;
    -webkit-transform: $transforms;
          transform: $transforms;
}

    @mixin matrix ($a, $b, $c, $d, $e, $f) {
           -moz-transform: matrix($a, $b, $c, $d, #{$e}px, #{$f}px);
             -o-transform: matrix($a, $b, $c, $d, $e, $f);
            -ms-transform: matrix($a, $b, $c, $d, $e, $f);
        -webkit-transform: matrix($a, $b, $c, $d, $e, $f);
              transform: matrix($a, $b, $c, $d, $e, $f);
    }

    @mixin rotate ($deg) {
      @include transform(rotate(#{$deg}deg));
    }

    @mixin scale ($size) {
      @include transform(scale(#{$size}));
    }

    @mixin translate ($x, $y) {
        @include transform(translate($x, $y));
    }

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

// ==== /CSS3 SASS MIXINS ====


/*------------------------------------*\
    helpers
\*------------------------------------*/

@mixin ir() {
    color: transparent;
    font: 0/0 a;
    text-shadow: none;
}

/* hide from everything ------------- */

@mixin hidden() {
    display: none !important;
    visibility: hidden;
}

@mixin visually-hidden() {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    &.focusable:active,
    &.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }
}

@mixin invisible {
    visibility: hidden;
}

/* clearfix ------------------------- */

@mixin cf() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

// inline-block

  @mixin inline-block {
      display: inline-block;
        .lt-ie9 & {
        zoom: 1;
        *display: inline;
        }
  }

// box-sizing with IE fallback and grid lovliness

  @mixin box($width:'null', $padding:'null', $margin:$gutter, $first: false) {

  @if $first == false {
    float: left;
    margin-right: 0% + $margin;
    padding: 0% +$padding;
    width: 0% + $width - $margin;
    .lt-ie8 & {
      margin-right: 0% + $margin;
      padding: 0% + $padding;
      width: 0% + $width - $padding - $padding - $margin;
    }
    }
    @else {
    float: left;
    margin-left: 0% + $first;
    margin-right: 0% + $margin;
    padding: 0% +$padding;
    width: 0% + $width - $margin - $first;
    .lt-ie7 & {
      margin-left: 0% + $first;
      margin-right: 0% + $margin;
      padding: 0% + $padding;
      width: 0% + $width - $padding - $padding - $margin - $first;
    }
    }
  }