@use "sass:list";
@use "sass:map";
@use "../utils";
@use "../variables";

$basic-keywords: normal, stretch, center, start, end, flex-start, flex-end;
$baseline-keywords: baseline, first baseline, last baseline, safe center, unsafe center;
$positional-keywords: left, right;
$content-keywords: space-between, space-around, space-evenly;
$justify-keywords: auto, self-start, self-end;
$legacy-keywords: legacy right, legacy left, legacy center;
$flex-properties: (
  auto: (
    flex,
    auto
  ),
  grow-0: (
    flex-grow,
    0
  ),
  grow-1: (
    flex-grow,
    1
  ),
  grow-2: (
    flex-grow,
    2
  ),
  grow-3: (
    flex-grow,
    3
  ),
  shrink-0: (
    flex-shrink,
    0
  ),
  shrink-1: (
    flex-shrink,
    1
  ),
  shrink-2: (
    flex-shrink,
    2
  ),
  shrink-3: (
    flex-shrink,
    3
  ),
  basis-0: (
    flex-basis,
    0
  ),
  basis-auto: (
    flex-basis,
    auto
  ),
  basis-fill: (
    flex-basis,
    fill
  ),
  basis-max-content: (
    flex-basis,
    max-content
  ),
  basis-min-content: (
    flex-basis,
    min-content
  ),
  basis-fit-content: (
    flex-basis,
    fit-content
  ),
  basis-content: (
    flex-basis,
    content
  ),
  wrap: (
    flex-wrap,
    wrap
  ),
  wrap-reverse: (
    flex-wrap,
    wrap-reverse
  ),
  nowrap: (
    flex-wrap,
    nowrap
  ),
  row-nowrap: (
    flex-flow,
    row nowrap
  ),
  column-wrap: (
    flex-flow,
    column wrap
  ),
  column-reverse-wrap-reverse: (
    flex-flow,
    column-reverse wrap-reverse
  ),
  row: (
    flex-direction,
    row
  ),
  row-reverse: (
    flex-direction,
    row-reverse
  ),
  column: (
    flex-direction,
    column
  ),
  column-reverse: (
    flex-direction,
    column-reverse
  )
) !default;

@mixin flex-helpers($infix: "") {
  .fwe-ml#{$infix}-auto {
    margin-left: auto !important;
  }

  .fwe-mr#{$infix}-auto {
    margin-right: auto !important;
  }

  .fwe-mt#{$infix}-auto {
    margin-top: auto !important;
  }

  .fwe-mb#{$infix}-auto {
    margin-bottom: auto !important;
  }

  .fwe-order#{$infix}-first {
    order: -1;
  }

  .fwe-order#{$infix}-last {
    order: 6;
  }

  .fwe-order#{$infix}-1 {
    order: 1;
  }

  .fwe-order#{$infix}-2 {
    order: 2;
  }

  .fwe-order#{$infix}-3 {
    order: 3;
  }

  .fwe-order#{$infix}-4 {
    order: 4;
  }

  .fwe-order#{$infix}-5 {
    order: 5;
  }

  @each $classname, $properties in $flex-properties {
    $property: list.nth($properties, 1);
    $value: list.nth($properties, 2);

    .fwe-flex#{$infix}-#{$classname} {
      #{$property}: $value !important;
    }
  }

  @each $property in $basic-keywords {
    .fwe-align-items#{$infix}-#{$property} {
      align-items: $property !important;
    }

    .fwe-align-self#{$infix}-#{$property} {
      align-self: $property !important;
    }

    .fwe-align-content#{$infix}-#{$property} {
      align-content: $property !important;
    }

    .fwe-justify-items#{$infix}-#{$property} {
      justify-items: $property !important;
    }

    .fwe-justify-self#{$infix}-#{$property} {
      justify-self: $property !important;
    }

    .fwe-justify-content#{$infix}-#{$property} {
      justify-content: $property !important;
    }
  }

  @each $property in $baseline-keywords {
    .fwe-align-items#{$infix}-#{$property} {
      align-items: $property !important;
    }

    .fwe-align-self#{$infix}-#{$property} {
      align-self: $property !important;
    }

    .fwe-align-content#{$infix}-#{$property} {
      align-content: $property !important;
    }

    .fwe-justify-items#{$infix}-#{$property} {
      justify-items: $property !important;
    }

    .fwe-justify-self#{$infix}-#{$property} {
      justify-self: $property !important;
    }
  }

  @each $property in $positional-keywords {
    .fwe-justify-items#{$infix}-#{$property} {
      justify-items: $property !important;
    }

    .fwe-justify-self#{$infix}-#{$property} {
      justify-self: $property !important;
    }
  }

  @each $property in $content-keywords {
    .fwe-align-content#{$infix}-#{$property} {
      align-content: $property !important;
    }

    .fwe-justify-content#{$infix}-#{$property} {
      justify-content: $property !important;
    }
  }

  @each $property in $justify-keywords {
    .fwe-justify-items#{$infix}-#{$property} {
      justify-items: $property !important;
    }

    .fwe-justify-self#{$infix}-#{$property} {
      justify-self: $property !important;
    }
  }

  @each $property in $legacy-keywords {
    .fwe-justify-items#{$infix}-#{$property} {
      justify-items: $property !important;
    }
  }
}

@include flex-helpers();