@use "sass:list";
$flex-orders: (1, 2, 3, 4, 5, 6);
$order-length: list.length($flex-orders);
$max-order: list.nth($flex-orders, $order-length);

.flex-row {
  flex-direction: row !important;
}

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

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

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

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

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

.justify-evenly {
  justify-content: space-evenly !important;
}

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

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

.justify-center {
  justify-content: center !important;
}

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

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

.align-center {
  align-items: center !important;
}

.align-baseline {
  align-items: baseline !important;
}

.align-stretch {
  align-items: stretch !important;
}

.self-start {
  align-self: flex-start !important;
}

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

.self-center {
  align-self: center !important;
}

.self-baseline {
  align-self: baseline !important;
}

.self-stretch {
  align-self: stretch !important;
}

.wrap {
  flex-wrap: wrap !important;
}

.nowrap {
  flex-wrap: nowrap !important;
}

.wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

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

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

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

.order-first {
  order: -1 !important;
}

.order-last {
  order: $max-order !important;
}

.content-start {
  align-content: flex-start !important;
}

.content-end {
  align-content: flex-end !important;
}

.content-center {
  align-content: center !important;
}

.content-around {
  align-content: space-around !important;
}

.content-between {
  align-content: space-between !important;
}

.content-stretch {
  align-content: stretch !important;
}

@each $order in $flex-orders {
  .order-#{$order} {
    order: $order;
  }
}

@each $screen, $size in $breakpoints {
  @media (min-width: $size) {
    .#{$screen}-justify-between {
      justify-content: space-between !important;
    }

    .#{$screen}-justify-around {
      justify-content: space-around !important;
    }

    .#{$screen}-justify-evenly {
      justify-content: space-evenly !important;
    }

    .#{$screen}-justify-start {
      justify-content: flex-start !important;
    }

    .#{$screen}-justify-end {
      justify-content: flex-end !important;
    }

    .#{$screen}-justify-center {
      justify-content: center !important;
    }

    .#{$screen}-flex-row {
      flex-direction: row !important;
    }

    .#{$screen}-flex-column {
      flex-direction: column !important;
    }

    .#{$screen}-flex-row-reverse {
      flex-direction: row-reverse !important;
    }

    .#{$screen}-flex-column-reverse {
      flex-direction: column-reverse !important;
    }

    .#{$screen}-wrap {
      flex-wrap: wrap !important;
    }

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

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

    .#{$screen}-align-start {
      align-items: flex-start !important;
    }

    .#{$screen}-align-end {
      align-items: flex-end !important;
    }

    .#{$screen}-align-center {
      align-items: center !important;
    }

    .#{$screen}-align-baseline {
      align-items: baseline !important;
    }

    .#{$screen}-align-stretch {
      align-items: stretch !important;
    }

    .#{$screen}-self-start {
      align-self: flex-start !important;
    }

    .#{$screen}-self-end {
      align-self: flex-end !important;
    }

    .#{$screen}-self-center {
      align-self: center !important;
    }

    .#{$screen}-self-baseline {
      align-self: baseline !important;
    }

    .#{$screen}-self-stretch {
      align-self: stretch !important;
    }

    .#{$screen}-flex-fill {
      flex: 1 1 auto !important;
    }

    .#{$screen}-flex-grow-1 {
      flex-grow: 1 !important;
    }

    .#{$screen}-flex-grow-0 {
      flex-grow: 0 !important;
    }

    .#{$screen}-flex-shrink-1 {
      flex-shrink: 1 !important;
    }

    .#{$screen}-flex-shrink-0 {
      flex-shrink: 0 !important;
    }

    .#{$screen}-order-first {
      order: -1 !important;
    }

    .#{$screen}-order-last {
      order: $max-order !important;
    }

    @each $order in $flex-orders {
      .#{$screen}-order-#{$order} {
        order: $order;
      }
    }

    .#{$screen}-content-start {
      align-content: flex-start !important;
    }

    .#{$screen}-content-end {
      align-content: flex-end !important;
    }

    .#{$screen}-content-center {
      align-content: center !important;
    }

    .#{$screen}-content-around {
      align-content: space-around !important;
    }

    .#{$screen}-content-between {
      align-content: space-between !important;
    }

    .#{$screen}-content-stretch {
      align-content: stretch !important;
    }
  }
}