// Transition
@mixin transition($property: all, $time: .25s, $ease: ease-in-out) {
  -webkit-transition: $property $time $ease;
  -moz-transition: $property $time $ease;
  -o-transition: $property $time $ease;
  transition: $property $time $ease;
}
@mixin transition-delay($time: .5s) {
  -webkit-transition-delay: $time;
  -moz-transition-delay: $time;
  -o-transition-delay: $time;
}

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

// --------------------------------------------------
// Flexbox SASS mixins
// --------------------------------------------------

// Flexbox display
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-flex: $values;
  -ms-flex: $values;
  flex: $values;
}

// row | row-reverse | column | column-reverse
@mixin flex-direction($direction) {
  -webkit-flex-direction: $direction;
  -ms-flex-direction: $direction;
  flex-direction: $direction;
}

// nowrap | wrap | wrap-reverse
@mixin flex-wrap($wrap: wrap) {
  -webkit-flex-wrap: $wrap;
  -ms-flex-wrap: $wrap;
  flex-wrap: $wrap;
}

// flex-start | flex-end | center | space-between | space-around
@mixin justify-content($justify) {
  -webkit-justify-content: $justify;
  justify-content: $justify;
}

// flex-start | flex-end | center | space-between | space-around | stretch
@mixin align-content($align) {
  -webkit-align-content: $align;
  align-content: $align;
}

// flex-start | flex-end | center | baseline | stretch
@mixin align-items($align) {
  -webkit-align-items: $align;
  -ms-flex-align: $align;
  align-items: $align;
}

// auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($align) {
  -webkit-align-self: $align;
  align-self: $align;
}
@mixin flex-center() {
  @include flexbox();
  @include justify-content(center);
  @include align-items(center);
}
//transform
@mixin transform($transform) {
  -webkit-transform: $transform;
  -ms-transform: $transform;
  -o-transform: $transform;
  transform: $transform;
}

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

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

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

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

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

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

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

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

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

// box-shadow
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow: inset $top $left $blur $color;
    -moz-box-shadow: inset $top $left $blur $color;
    box-shadow: inset $top $left $blur $color;
  }
  @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

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

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

@mixin placeholder-opacity($opacity) {
  &::-webkit-input-placeholder {
    /* WebKit browsers */
    opacity: $opacity;
  }
  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    opacity: $opacity;
  }
  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    opacity: $opacity;
  }
  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    opacity: $opacity;
  }
}

@mixin placeholder-color($color) {
  &::-webkit-input-placeholder {
    /* WebKit browsers */
    color: $color;
  }
  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: $color;
  }
  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: $color;
  }
  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: $color;
  }
}

@mixin placeholder-style($style) {
  &::-webkit-input-placeholder {
    /* WebKit browsers */
    font-style: $style;
  }
  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    font-style: $style;
  }
  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    font-style: $style;
  }
  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    font-style: $style;
  }
}

@mixin animate($name, $delay, $duration) {
  -webkit-animation-name: $name;
  -moz-animation-name: $name;
  -o-animation-name: $name;
  animation-name: $name;
  -webkit-animation-delay: $delay;
  -moz-animation-delay: $delay;
  -o-animation-delay: $delay;
  animation-delay: $delay;
  -webkit-animation-duration: $duration;
  -moz-animation-duration: $duration;
  -o-animation-duration: $duration;
  animation-duration: $duration;
}
// gradient
@mixin gradient($color1, $color2) {
  background-color: $color1;
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$color1}, endColorstr=#{$color2});
  background-image: -moz-linear-gradient(center top, $color1, $color2);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color1), to($color2));
}