/**

* A list of useful mixins for properties that need to be prefixed for various browsers.
* Feel free to add as many as you need.
*/

/*** Flexbox ***/

@mixin display-flex($direction) {

display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: $direction;
    -ms-flex-direction: $direction;
        flex-direction: $direction;

}

@mixin align-items($align) {

// Damn you IE.
@if $align == flex-start {
         -ms-flex-align: start;
} @else if $align == flex-end {
         -ms-flex-align: end;
} @else {
         -ms-flex-align: $align;
}
-webkit-align-items: $align;
        align-items: $align;

}

@mixin justify-content($justify) {

// Damn you IE.
@if $justify == flex-start {
         -ms-flex-pack: start;
} @else if $justify == flex-end {
         -ms-flex-pack: end;
} @else if $justify == space-between {
         -ms-flex-pack: justify;
} @else if $justify == space-around {
         -ms-flex-pack: distribute;
} @else {
         -ms-flex-pack: $justify;
}
-webkit-justify-content: $justify;
        justify-content: $justify;

}

@mixin flex($grow: 0, $shrink: 1, $basis: auto) {

-webkit-flex: $grow $shrink $basis;
    -ms-flex: $grow $shrink $basis;
        flex: $grow $shrink $basis;

}

@mixin align-self($align) {

// Damn you IE.
@if $align == flex-start {
        -ms-flex-item-align: start;
} @else if $align == flex-end {
        -ms-flex-item-align: end;
} @else {
        -ms-flex-item-align: $align;
}
-webkit-align-self: $align;
        align-self: $align;

}

@mixin order($position) {

 -webkit-order: $position;
-ms-flex-order: $position;
         order: $position;

}

/*** Gradients ***/

@mixin linear-gradient($angle, $fromColor, $toColor) {

/* Apparently every recent browser supports the new syntax, including IE 10+ */
background: linear-gradient($angle, $fromColor, $toColor);

}

@function prefixed-radial-gradients($shape, $size, $position, $color-stops…) {

@return
        -webkit-radial-gradient($position, $shape $size, $color-stops),
           -moz-radial-gradient($position, $shape $size, $color-stops),
            -ms-radial-gradient($shape $size at $position, $color-stops),
         -o-radial-gradient($position, $shape $size, $color-stops),
                radial-gradient($shape $size at $position, $color-stops);

}

@mixin radial-gradient($shape, $size, $position, $fromColor, $toColor) {

background: mix(nth($fromColor, 1), nth($toColor, 1)); /* Fallback Color for IE9- */
@each $gradient in prefixed-radial-gradients($shape, $size, $position, $fromColor, $toColor) {
        background: $gradient;
}

}

/*** Transitions ***/

@mixin transition($transition) {

-webkit-transition: $transition;
transition: $transition;

}

@mixin transition-property($property) {

-webkit-transition-property: $property;
        transition-property: $property;

}

@mixin transition-duration($duration) {

-webkit-transition-duration: $duration;
        transition-duration: $duration;

}

@mixin transition-timing-function($timing-function) {

-webkit-transition-timing-function: $timing-function;
        transition-timing-function: $timing-function;

}

@mixin transition-delay($delay) {

-webkit-transition-delay: $delay;
        transition-delay: $delay;

}

/*** Animations ***/

@mixin keyframes($animationName) {

@-webkit-keyframes #{$animationName} {
        @content;
}
@keyframes #{$animationName} {
        @content;
}

}

@mixin animation($animations…) {

-webkit-animation: $animations;
        animation: $animations;

}

@mixin animation-timing-function($timing-function) {

-webkit-animation-timing-function: $timing-function;
        animation-timing-function: $timing-function;

}

@mixin transform($transform) {

-webkit-transform: $transform;
        transform: $transform;

}

@mixin translate3d($coordinates…) {

-webkit-transform: translate3d($coordinates);
        transform: translate3d($coordinates);

}

@mixin opacity($percentOpaque) {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$percentOpaque})";
    filter: alpha(opacity=$percentOpaque);
   opacity: ($percentOpaque/100);

}