@import '../mixin/flex.scss';

.se {
  &-flex {
    @include flex;

    &-if {
      display: inline-flex !important;
    }

    &-ff {
      &-rw {
        flex-flow: row wrap !important;
      }

      &-cw {
        flex-flow: column wrap !important;
      }
    }

    @each $s in h, v {
      &-#{$s} {
        @include flex;

        @if $s == h {
          @include rn;
        } @else {
          @include cn;
        }

        @each $ss, $ll in fs flex-start, c center, fe flex-end, sb space-between, sa space-around {
          &-#{$ss} {
            @if $s == h {
              @include flex-rn;
            } @else {
              @include flex-cn;
            }

            justify-content: $ll;
          }
        }
      }
    }

    @for $i from 0 through 10 {
      &-#{$i} {
        flex: $i;
      }
    }

    @each $s, $l in fs flex-start, c center, fe flex-end, sb space-between, sa space-around, s stretch {
      &-ac-#{$s} {
        align-content: $l;
      }
    }

    @each $s, $l in fs flex-start, c center, fe flex-end, s stretch, b baseline {
      &-ai-#{$s} {
        align-items: $l;
      }
    }

    @each $s, $l in fs flex-start, c center, fe flex-end, s stretch, b baseline, a auto {
      &-as-#{$s} {
        align-self: $l;
      }
    }
  }
}