// Usage:
//
//   @include flex[(keywords)];
//
// Keywords:
//
//   [inline | wrap | column | reverse | center* | flex-start* | flex-end* | stretch | baseline | space-around | space-between]
//
// * If only one of these keywords is present, it's used for both justify-content and align-items.
//   When two keywords are present the first goes in justify-content (main axis) and the other in align-items (perpendicular axis).
//
// Examples:
//
//   @include flex;
//
//     display: flex;
//
//   @include flex(column wrap);
//
//     display: flex;
//     flex-direction: column;
//     flex-wrap: wrap;
//
//    @include flex(column reverse);
//
//     display: flex;
//     flex-direction: column-reverse;
//
//   @include flex(center);
//
//     display: flex;
//     justify-content: center;
//     align-items: center;
//
//   @include flex(flex-end flex-start);
//
//     display: flex;
//     justify-content: flex-end;
//     align-items: flex-start;


@mixin flex($params: null) {
  $display: flex !default;
  $direction: row;
  $reverse: null;
  $justify-content: null;
  $align-items: null;
  @each $value in $params {
    @if $value == "inline" {
      $display: inline-flex;
    } @else if $value == "wrap" {
      flex-wrap: wrap;
    } @else if $value == "reverse" {
      $reverse: -reverse;
    } @else if $value == "row" {
      $direction: row;
    } @else if $value == "column" {
      $direction: column;
    } @else if index(space-between space-around, $value) {
      $justify-content: $value;
    } @else if index(baseline stretch, $value) {
      $align-items: $value;
    } @else if index(flex-start center flex-end, $value) {
      @if $justify-content {
        $align-items: $value;
      } @else {
        $justify-content: $value;
        @if not $align-items {
          $align-items: $value;
        }
      }
    }
  }
  display: $display;
  justify-content: $justify-content;
  align-items: $align-items;

  @if($reverse != null or $direction != row) {
   flex-direction: #{$direction}#{$reverse};
  } @else if($direction == row){
    flex-direction: #{$direction}
  }
}