//==================================================
// Mixins
//
// Index
// -----
// 1) Flexbox Layout
// 2) Positioning
//==================================================


//=========================
// 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%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}