@use "scss/variables";

$marginDirectionMap: (
  "m": "margin",
  "mx": "margin-inline",
  "my": "margin-block",
  "mt": "margin-block-start",
  "mr": "margin-inline-end",
  "mb": "margin-block-end",
  "ml": "margin-inline-start",
);

$paddingDirectionMap: (
  "p": "padding",
  "px": "padding-inline",
  "py": "padding-block",
  "pt": "padding-block-start",
  "pr": "padding-inline-end",
  "pb": "padding-block-end",
  "pl": "padding-inline-start",
);

$sizeMap: (
  "none": 0,
  "xs": variables.$spacing-xs,
  "sm": variables.$spacing-sm,
  "md": variables.$spacing-md,
  "lg": variables.$spacing-lg,
  "xl": variables.$spacing-xl,
  "2xl": variables.$spacing-2xl,
);

.box {
  display: block;

  @each $marginKey, $marginValue in $marginDirectionMap {
    @each $sizeKey, $sizeVariable in $sizeMap {
      &--#{$marginKey}-#{$sizeKey} {
        #{$marginValue}: $sizeVariable;
      }
    }
  }
  @each $paddingKey, $paddingValue in $paddingDirectionMap {
    @each $sizeKey, $sizeVariable in $sizeMap {
      &--#{$paddingKey}-#{$sizeKey} {
        #{$paddingValue}: $sizeVariable;
      }
    }
  }
}
