SCSS prefix mixins

// placeholder
@mixin optional-at-root($sel) {
    @at-root #{if(not &, $sel, selector-append(&, $sel))} {
        @content;
    }
}
@mixin placeholder {
    @include optional-at-root('::-webkit-input-placeholder') {
        @content;
    }
    @include optional-at-root(':-moz-placeholder') {
        @content;
    }
    @include optional-at-root('::-moz-placeholder') {
        @content;
    }
    @include optional-at-root(':-ms-input-placeholder') {
        @content;
    }
}

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

// filter
@mixin filter($value) {
    -webkit-filter: $value;
    -ms-filter: $value;
    filter: $value;
}

// flexbox
@mixin flexbox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
@mixin inline-flex {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

// flex-direction
@mixin flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}
@mixin flex-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
@mixin flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
@mixin flex-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

// flex-wrap
@mixin flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
@mixin flex-wrap-reverse {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}
@mixin flex-nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

// justify-content
@mixin justify-content-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
@mixin justify-content-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
@mixin justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
@mixin justify-content-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

// align-items
@mixin align-items-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
@mixin align-items-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
@mixin align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
@mixin align-items-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

// align-self
@mixin align-self-start {
    -webkit-align-self: start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}
@mixin align-self-end {
    -webkit-align-self: end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}

// flex-shrink
@mixin flex-shrink($value) {
    -webkit-flex-shrink: $value;
    -moz-flex-shrink: $value;
    -ms-flex-negative: $value;
    flex-shrink: $value;
}

// flex-grow
@mixin flex-grow($value) {
    -webkit-box-flex: $value;
    -webkit-flex-grow: $value;
    -moz-flex-grow: $value;
    -ms-flex-positive: $value;
    flex-grow: $value;
}

// flex-grow
@mixin flex-basis($value) {
    -webkit-flex-basis: $value;
    -moz-flex-basis: $value;
    -ms-flex-preferred-size: $value;
    flex-basis: $value;
}

// flex
@mixin flex($value) {
    -webkit-box-flex: $value;
    -ms-flex: $value;
    flex: $value;
}

// vertical gradient
@mixin vertical-gradient($colors...) {
    background: -webkit-linear-gradient(top, $colors);
    background: -moz-linear-gradient(top, $colors);
    background: -o-linear-gradient(top, $colors);
    background: -ms-linear-gradient(top, $colors);
    background: linear-gradient(to bottom, $colors);
}

// horizontal gradient
@mixin horizontal-gradient($colors...) {
    background: -webkit-linear-gradient(left, $colors);
    background: -moz-linear-gradient(left, $colors);
    background: -o-linear-gradient(left, $colors);
    background: -ms-linear-gradient(left, $colors);
    background: linear-gradient(to right, $colors);
}

// radial gradient
@mixin radial-gradient($colors...) {
    background: -webkit-radial-gradient($colors);
    background: -moz-radial-gradient($colors);
    background: -o-radial-gradient($colors);
    background: radial-gradient($colors);
}

// rotate gradient
// example: @include rotate-gradient(-45deg, 135deg, #000, #fff);
@mixin rotate-gradient($deg1, $deg2, $colors...) {
    background-image: -webkit-linear-gradient(#{$deg1}deg, $colors);
    background-image: -moz-linear-gradient(#{$deg1}deg, $colors);
    background-image: -o-linear-gradient(#{$deg1}deg, $colors);
    background-image: -ms-linear-gradient(#{$deg1}deg, $colors);
    background-image: linear-gradient(#{$deg2}deg, $colors);
}
// box shadow
@mixin box-shadow($content...) {
    -webkit-box-shadow: $content;
    -moz-box-shadow: $content;
    box-shadow: $content;
}

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

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

// scale
@mixin scale($scale) {
    @include transform(scale($scale));
}

// scaleX
@mixin scaleX($scaleX) {
    @include transform(scaleX($scaleX));
}

// scaleY
@mixin scaleY($scaleY) {
    @include transform(scaleY($scaleY));
}

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

// translateX
@mixin translateX($translateX) {
    @include transform(translateX($translateX));
}

// translateY
@mixin translateY($translateY) {
    @include transform(translateY($translateY));
}

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

// skew
@mixin skew ($x, $y) {
    @include transform(skew(#{$x}deg, #{$y}deg));
}

// matrix
@mixin matrix($matrix...) {
    @include transform(matrix($matrix));
}

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

// transform style
@mixin transform-style($style) {
    -webkit-transform-style: $style;
    -moz-transform-style: $style;
    transform-style: $style;
}

// transition
@mixin transition($transition...) {
    -moz-transition: $transition;
    -o-transition: $transition;
    -webkit-transition: $transition;
    transition: $transition;
}
@mixin transition-property($property...) {
    -moz-transition-property: $property;
    -o-transition-property: $property;
    -webkit-transition-property: $property;
    transition-property: $property;
}
@mixin transition-duration($duration) {
    -moz-transition-duration: $duration;
    -o-transition-duration: $duration;
    -webkit-transition-duration: $duration;
    transition-duration: $duration;
}
@mixin transition-timing-function($timing) {
    -moz-transition-timing-function: $timing;
    -o-transition-timing-function: $timing;
    -webkit-transition-timing-function: $timing;
    transition-timing-function: $timing;
}
@mixin transition-delay($delay...) {
    -moz-transition-delay: $delay;
    -o-transition-delay: $delay;
    -webkit-transition-delay: $delay;
    transition-delay: $delay;
}

// animation
@mixin keyframe($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name}  {
        @content;
    }
    @-o-keyframes #{$name} {
        @content;
    }
    @-ms-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}
@mixin animation($content) {
    -webkit-animation: $content;
    -moz-animation: $content;
    -o-animation: $content;
    -ms-animation: $content;
    animation: $content;
}
@mixin animation-name($name) {
    -webkit-animation-name: $name;
    -moz-animation-name: $name;
    -o-animation-name: $name;
    animation-name: $name;
}
@mixin animation-duration($duration) {
    -webkit-animation-duration: $duration;
    -moz-animation-duration: $duration;
    -o-animation-duration: $duration;
    animation-duration: $duration;
}
@mixin animation-delay($delay) {
    -webkit-animation-delay: $delay;
    -moz-animation-delay: $delay;
    -o-animation-delay: $delay;
    animation-delay: $delay;
}
@mixin animation-iteration-count($count) {
    -webkit-animation-iteration-count: $count;
    -moz-animation-iteration-count: $count;
    -o-animation-iteration-count: $count;
    animation-iteration-count: $count;
}