// stylelint-disable declaration-no-important

// Flex variation
//
// Custom styles for additional flex alignment options.

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

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

    .#{$infix}flex-wrap         { flex-wrap: wrap !important; }
    .#{$infix}flex-nowrap       { flex-wrap: nowrap !important; }
    .#{$infix}flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
    .#{$infix}flex-fill         { flex: 1 1 auto !important; }
    .#{$infix}flex-grow-0       { flex-grow: 0 !important; }
    .#{$infix}flex-grow-1       { flex-grow: 1 !important; }
    .#{$infix}flex-shrink-0     { flex-shrink: 0 !important; }
    .#{$infix}flex-shrink-1     { flex-shrink: 1 !important; }

    @each $prop, $abbrev in (flex-basis: flex-basis) {
      @each $size, $length in $flex-basis-sizes {
        .#{$infix}#{$abbrev}-#{$size} {
          #{$prop}: $length !important;
        }
      }
    }


    .#{$infix}flex-justify-content-start,
    .d-flex.#{$infix}justify-content-start,
    .#{$infix}d-flex.justify-content-start           { justify-content: flex-start !important; }

    .#{$infix}flex-justify-content-end,
    .d-flex.#{$infix}justify-content-end,
    .#{$infix}d-flex.justify-content-end             { justify-content: flex-end !important; }

    .#{$infix}flex-justify-content-center,
    .d-flex.#{$infix}justify-content-center,
    .#{$infix}d-flex.justify-content-center          { justify-content: center !important; }

    .#{$infix}flex-justify-content-between,
    .d-flex.#{$infix}justify-content-between,
    .#{$infix}d-flex.justify-content-between         { justify-content: space-between !important; }

    .#{$infix}-flex-justify-content-around, 
    .d-flex.#{$infix}flex-justify-content-around,
    .#{$infix}d-flex.flex-justify-content-around     { justify-content: space-around !important; }


    .#{$infix}flex-align-items-start,
    .d-flex.#{$infix}align-items-start,
    .#{$infix}d-flex.align-items-start               { align-items: flex-start !important; }

    .#{$infix}flex-align-items-end,
    .d-flex.#{$infix}align-items-end,
    .#{$infix}d-flex.align-items-end                 { align-items: flex-end !important; }

    .#{$infix}flex-align-items-center,
    .d-flex.#{$infix}align-items-center,
    .#{$infix}d-flex.align-items-center              { align-items: center !important; }

    .#{$infix}flex-align-items-baseline,
    .d-flex.#{$infix}align-items-baseline,
    .#{$infix}d-flex.align-items-baseline            { align-items: baseline !important; }

    .#{$infix}flex-align-items-stretch,
    .d-flex.#{$infix}align-items-stretch,
    .#{$infix}d-flex.align-items-stretch             { align-items: stretch !important; }



    .#{$infix}flex-align-content-start,
    .d-flex.#{$infix}align-content-start,  
    .#{$infix}d-flex.align-content-start             { align-content: flex-start !important; }

    .#{$infix}flex-align-content-end,
    .d-flex.#{$infix}align-content-end,    
    .#{$infix}d-flex.align-content-end               { align-content: flex-end !important; }

    .#{$infix}flex-align-content-center,
    .d-flex.#{$infix}align-content-center
    .#{$infix}d-flex.align-content-center            { align-content: center !important; }

    .#{$infix}flex-align-content-between,
    .d-flex.#{$infix}align-content-between,
    .#{$infix}d-flex.align-content-between           { align-content: space-between !important; }

    .#{$infix}flex-align-content-around,
    .d-flex.#{$infix}align-content-around, 
    .#{$infix}d-flex.align-content-around            { align-content: space-around !important; }

    .#{$infix}flex-align-content-stretch,
    .d-flex.#{$infix}align-content-stretch,
    .#{$infix}d-flex.align-content-stretch           { align-content: stretch !important; }


    .#{$infix}flex-align-self-auto,
    .d-flex.#{$infix}align-self-auto,
    .#{$infix}d-flex.align-self-auto                 { align-self: auto !important; }

    .#{$infix}flex-align-self-start,
    .d-flex.#{$infix}align-self-start,
    .#{$infix}d-flex.align-self-start                { align-self: flex-start !important; }

    .#{$infix}flex-align-self-end,
    .d-flex.#{$infix}align-self-end, 
    .#{$infix}d-flex.align-self-end                  { align-self: flex-end !important; }

    .#{$infix}flex-align-self-center,
    .d-flex.#{$infix}align-self-center,
    .#{$infix}d-flex.align-self-center               { align-self: center !important; }

    .#{$infix}flex-align-self-baseline,
    .d-flex.#{$infix}align-self-baseline,
    .#{$infix}d-flex.align-self-baseline             { align-self: baseline !important; }

    .#{$infix}flex-align-self-stretch,
    .d-flex.#{$infix}align-self-stretch,
    .#{$infix}d-flex.align-self-stretch              { align-self: stretch !important; }
  }
}