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

$spacers-light: (
  0: variables.$spacer-0,
  xxxs: variables.$spacer-xxxs,
  xxs: variables.$spacer-xxs,
  xs: variables.$spacer-xs,
  s: variables.$spacer-s,
  m: variables.$spacer-m,
  l: variables.$spacer-l,
  xl: variables.$spacer-xl,
  xxl: variables.$spacer-xxl
) !default;

@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;
      }
    }
  }
}

@include spacings($spacers-light);