@use "../abstract/mixins" as *;

$spacing-properties: (
  "m": margin,
  "mt": margin-top,
  "mr": margin-right,
  "mb": margin-bottom,
  "ml": margin-left,
  "mx": margin-inline,
  "my": margin-block,
  "p": padding,
  "pt": padding-top,
  "pr": padding-right,
  "pb": padding-bottom,
  "pl": padding-left,
  "px": padding-inline,
  "py": padding-block,
);
$spacing-scale: (
  "0": var(--pz-space-0),
  "4": var(--pz-space-4),
  "8": var(--pz-space-8),
  "16": var(--pz-space-16),
  "20": var(--pz-space-20),
  "24": var(--pz-space-24),
  "32": var(--pz-space-32),
  "40": var(--pz-space-40),
  "44": var(--pz-space-44),
  "60": var(--pz-space-60),
);

@mixin emit-spacing-classes($prefix: "") {
  @each $utility, $property in $spacing-properties {
    @each $token, $value in $spacing-scale {
      .pz-#{$utility}-#{$prefix}#{$token} {
        #{$property}: $value !important;
      }
    }
  }
}

@include emit-spacing-classes;

.pz-m-auto {
  margin: auto !important;
}

.pz-mx-auto {
  margin-inline: auto !important;
}

.pz-my-auto {
  margin-block: auto !important;
}

.pz-ml-auto {
  margin-left: auto !important;
}

.pz-mr-auto {
  margin-right: auto !important;
}

@include min-media-devices("sm") {
  @include emit-spacing-classes("sm-");
}

@include min-media-devices("md") {
  @include emit-spacing-classes("md-");
}

@include min-media-devices("lg") {
  @include emit-spacing-classes("lg-");
}

@include min-media-devices("xl") {
  @include emit-spacing-classes("xl-");
}

@include min-media-devices("xxl") {
  @include emit-spacing-classes("xxl-");
}
