// Flex utility classes // stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before @each $breakpoint, $variant in $responsive-variants {

@include breakpoint($breakpoint) {
  // Flexbox classes
  // Container
  .flex#{$variant}-row {
    flex-direction: row !important;
  }
  .flex#{$variant}-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex#{$variant}-column {
    flex-direction: column !important;
  }
  .flex#{$variant}-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex#{$variant}-wrap {
    flex-wrap: wrap !important;
  }
  .flex#{$variant}-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex#{$variant}-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex#{$variant}-justify-start {
    justify-content: flex-start !important;
  }
  .flex#{$variant}-justify-end {
    justify-content: flex-end !important;
  }
  .flex#{$variant}-justify-center {
    justify-content: center !important;
  }
  .flex#{$variant}-justify-between {
    justify-content: space-between !important;
  }
  .flex#{$variant}-justify-around {
    justify-content: space-around !important;
  }

  .flex#{$variant}-items-start {
    align-items: flex-start !important;
  }
  .flex#{$variant}-items-end {
    align-items: flex-end !important;
  }
  .flex#{$variant}-items-center {
    align-items: center !important;
  }
  .flex#{$variant}-items-baseline {
    align-items: baseline !important;
  }
  .flex#{$variant}-items-stretch {
    align-items: stretch !important;
  }

  .flex#{$variant}-content-start {
    align-content: flex-start !important;
  }
  .flex#{$variant}-content-end {
    align-content: flex-end !important;
  }
  .flex#{$variant}-content-center {
    align-content: center !important;
  }
  .flex#{$variant}-content-between {
    align-content: space-between !important;
  }
  .flex#{$variant}-content-around {
    align-content: space-around !important;
  }
  .flex#{$variant}-content-stretch {
    align-content: stretch !important;
  }

  // Item
  .flex#{$variant}-1 {
    flex: 1 !important;
  }
  .flex#{$variant}-auto {
    flex: auto !important;
  }
  .flex#{$variant}-grow-0 {
    flex-grow: 0 !important;
  }
  .flex#{$variant}-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex#{$variant}-self-auto {
    align-self: auto !important;
  }
  .flex#{$variant}-self-start {
    align-self: flex-start !important;
  }
  .flex#{$variant}-self-end {
    align-self: flex-end !important;
  }
  .flex#{$variant}-self-center {
    align-self: center !important;
  }
  .flex#{$variant}-self-baseline {
    align-self: baseline !important;
  }
  .flex#{$variant}-self-stretch {
    align-self: stretch !important;
  }

  .flex#{$variant}-order-1 {
    order: 1 !important;
  }
  .flex#{$variant}-order-2 {
    order: 2 !important;
  }
  .flex#{$variant}-order-none {
    order: inherit !important;
  }
}

}