// FLEX



@mixin flexGenerator() {

  // Flex Justify
  @each $justify in flex-start center flex-end space-between space-around {
    @include extender(flex, $justify) {
      justify-content: $justify;
    }
  }

  // Flex Direction
  @each $direction in row row-reverse column column-reverse {
    @include extender(flex, $direction) {
      flex-direction: $direction;
    }
  }

  // Full page Container
  @include extender(flex, container) {
    @include extend(flex, column)
    flex: 1;
  }

}


// Flex
// .example_class {
//   @include flex(row, $medium: column);
// }
@mixin flex($default:null, $small:null, $medium:null, $large:null, $x-large:null) {

  @include extend(display, flex);

  @if $default {

    @include extend(flex, $default);

  }

  @if $small {

    @include media(small) {
      @include extend(flex, $small);
    }

  }
  @if $medium {

    @include media(medium) {
      @include extend(flex, $medium);
    }

  }
  @if $large {

    @include media(large) {
      @include extend(flex, $large);
    }

  }
  @if $x-large {

    @include media(x-large) {
      @include extend(flex, $x-large);
    }

  }

}