@mixin animation($animation) {
  -webkit-animation: $animation;
  -moz-animation: $animation;
  -o-animation: $animation;
  animation: $animation;
}

@mixin background-stretch() {
  background-attachment: center center;
  background-position: fixed;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

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

@mixin blur($radius: 5) {
  -webkit-filter: blur($radius + px);
  -moz-filter: blur($radius + px);
  -ms-filter: blur($radius + px);
  -o-filter: blur($radius + px);
  // filter: url(blur.svg#blur);
  // filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='#{$radius}');
}

@mixin column-count($num: 2) {
  -webkit-column-count: $num;
  -moz-column-count: $num;
  column-count: $num;
  @include column-gap();
}

@mixin column-gap($num: 20px) {
  -webkit-column-gap: $num;
  -moz-column-gap: $num;
  column-gap: $num;
}

@mixin filter($filter) {
  -webkit-filter: $filter;
  -moz-filter: $filter;
  -o-filter: $filter;
  filter: $filter;
}

@mixin flip {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

@mixin font-smoothing($font-smoothing) {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

@mixin image($image, $width, $height, $hd: none) {
  background-attachment: top center;
  background-image: url($image);
  background-repeat: no-repeat;
  background-size: $width+px $height+px;
  @if $hd != none {
    @media (min--moz-device-pixel-ratio: 1.3),
           (-o-min-device-pixel-ratio: 2.6/2),
           (-webkit-min-device-pixel-ratio: 1.3),
           (min-device-pixel-ratio: 1.3),
           (min-resolution: 1.3dppx) {
      /* on retina, use image that's scaled by 2 */
      background-image: url($hd);
    }
  }
}

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

@mixin gradient($start, $end) {
  background: -moz-linear-gradient(top, $start 0%, $end 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $start), color-stop(100%, $end));
  background: -webkit-linear-gradient(top, $start 0%, $end 100%);
  background: -o-linear-gradient(top, $start 0%, $end 100%);
  background: -ms-linear-gradient(top, $start 0%, $end 100%);
  background: linear-gradient(to bottom, $start 0%, $end 100%);
}

@mixin rounded($size: 5px, $corner: "none") {
  @if $corner == "none" {
    -webkit-border-radius: $size;
    -moz-border-radius: $size;
    border-radius: $size;
  }
  @else {
    -webkit-border-#{$corner}-radius: $size;
    -moz-border-#{$corner}-radius: $size;
    border-#{$corner}-radius: $size;
  }
}

@mixin shadow($style: $shadow) {
  -webkit-box-shadow: $style;
  -moz-box-shadow: $style;
  box-shadow: $style;
}

@mixin text-shadow($style: $shadow) {
  -webkit-text-shadow: $style;
  -moz-text-shadow: $style;
  text-shadow: $style;
}

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

@mixin transform-origin($style) {
  -webkit-transform-origin: $style;
  -ms-transform-origin: $style;
  transform-origin: $style;
}

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

@mixin wordwrap() {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  white-space: initial !important;
}

@mixin placeholder {

  &::-webkit-input-placeholder {
    @content;
  }

  &:-moz-placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }

}

// Cross browser flex information here:
// http://stackoverflow.com/questions/13934654/is-there-any-polyfill-for-current-css-flexible-box-layout-module-as-per-w3c-cr

@mixin flex {
  @include justify();
  display: -webkit-box;     // OLD - iOS 6-, Safari 3.1-6
  display: -moz-box;        // OLD - Firefox 19- (buggy but mostly works)
  display: -ms-flexbox;     // TWEENER - IE 10
  display: -webkit-flex;    // NEW - Chrome
  display: flex;
}

@mixin flex-size($size: 1) {
  -webkit-box-flex: $size;  // OLD - iOS 6-, Safari 3.1-6
  -moz-box-flex: $size;     // OLD - Firefox 19-
  // width: 20%;            // For old syntax, otherwise collapses.
  -webkit-flex: $size;      // Chrome
  -ms-flex: $size;          // IE 10
  flex: $size;              // NEW, Spec - Opera 12.1, Firefox 20+
}

@mixin flex-order($order: 1) {
  -webkit-box-ordinal-group: $order;
  -moz-box-ordinal-group: $order;
  -ms-flex-order: $order;
  -webkit-order: $order;
  order: $order;
}

@mixin flex-direction($flow: row) {
  -webkit-flex-direction: $flow;
  -moz-flex-direction: $flow;
  flex-direction: $flow;
}

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

@mixin align-content($align: center) {
  -webkit-align-content: $align;
  align-content: $align;
}

@mixin align-items($align: center) {
  -webkit-align-items: $align;
  align-items: $align;
}

@mixin align-self($align: center) {
  -webkit-align-self: $align;
  align-self: $align;
}

@mixin justify($align: center) {
  -webkit-justify-content: $align;
  -moz-justify-content: $align;
  justify-content: $align;
}
