@use "sass:math";
@use "../globals/" as *;
@use "breakpoints" as *;

//using map from breakpoint.scss
@each $breakName, $breakValue in $breakpoints-up {
  //padding margins classes
  $spacings: (0, 1, 2, 3, 4, 5, auto);

  $sides: (
    "t": "top",
    "b": "bottom",
    "l": "left",
    "r": "right",
    "": (
      "top",
      "left",
      "bottom",
      "right",
    ),
    "x": (
      "left",
      "right",
    ),
    "y": (
      "top",
      "bottom",
    ),
  );

  @each $space in $spacings {
    @each $prefix, $positions in $sides {
      @if $breakName != "" {
        $prefix: #{$prefix}-#{$breakName};
      } @else {
        $prefix: #{$prefix};
      }

      @if $breakName != "" {
        @media (min-width: $breakValue) {
          .p#{$prefix}-#{$space} {
            @each $pos in $positions {
              padding-#{$pos}: if(
                $space == auto,
                $space,
                #{$space * $base-spacing}rem
              ) !important;
            }
          }
          .m#{$prefix}-#{$space} {
            @each $pos in $positions {
              margin-#{$pos}: if(
                $space == auto,
                $space,
                #{$space * $base-spacing}rem
              ) !important;
            }
          }
          .b#{$prefix}-#{$space} {
            @each $pos in $positions {
              border-#{$pos}: if(
                $space == auto,
                $space,
                #{$space}px solid var(--border-core)
              );
            }
          }
        }
      } @else {
        .p#{$prefix}-#{$space} {
          @each $pos in $positions {
            padding-#{$pos}: if(
              $space == auto,
              $space,
              #{$space * $base-spacing}rem
            ) !important;
          }
        }
        .m#{$prefix}-#{$space} {
          @each $pos in $positions {
            margin-#{$pos}: if(
              $space == auto,
              $space,
              #{$space * $base-spacing}rem
            ) !important;
          }
        }
        .b#{$prefix}-#{$space} {
          @each $pos in $positions {
            border-#{$pos}: if(
              $space == auto,
              $space,
              #{$space}px solid var(--border-core)
            );
          }
        }
      }
    }
  }

  //border-radius classes
  $spacings: (0, 1, 2, 3, 4, 5);

  @each $space in $spacings {
    @if $breakName != "" {
      @media (min-width: $breakValue) {
        .b-r-#{$breakName}-#{$space} {
          border-radius: #{$space * $base-spacing}rem !important;
        }
      }
    } @else {
      .b-r-#{$space} {
        border-radius: #{$space * $base-spacing}rem !important;
      }
    }
  }

  //border-radius-circle
  @if $breakName != "" {
    @media (min-width: $breakValue) {
      .b-r-#{$breakName}-circle {
        border-radius: 50% !important;
      }
    }
  } @else {
    .b-r-circle {
      border-radius: 50% !important;
    }
    .b-r-pill {
      border-radius: 9999px !important;
    }
  }

  //gap classes
  $spacings: (0, 1, 2, 3, 4, 5);

  @each $space in $spacings {
    @if $breakName != "" {
      @media (min-width: $breakValue) {
        .gap-#{$breakName}-#{$space} {
          gap: #{$space * $base-spacing}rem !important;
        }
        .gap-x-#{$breakName}-#{$space} {
          column-gap: #{$space * $base-spacing}rem !important;
        }
        .gap-y-#{$breakName}-#{$space} {
          row-gap: #{$space * $base-spacing}rem !important;
        }
      }
    } @else {
      .gap-#{$space} {
        gap: #{$space * $base-spacing}rem !important;
      }
      .gap-x-#{$space} {
        column-gap: #{$space * $base-spacing}rem !important;
      }
      .gap-y-#{$space} {
        row-gap: #{$space * $base-spacing}rem !important;
      }
    }
  }


  //Position classes
  $positionProps: (
    "absolute",
    "fixed",
    "inherit",
    "initial",
    "relative",
    "revert",
    "static",
    "sticky",
    "unset",
  );

  @each $pos in $positionProps {
    @if $breakName != "" {
      @media (min-width: $breakValue) {
        .position-#{$breakName}-#{$pos} {
          position: #{$pos} !important;
        }
      }
    } @else {
      .position-#{$pos} {
        position: #{$pos} !important;
      }
    }
  }


  //Display classes
  $displayProps: (
    "block",
    "inline-block",
    "inline",
    "flex",
    "grid",
    "inline-flex",
    "inline-grid",
    "table",
    "inline-table",
    "list-item",
    "none",
    "contents"
  );

  @each $disp in $displayProps {
    @if $breakName != "" {
      @media (min-width: $breakValue) {
        .d-#{$breakName}-#{$disp} {
          display: #{$disp} !important;
        }
      }
    } @else {
      .d-#{$disp} {
        display: #{$disp} !important;
      }
    }
  }

  //Align & Justify classes
  $alignments: (
    "center",
    "space-between",
    "space-around",
    "space-evenly",
    "flex-start",
    "flex-end"
  );

  @each $align in $alignments {
    @if $breakName != "" {
      @media (min-width: $breakValue) {
        .justify-#{$breakName}-#{$align} {
          justify-content: #{$align};
        }

        .items-#{$breakName}-#{$align} {
          align-items: #{$align};
        }

        .justify-items-#{$breakName}-#{$align} {
          justify-items: #{$align};
        }

        .content-#{$breakName}-#{$align} {
          align-content: #{$align};
        }
      }
    } @else {
      .justify-#{$align} {
        justify-content: #{$align};
      }

      .items-#{$align} {
        align-items: #{$align};
      }

      .justify-items-#{$align} {
        justify-items: #{$align};
      }

      .content-#{$align} {
        align-content: #{$align};
      }
    }
  }

  //Text Align classes
  $textAlignments: ("left", "right", "center", "justify");

  @each $textAlign in $textAlignments {
    @if $breakName != "" {
      @media (min-width: $breakValue) {
        .text-#{$breakName}-#{$textAlign} {
          text-align: #{$textAlign} !important;
        }
      }
    } @else {
      .text-#{$textAlign} {
        text-align: #{$textAlign} !important;
      }
    }
  }

  //Opacity classes
  $opacities: ("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10");

  @each $opacity in $opacities {
    @if $breakName != "" {
      @media (min-width: $breakValue) {
        .o-#{$breakName}-#{$opacity} {
          opacity: calc(#{$opacity} / 10);
        }
      }
    } @else {
      .o-#{$opacity} {
        opacity: calc(#{$opacity} / 10);
      }
    }
  }
} //end breakpoints

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