//==================================================
// Mixins
//
// Index
// -----
// 1) Flexbox Layout
// 2) Positioning
// 3) Shadows
// 4) Animations
//==================================================


//=========================
// 1) Flexbox Layout
//=========================

//=======================
  // Flex Container
//=======================
@mixin flexbox($flex-direction: row, $flex-wrap: nowrap, $justify-content: flex-start, $align-items: flex-start) {
  display: -webkit-flex;
  display: flex;

  -webkit-flex-direction: $flex-direction;
          flex-direction: $flex-direction;

  -webkit-flex-wrap: $flex-wrap;
          flex-wrap: $flex-wrap;

  -webkit-justify-content: $justify-content;
          justify-content: $justify-content;

  -webkit-align-items: $align-items;
          align-items: $align-items;
}

//=======================
  // Flex Item
//=======================
// Use on flex item
@mixin flex($flex-grow: 0, $flex-shrink: 1, $flex-basis: auto) {
  -webkit-flex: $flex-grow, $flex-shrink, $flex-basis;
  flex: $flex-grow, $flex-shrink, $flex-basis;
}

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

//=========================
// 2) Positioning
//=========================

//=======================
  // Vertical Align
//=======================
@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

//=========================
// 3) Shadows
//=========================

//=======================
  // Box Shadow
//=======================
// Usage:
// x-offset | y-offset | blur | color | inset
// Passing no params will render default values as set below
@mixin box-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4), $inset: "") {
  @if ($inset != "") {
    -webkit-box-shadow: $inset $x $y $blur $color;
    box-shadow:         $inset $x $y $blur $color;
  } @else {
    -webkit-box-shadow: $x $y $blur $color;
    box-shadow:         $x $y $blur $color;
  }
}

//=========================
// 4) Animations
//=========================

//=======================
  // Animation
//=======================
// Usage:
// animation name | duration | timing-function | delay
// Example:
// @include animation(slidein 3s linear 1s);
@mixin animation($animation-properties) {
  -webkit-animation: $animation-properties;
          animation: $animation-properties;
}

//=======================
  // Keyframes
//=======================
// Example:
// @include keyframes(slidein) {
//   from {
//     margin-left: 100%;
//     width: 300%;
//   }

//   to {
//     margin-left: 0%;
//     width: 100%;
//   }
// }
@mixin keyframes($identifier) {
  @-webkit-keyframes #{$identifier} {
    @content;
  }
  @keyframes #{$identifier} {
    @content;
  }
}

//=========================
  // Transition
//=========================
// Example:
// @include transition(opacity, 0.5s, ease-in);
@mixin transition($property: all, $length: 0.3s, $easing: ease-in-out) {
  -webkit-transition: $property, $length, $easing;
          transition: $property, $length, $easing;
}

//=========================
  // Transform
//=========================
@mixin transform($transform-functions) {
  -webkit-transform: $transform-functions;
  transform: $transform-functions;
}