@use "sass:map";
// flex alignments
$align-values: (
  normal: normal,
  stretch: stretch,
  center: center,
  start: flex-start, 
  end: flex-end, 
  baseline: baseline, 
);
$justify-values: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around
);

// align-items
@each $device, $width in $breakpoints {
  @include min-query($device) {
    @each $name, $value in $align-values {
      @if $device == mobile {
        .align-items-#{$name} {
          align-items: $value !important;
        }
      } @else {
        .align-items-#{$name}-#{$device} {
          align-items: $value !important;
        }
      }
    }
  }
}

// justify-content
@each $device, $width in $breakpoints {
  @include min-query($device) {
    @each $name, $value in $justify-values {
      @if $device == mobile {
        .justify-content-#{$name} {
          justify-content: $value !important;
        }
      } @else {
        .justify-content-#{$name}-#{$device} {
          justify-content: $value !important;
        }
      }
    }
  }
}