@use "../base/mixins/breakpoints" as bp;
@use "../base/mixins/meta-class" as mc;

// Direction
@include mc.meta("qo-flex-row", (flex-direction: row));
@include mc.meta("qo-flex-column", (flex-direction: column));
@include mc.meta("qo-flex-row-reverse", (flex-direction: row-reverse));
@include mc.meta("qo-flex-column-reverse", (flex-direction: column-reverse));

// Wrap
@include mc.meta("qo-flex-wrap", (flex-wrap: wrap));
@include mc.meta("qo-flex-nowrap", (flex-wrap: nowrap));
@include mc.meta("qo-flex-wrap-reverse", (flex-wrap: wrap-reverse));

// Justify content
@include mc.meta("qo-justify-content-start", (justify-content: flex-start));
@include mc.meta("qo-justify-content-end", (justify-content: flex-end));
@include mc.meta("qo-justify-content-center", (justify-content: center));
@include mc.meta("qo-justify-content-between", (justify-content: space-between));
@include mc.meta("qo-justify-content-around", (justify-content: space-around));
@include mc.meta("qo-justify-content-evenly", (justify-content: space-evenly));

// Align items
@include mc.meta("qo-align-items-start", (align-items: flex-start));
@include mc.meta("qo-align-items-end", (align-items: flex-end));
@include mc.meta("qo-align-items-center", (align-items: center));
@include mc.meta("qo-align-items-baseline", (align-items: baseline));
@include mc.meta("qo-align-items-stretch", (align-items: stretch));

// Align self
@include mc.meta("qo-align-self-start", (align-self: flex-start));
@include mc.meta("qo-align-self-end", (align-self: flex-end));
@include mc.meta("qo-align-self-center", (align-self: center));
@include mc.meta("qo-align-self-baseline", (align-self: baseline));
@include mc.meta("qo-align-self-stretch", (align-self: stretch));

// Align content
@include mc.meta("qo-align-content-start", (align-content: flex-start));
@include mc.meta("qo-align-content-end", (align-content: flex-end));
@include mc.meta("qo-align-content-center", (align-content: center));
@include mc.meta("qo-align-content-between", (align-content: space-between));
@include mc.meta("qo-align-content-around", (align-content: space-around));
@include mc.meta("qo-align-content-stretch", (align-content: stretch));

// Flex grow/shrink/fill
@include mc.meta("qo-flex-fill", (flex: 1 1 auto));
@include mc.meta("qo-flex-grow-0", (flex-grow: 0));
@include mc.meta("qo-flex-grow-1", (flex-grow: 1));
@include mc.meta("qo-flex-shrink-0", (flex-shrink: 0));
@include mc.meta("qo-flex-shrink-1", (flex-shrink: 1));

// Order
@include mc.meta("qo-order-first", (order: -1));
@include mc.meta("qo-order-0", (order: 0));
@include mc.meta("qo-order-1", (order: 1));
@include mc.meta("qo-order-2", (order: 2));
@include mc.meta("qo-order-3", (order: 3));
@include mc.meta("qo-order-4", (order: 4));
@include mc.meta("qo-order-5", (order: 5));
@include mc.meta("qo-order-last", (order: 6));

// Responsive variants
@each $bp-name, $bp-value in bp.$breakpoints {
  @media (min-width: $bp-value) {
    @include mc.meta("qo-flex-#{$bp-name}-row", (flex-direction: row));
    @include mc.meta("qo-flex-#{$bp-name}-column", (flex-direction: column));
    @include mc.meta("qo-flex-#{$bp-name}-row-reverse", (flex-direction: row-reverse));
    @include mc.meta("qo-flex-#{$bp-name}-column-reverse", (flex-direction: column-reverse));
    @include mc.meta("qo-flex-#{$bp-name}-wrap", (flex-wrap: wrap));
    @include mc.meta("qo-flex-#{$bp-name}-nowrap", (flex-wrap: nowrap));
    @include mc.meta("qo-justify-content-#{$bp-name}-start", (justify-content: flex-start));
    @include mc.meta("qo-justify-content-#{$bp-name}-end", (justify-content: flex-end));
    @include mc.meta("qo-justify-content-#{$bp-name}-center", (justify-content: center));
    @include mc.meta("qo-justify-content-#{$bp-name}-between", (justify-content: space-between));
    @include mc.meta("qo-justify-content-#{$bp-name}-around", (justify-content: space-around));
    @include mc.meta("qo-justify-content-#{$bp-name}-evenly", (justify-content: space-evenly));
    @include mc.meta("qo-align-items-#{$bp-name}-start", (align-items: flex-start));
    @include mc.meta("qo-align-items-#{$bp-name}-end", (align-items: flex-end));
    @include mc.meta("qo-align-items-#{$bp-name}-center", (align-items: center));
    @include mc.meta("qo-align-items-#{$bp-name}-baseline", (align-items: baseline));
    @include mc.meta("qo-align-items-#{$bp-name}-stretch", (align-items: stretch));
  }
}