// ===================================================================
// Flexbox Grid Mixins
// Version 0.1.6
// Description: Sass Mixins to generate Flexbox grid
// Author: thingsym
// GitHub: https://github.com/thingsym/flexbox-grid-mixins
// MIT License
// ===================================================================

@mixin flex($justify-content: null, $align-items: null, $align-content: null, $flex-direction: null, $display: flex, $flex-wrap: null, $flex-flow: null,  $gutter: null, $grid-type: skeleton)
{

  @if $display {
    display: $display;
  }

  // Direction of the item row(-reverse) or column(-reverse)
  @if $flex-direction {
    flex-direction: $flex-direction;
  }

  // If multi line is needed set to wrap (or wrap-reverse if starting from bottom)
  @if $flex-wrap {
    flex-wrap: $flex-wrap;
  }

  @if $flex-flow {
    flex-flow: $flex-flow;
  }

  // Horizontal space
  @if $justify-content {
    justify-content: $justify-content;
  }

  // Vertical space for each line
  @if $align-items {
    align-items: $align-items;
  }

  // Vertical space for multi line
  @if $align-content {
    align-content: $align-content;
  }

  @if $grid-type == skeleton and $gutter {
    margin: $gutter / 2 * -1;

    > *
    {
      margin: $gutter
    }
  }
  @if $grid-type == 'row' and $gutter {
    margin-left: $gutter / 2 * -1;
    margin-right: $gutter / 2 * -1;

    > *
    {
      margin: $gutter
    }
  }
}