// Utilities for flex container &  additional flex alignment options.
.u-flexRow {
  flex-direction: row;
}

.u-flexColumn {
  flex-direction: column;
}

.u-flexRowReverse {
  flex-direction: row-reverse;
}

.u-flexColumnReverse {
  flex-direction: column-reverse;
}

.u-flex1 {
  flex: 1 1 0%;
}

.u-flexFill {
  flex: 1 1 auto;
}

.u-flexNone {
  flex: none;
}

.u-flexGrow0 {
  flex-grow: 0;
}

.u-flexGrow1 {
  flex-grow: 1;
}

.u-flexShrink0 {
  flex-shrink: 0;
}

.u-flexShrink1 {
  flex-shrink: 1;
}

.u-flexWrap {
  flex-wrap: wrap;
}

.u-flexNowrap {
  flex-wrap: nowrap;
}

.u-flexWrapReverse {
  flex-wrap: wrap-reverse;
}

.u-alignContentStart {
  align-content: flex-start;
}

.u-alignContentEnd {
  align-content: flex-end;
}

.u-alignContentCenter {
  align-content: center;
}

.u-alignContentBetween {
  align-content: space-between;
}

.u-alignContentAround {
  align-content: space-around;
}

.u-alignContentStretch {
  align-content: stretch;
}

.u-alignItemsStart {
  align-items: flex-start;
}

.u-alignItemsEnd {
  align-items: flex-end;
}

.u-alignItemsCenter {
  align-items: center;
}

.u-alignItemsBaseline {
  align-items: baseline;
}

.u-alignItemsStretch {
  align-items: stretch;
}

.u-alignSelfAuto {
  align-self: auto;
}

.u-alignSelfStart {
  align-self: flex-start;
}

.u-alignSelfEnd {
  align-self: flex-end;
}

.u-alignSelfCenter {
  align-self: center;
}

.u-alignSelfBaseline {
  align-self: baseline;
}

.u-alignSelfStretch {
  align-self: stretch;
}

.u-justifyContentStart {
  justify-content: flex-start;
}

.u-justifyContentEnd {
  justify-content: flex-end;
}

.u-justifyContentCenter {
  justify-content: center;
}

.u-justifyContentBetween {
  justify-content: space-between;
}

.u-justifyContentAround {
  justify-content: space-around;
}

.u-justifySelfAuto {
  justify-self: auto;
}

.u-justifySelfStart {
  justify-self: flex-start;
}

.u-justifySelfEnd {
  justify-self: flex-end;
}

.u-justifySelfBetween {
  justify-self: space-between;
}

.u-justifySelfCenter {
  justify-self: center;
}

.u-justifySelfStretch {
  justify-self: stretch;
}

.u-justifyItemsStart {
  justify-items: flex-start;
}

.u-justifyItemsEnd {
  justify-items: flex-end;
}

.u-justifyItemsCenter {
  justify-items: center;
}

.u-justifyItemsStretch {
  justify-items: stretch;
}

.u-placeContentCenter {
  place-content: center;
}

.u-placeContentStart {
  place-content: start;
}

.u-placeContentEnd {
  place-content: end;
}

.u-placeContentBetween {
  place-content: space-between;
}

.u-placeContentAround {
  place-content: space-around;
}

.u-placeContentEvenly {
  place-content: space-evenly;
}

.u-placeContentStretch {
  place-content: stretch;
}

.u-placeItemsStart {
  place-items: start;
}

.u-placeItemsEnd {
  place-items: end;
}

.u-placeItemsCenter {
  place-items: center;
}

.u-placeItemsStretch {
  place-items: stretch;
}

.u-placeSelfAuto {
  place-self: auto;
}

.u-placeSelfStart {
  place-self: start;
}

.u-placeSelfEnd {
  place-self: end;
}

.u-placeSelfCenter {
  place-self: center;
}

.u-placeSelfStretch {
  place-self: stretch;
}

.u-flexOrderFirst {
  order: -1;
}

.u-flexOrderLast {
  order: 1;
}

.u-flexOrderNone {
  order: 0;
}

.u-flexBasisNone {
  flex-basis: 0;
}

.u-flexBasisAuto {
  flex-basis: auto;
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @if $infix != '' {
      .#{$infix}\:u-flexRow {
        flex-direction: row;
      }

      .#{$infix}\:u-flexColumn {
        flex-direction: column;
      }

      .#{$infix}\:u-flexRowReverse {
        flex-direction: row-reverse;
      }

      .#{$infix}\:u-flexColumnReverse {
        flex-direction: column-reverse;
      }

      .#{$infix}\:u-flex1 {
        flex: 1 1 0%;
      }

      .#{$infix}\:u-flexFill {
        flex: 1 1 auto;
      }

      .#{$infix}\:u-flexNone {
        flex: none;
      }

      .#{$infix}\:u-flexGrow0 {
        flex-grow: 0;
      }

      .#{$infix}\:u-flexGrow1 {
        flex-grow: 1;
      }

      .#{$infix}\:u-flexShrink0 {
        flex-shrink: 0;
      }

      .#{$infix}\:u-flexShrink1 {
        flex-shrink: 1;
      }

      .#{$infix}\:u-flexWrap {
        flex-wrap: wrap;
      }

      .#{$infix}\:u-flexNowrap {
        flex-wrap: nowrap;
      }

      .#{$infix}\:u-flexWrapReverse {
        flex-wrap: wrap-reverse;
      }

      .#{$infix}\:u-alignContentStart {
        align-content: flex-start;
      }

      .#{$infix}\:u-alignContentEnd {
        align-content: flex-end;
      }

      .#{$infix}\:u-alignContentCenter {
        align-content: center;
      }

      .#{$infix}\:u-alignContentBetween {
        align-content: space-between;
      }

      .#{$infix}\:u-alignContentAround {
        align-content: space-around;
      }

      .#{$infix}\:u-alignContentStretch {
        align-content: stretch;
      }

      .#{$infix}\:u-alignItemsStart {
        align-items: flex-start;
      }

      .#{$infix}\:u-alignItemsEnd {
        align-items: flex-end;
      }

      .#{$infix}\:u-alignItemsCenter {
        align-items: center;
      }

      .#{$infix}\:u-alignItemsBaseline {
        align-items: baseline;
      }

      .#{$infix}\:u-alignItemsStretch {
        align-items: stretch;
      }

      .#{$infix}\:u-alignSelfAuto {
        align-self: auto;
      }

      .#{$infix}\:u-alignSelfStart {
        align-self: flex-start;
      }

      .#{$infix}\:u-alignSelfEnd {
        align-self: flex-end;
      }

      .#{$infix}\:u-alignSelfCenter {
        align-self: center;
      }

      .#{$infix}\:u-alignSelfBaseline {
        align-self: baseline;
      }

      .#{$infix}\:u-alignSelfStretch {
        align-self: stretch;
      }

      .#{$infix}\:u-justifyContentStart {
        justify-content: flex-start;
      }

      .#{$infix}\:u-justifyContentEnd {
        justify-content: flex-end;
      }

      .#{$infix}\:u-justifyContentCenter {
        justify-content: center;
      }

      .#{$infix}\:u-justifyContentBetween {
        justify-content: space-between;
      }

      .#{$infix}\:u-justifyContentAround {
        justify-content: space-around;
      }

      .#{$infix}\:u-justifySelfAuto {
        justify-self: auto;
      }

      .#{$infix}\:u-justifySelfStart {
        justify-self: flex-start;
      }

      .#{$infix}\:u-justifySelfEnd {
        justify-self: flex-end;
      }

      .#{$infix}\:u-justifySelfBetween {
        justify-self: space-between;
      }

      .#{$infix}\:u-justifySelfCenter {
        justify-self: center;
      }

      .#{$infix}\:u-justifySelfStretch {
        justify-self: stretch;
      }

      .#{$infix}\:u-justifyItemsStart {
        justify-items: flex-start;
      }

      .#{$infix}\:u-justifyItemsEnd {
        justify-items: flex-end;
      }

      .#{$infix}\:u-justifyItemsCenter {
        justify-items: center;
      }

      .#{$infix}\:u-justifyItemsStretch {
        justify-items: stretch;
      }

      .#{$infix}\:u-placeContentCenter {
        place-content: center;
      }

      .#{$infix}\:u-placeContentStart {
        place-content: start;
      }

      .#{$infix}\:u-placeContentEnd {
        place-content: end;
      }

      .#{$infix}\:u-placeContentBetween {
        place-content: space-between;
      }

      .#{$infix}\:u-placeContentAround {
        place-content: space-around;
      }

      .#{$infix}\:u-placeContentEvenly {
        place-content: space-evenly;
      }

      .#{$infix}\:u-placeContentStretch {
        place-content: stretch;
      }

      .#{$infix}\:u-placeItemsStart {
        place-items: start;
      }

      .#{$infix}\:u-placeItemsEnd {
        place-items: end;
      }

      .#{$infix}\:u-placeItemsCenter {
        place-items: center;
      }

      .#{$infix}\:u-placeItemsStretch {
        place-items: stretch;
      }

      .#{$infix}\:u-placeSelfAuto {
        place-self: auto;
      }

      .#{$infix}\:u-placeSelfStart {
        place-self: start;
      }

      .#{$infix}\:u-placeSelfEnd {
        place-self: end;
      }

      .#{$infix}\:u-placeSelfCenter {
        place-self: center;
      }

      .#{$infix}\:u-placeSelfStretch {
        place-self: stretch;
      }

      .#{$infix}\:u-flexOrderFirst {
        order: -1;
      }

      .#{$infix}\:u-flexOrderLast {
        order: 1;
      }

      .#{$infix}\:u-flexOrderNone {
        order: 0;
      }

      .#{$infix}\:u-flexBasisNone {
        flex-basis: 0;
      }

      .#{$infix}\:u-flexBasisAuto {
        flex-basis: auto;
      }
    }
  }
}