@use "sass:map";
@use "utils";
@use "variables";

@mixin spacings($spacers, $infix: "") {
  @each $spacing, $space in $spacers {
    @each $property, $abrev in (margin: "fwe-m", padding: "fwe-p") {
      .#{$abrev}#{$infix}-#{$spacing} {
        #{$property}: $space !important;
      }

      .#{$abrev}t#{$infix}-#{$spacing} {
        #{$property}-top: $space !important;
      }

      .#{$abrev}b#{$infix}-#{$spacing} {
        #{$property}-bottom: $space !important;
      }

      .#{$abrev}l#{$infix}-#{$spacing} {
        #{$property}-left: $space !important;
      }

      .#{$abrev}r#{$infix}-#{$spacing} {
        #{$property}-right: $space !important;
      }

      .#{$abrev}x#{$infix}-#{$spacing} {
        #{$property}-right: $space !important;
        #{$property}-left: $space !important;
      }
      .#{$abrev}y#{$infix}-#{$spacing} {
        #{$property}-top: $space !important;
        #{$property}-bottom: $space !important;
      }
    }
  }
}

@each $breakpoint in map.keys(variables.$grid-breakpoints) {
  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
  $size: map.get(variables.$grid-breakpoints, $breakpoint);

  @if $size == 0 {
    @include spacings(variables.$spacers);
  } @else {
    @media (min-width: $size) {
      @include spacings(variables.$spacers, $infix);
    }
  }
}