@use "sass:map";
@use "./../variables" as *;
@use "./../mixins/breakpoints" as *;

$flex-directions: (row, column, row-reverse, column-reverse) !default;
$flex-wraps: (wrap, nowrap, wrap-reverse) !default;
$flex-justifications: (flex-start, flex-end, center, space-between, space-around, space-evenly) !default;
$flex-item-alignments: (auto, flex-start, flex-end, center, baseline, stretch) !default;
$flex-content-alignments: (flex-start, flex-end, center, space-between, space-around, stretch) !default;

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

    @each $value in $flex-directions {
      .flex-direction-#{$infix}-#{$value} {
        flex-direction: #{$value} !important;
      }
    }

    @each $value in $flex-wraps {
      .flex-wrap-#{$infix}-#{$value} {
        flex-wrap: #{$value} !important;
      }
    }

    @each $value in $flex-justifications {
      .justify-content-#{$infix}-#{$value} {
        justify-content: #{$value} !important;
      }
    }

    @each $value in $flex-item-alignments {
      .align-items-#{$infix}-#{$value} {
        align-items: #{$value} !important;
      }
    }

    @each $value in $flex-content-alignments {
      .align-content-#{$infix}-#{$value} {
        align-content: #{$value} !important;
      }
    }

    @each $value in $flex-content-alignments {
      .align-self-#{$infix}-#{$value} {
        align-self: #{$value} !important;
      }
    }

    @for $value from 0 through 1 {
      .flex-grow-#{$infix}-#{$value} {
        flex-grow: #{$value} !important;
      }

      .flex-shrink-#{$infix}-#{$value} {
        flex-shrink: #{$value} !important;
      }
    }

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