// =============================================================================
// _FLEXBOX.SCSS
// -----------------------------------------------------------------------------
// Global SCSS mixins.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Display
//   02. Container: Flex Flow
//   03. Container: Item Alignment
//   04. Items: Order
//   04. Items: Flex
//   04. Items: Alignment
// =============================================================================

// Display
// =============================================================================

@mixin display($value) {
  @if $value == "flex" {
    display: -webkit-flex;
    display: flex;
  } @else if $value == "inline-flex" {
    display: -webkit-inline-flex;
    display: inline-flex;
  } @else {
    display: $value;
  }
}



// Container: Flex Flow
// =============================================================================

// Notes
// -----
// 01. flex-direction - This property specifies how flex items are laid out
//     in the flex container, by setting the direction of the flex container’s
//     main axis.
//     row | row-reverse | column | column-reverse
//
// 02. flex-wrap - Controls if the flex container lay out its items in single
//     or multiple lines, and the direction the new lines are stacked in.
//     nowrap | wrap | wrap-reverse
//
// 03. flex-flow - A shorthand for setting the flex-direction and flex-wrap
//     properties.

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

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

@mixin flex-flow($value: row nowrap) {
  -webkit-flex-flow: $value;
          flex-flow: $value;
}



// Container: Item Alignment
// =============================================================================

// Notes
// -----
// 01. justify-content - Aligns flex items along the main axis of the current
//     line of the flex container.
//     flex-start | flex-end | center | space-between | space-around
//
// 02. align-items - Flex items can be aligned in the cross axis of the
//     current line of the flex container, similar to justify-content but in
//     the perpendicular direction.
//     flex-start | flex-end | center | baseline | stretch
//
// 03. align-content - Aligns a flex container’s lines within the flex
//     container when there is extra space in the cross-axis (multiple rows
//     of items), similar to how justify-content aligns individual items
//     within the main-axis.
//     flex-start | flex-end | center | space-between | space-around | stretch

@mixin justify-content($value: flex-start) {
  -webkit-justify-content: $value;
          justify-content: $value;
}

@mixin align-items($value: flex-start) {
  -webkit-align-items: $value;
          align-items: $value;
}

@mixin align-content($value: flex-start) {
  -webkit-align-content: $value;
          align-content: $value;
}



// Items: Order
// =============================================================================

// Notes
// -----
// 01. order - Controls the order in which children of a flex container
//     appear inside the flex container (defaults to 0);

@mixin order($value: 0) {
  -webkit-order: $value;
          order: $value;
}



// Items: Flex
// =============================================================================

// Notes
// -----
// 01. flex-grow - Determines how much the flex item will grow relative to
//     the rest of the flex items in the flex container when positive free
//     space is distributed (defaults to 0).
//
// 02. flex-shrink - Specifies the flex shrink factor, which determines how
//     much the flex item will shrink relative to the rest of the flex items
//     in the flex container when negative free space is distributed
//     (defaults to 1).
//
// 03. flex-basis - This property takes the same values as width and height
//     properties, and specifies the initial main size (width) of the flex
//     item, before free space is distributed according to the flex factors.
//
// 04. flex - This property is the shorthand for the flex-grow, flex-shrink
//     and flex-basis properties.

@mixin flex-grow($value: 0) {
  -webkit-flex-grow: $value;
          flex-grow: $value;
}

@mixin flex-shrink($value: 1) {
  -webkit-flex-shrink: $value;
          flex-shrink: $value;
}

@mixin flex-basis($value: auto) {
  -webkit-flex-basis: $value;
          flex-basis: $value;
}

@mixin flex($value: 0 1 auto) {
  -webkit-flex: $value;
          flex: $value;
}



// Items: Alignment
// =============================================================================

// Notes
// -----
// 01. align-self - This property allows the default alignment (or the one
//     specified by align-items) to be overridden for individual flex items.
//     auto | flex-start | flex-end | center | baseline | stretch

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