@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
@mixin box-sizing($type: border-box) {
  -webkit-box-sizing: $type;
  -moz-box-sizing: $type;
  box-sizing: $type;
}

// Opacity
@mixin opacity($opacity: 0.5) {
  -webkit-opacity: $opacity;
  -moz-opacity: $opacity;
  opacity: $opacity;
}

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

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

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

// --------------------------------------------------
// Flexbox LESS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------

// Flexbox display
@mixin display-flex($display: flex, $direction: row, $wrap: wrap) {
  display: -webkit-#{display};
  display: -ms-#{display}box; // IE10 uses -ms-flexbox
  display: -ms-#{display}; // IE11
  display: $display;

  -webkit-flex-direction: $direction;
  -ms-flex-direction: $direction;
  flex-direction: $direction;
  -webkit-flex-wrap: $wrap;
  -ms-flex-wrap: $wrap;
  flex-wrap: $wrap;
}

// Flex Direction and Wrap
@mixin flex-flow($flow) {
  -webkit-flex-flow: $flow;
  -ms-flex-flow: $flow;
  flex-flow: $flow;
}

// Display Order
@mixin flex-order($order: 0) {
  -webkit-order: $order;
  -ms-order: $order;
  order: $order;
}

// Flex  - applies to: flex items
@mixin flex($flex-grow: 0, $flex-shrink: 1, $flex-basis: auto) {
  -webkit-flex: $flex-grow $flex-shrink $flex-basis;
  -ms-flex: $flex-grow $flex-shrink $flex-basis;
  flex: $flex-grow $flex-shrink $flex-basis;
}

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

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

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

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

// Cross-axis Alignment
// auto | flex-start | flex-end | center | baseline | stretch
@mixin align-self($align: auto) {
  -webkit-align-self: $align;
  -ms-align-self: $align;
  align-self: $align;
}

//Vertical Gradient
@mixin vertical-gradient($vstartColor: $orange-6, $vendColor: $red-6) {
  background-color: $vstartColor;
  background: -webkit-gradient(linear, left top, left bottom, from($vstartColor), to($vendColor));
  background: -webkit-linear-gradient(top, $vstartColor, $vendColor);
  background: -moz-linear-gradient(top, $vstartColor, $vendColor);
  background: -ms-linear-gradient(top, $vstartColor, $vendColor);
  background: -o-linear-gradient(top, $vstartColor, $vendColor);
}

//Horizontal Gradient
@mixin horizontal-gradient($hstartColor: $orange-6, $hendColor: $red-6) {
  background-color: $hstartColor;
  background: -webkit-gradient(linear, left top, right top, from($hstartColor), to($hendColor));
  background: -webkit-linear-gradient(left, $hstartColor, $hendColor);
  background: -moz-linear-gradient(left, $hstartColor, $hendColor);
  background: -ms-linear-gradient(left, $hstartColor, $hendColor);
  background: -o-linear-gradient(left, $hstartColor, $hendColor);
}

//Corner Left Gradient
@mixin corner-left-gradient($hstartColor: $cyan-6, $hendColor: $blue-8) {
  background: -moz-linear-gradient(125deg, $hstartColor 0%, $hendColor 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, $hstartColor), color-stop(100%, $hendColor));
  background: -webkit-linear-gradient(125deg, $hstartColor 0%, $hendColor 100%);
  background: -o-linear-gradient(125deg, $hstartColor 0%, $hendColor 100%);
  background: -ms-linear-gradient(125deg, $hstartColor 0%, $hendColor 100%);
  background: linear-gradient(325deg, $hstartColor 0%, $hendColor 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$hstartColor', endColorstr='$hendColor', GradientType=0);
}