/* ==========================================================================
   #FLEX
   ========================================================================== */

/**
 * Utility classes to put specific flex options on an element:
 */

/* Variables
  ========================================================================== */

$au-flex-utilities-responsive: false !default;

/* Utility classes
  ========================================================================== */

.au-u-flex {
  display: flex !important;
}

.au-u-flex--inline {
  display: inline-flex !important;
}

// Wrap
// ---
.au-u-flex--wrap {
  flex-wrap: wrap !important;
}

.au-u-flex--no-wrap {
  flex-wrap: nowrap !important;
}

// Spacing
// ---
.au-u-flex--spaced {
  gap: $au-unit !important;
}

.au-u-flex--spaced-tiny {
  gap: $au-unit-tiny !important;
}

.au-u-flex--spaced-small {
  gap: $au-unit-small !important;
}

.au-u-flex--spaced-large {
  gap: $au-unit-large !important;
}

// Alignment
// ---
.au-u-flex--row {
  flex-direction: row !important;
}

.au-u-flex--column {
  flex-direction: column !important;
}

.au-u-flex--row-reverse {
  flex-direction: row-reverse !important;
}

.au-u-flex--column-reverse {
  flex-direction: column-reverse !important;
}

.au-u-flex--start {
  justify-content: flex-start !important;
}

.au-u-flex--center {
  justify-content: center !important;
}

.au-u-flex--between {
  justify-content: space-between !important;
}

.au-u-flex--around {
  justify-content: space-around !important;
}

.au-u-flex--end {
  justify-content: flex-end !important;
}

.au-u-flex--vertical-start {
  align-items: flex-start !important;
}

.au-u-flex--vertical-end {
  align-items: flex-end !important;
}

.au-u-flex--vertical-center {
  align-items: center !important;
}

.au-u-flex--vertical-baseline {
  align-items: baseline !important;
}

// Child elements alignment
.au-u-flex-self-start {
  align-self: flex-start !important;
}

.au-u-flex-self-end {
  align-self: flex-end !important;
}

.au-u-flex-self-center {
  align-self: center !important;
}

.au-u-flex-self-baseline {
  align-self: baseline !important;
}

.au-u-flex-self-stretch {
  align-self: stretch !important;
}

// Child elements growing
.au-u-flex-grow {
  flex-grow: 1 !important;
}

.au-u-flex-grow-0 {
  flex-grow: 0 !important;
}

// Child elements shrinking
.au-u-flex-shrink {
  flex-shrink: 1 !important;
}

.au-u-flex-shrink-0 {
  flex-shrink: 0 !important;
}

// Responsive utilities
// ---
@if ($au-flex-utilities-responsive == true) {
  @if (variable-exists(mq-breakpoints)) {
    @each $au-bp-name, $au-bp-value in $mq-breakpoints {
      $from: $au-bp-name;
      $until: false;

      @include mq($from: $from, $until: $until) {
        .au-u-flex\@#{$au-bp-name} {
          display: flex !important;
        }

        .au-u-flex--inline\@#{$au-bp-name} {
          display: inline-flex !important;
        }

        .au-u-flex--wrap\@#{$au-bp-name} {
          flex-wrap: wrap !important;
        }

        .au-u-flex--no-wrap\@#{$au-bp-name} {
          flex-wrap: nowrap !important;
        }

        .au-u-flex--spaced\@#{$au-bp-name} {
          gap: $au-unit !important;
        }

        .au-u-flex--spaced-tiny\@#{$au-bp-name} {
          gap: $au-unit-tiny !important;
        }

        .au-u-flex--spaced-small\@#{$au-bp-name} {
          gap: $au-unit-small !important;
        }

        .au-u-flex--spaced-large\@#{$au-bp-name} {
          gap: $au-unit-large !important;
        }

        .au-u-flex--row\@#{$au-bp-name} {
          flex-direction: row !important;
        }

        .au-u-flex--column\@#{$au-bp-name} {
          flex-direction: column !important;
        }

        .au-u-flex--row-reverse\@#{$au-bp-name} {
          flex-direction: row-reverse !important;
        }

        .au-u-flex--column-reverse\@#{$au-bp-name} {
          flex-direction: column-reverse !important;
        }

        .au-u-flex--start\@#{$au-bp-name} {
          justify-content: flex-start !important;
        }

        .au-u-flex--center\@#{$au-bp-name} {
          justify-content: center !important;
        }

        .au-u-flex--between\@#{$au-bp-name} {
          justify-content: space-between !important;
        }

        .au-u-flex--around\@#{$au-bp-name} {
          justify-content: space-around !important;
        }

        .au-u-flex--end\@#{$au-bp-name} {
          justify-content: flex-end !important;
        }

        .au-u-flex--vertical-start\@#{$au-bp-name} {
          align-items: flex-start !important;
        }

        .au-u-flex--vertical-end\@#{$au-bp-name} {
          align-items: flex-end !important;
        }

        .au-u-flex--vertical-center\@#{$au-bp-name} {
          align-items: center !important;
        }

        .au-u-flex--vertical-baseline\@#{$au-bp-name} {
          align-items: baseline !important;
        }

        .au-u-flex-self-start\@#{$au-bp-name} {
          align-self: flex-start !important;
        }

        .au-u-flex-self-end\@#{$au-bp-name} {
          align-self: flex-end !important;
        }

        .au-u-flex-self-center\@#{$au-bp-name} {
          align-self: center !important;
        }

        .au-u-flex-self-baseline\@#{$au-bp-name} {
          align-self: baseline !important;
        }

        .au-u-flex-self-stretch\@#{$au-bp-name} {
          align-self: stretch !important;
        }
        .au-u-flex-grow\@#{$au-bp-name} {
          flex-grow: 1 !important;
        }
        .au-u-flex-grow-0\@#{$au-bp-name} {
          flex-grow: 0 !important;
        }
        .au-u-flex-shrink\@#{$au-bp-name} {
          flex-shrink: 1 !important;
        }
        .au-u-flex-shrink-0\@#{$au-bp-name} {
          flex-shrink: 0 !important;
        }
      }
    }
  }
}