// DISPLAY

@mixin displayGenerator() {

  @each $display in block inline inline-block flex none {
    @include extender(display, $display) {
      display: $display;
    }
  }

  @include extender(display, show) {
    display: block;
    @include size(full);
  }

  @include extender(display, hide) {
    display: none;
    @include size(none);
  }

  @include extender(display, fullview) {
    display: block;
    position: absolute;
    @include size(full);
    top: 0;
  }

}

// Extended Display
// .example_class {
//   @include display(none, flex);
// }
@mixin display($default, $small:null, $medium:null, $large:null, $x-large:null) {

  @if $default {

    @include extend(display, $default);

  }
  @if $small {

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

  }
  @if $medium {

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

  }
  @if $large {

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

  }
  @if $x-large {

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

  }

}