@use "../../base/space" as sp;
@use "../../base/mixins/meta-class" as mc;

$_directions: (
  "": "",
  "top-": "top",
  "right-": "right",
  "bottom-": "bottom",
  "left-": "left",
);

@each $key, $value in sp.$spacers {
  @each $dir-name, $dir-prop in $_directions {
    @if $dir-prop == "" {
      @include mc.meta("qo-margin-#{$dir-name}#{$key}", (margin: $value));
    } @else {
      @include mc.meta("qo-margin-#{$dir-name}#{$key}", (margin-#{$dir-prop}: $value));
    }
  }

  @include mc.meta("qo-margin-x-#{$key}", (margin-left: $value, margin-right: $value));
  @include mc.meta("qo-margin-y-#{$key}", (margin-top: $value, margin-bottom: $value));
}

// Auto margins
@include mc.meta("qo-margin-auto", (margin: auto));
@include mc.meta("qo-margin-x-auto", (margin-left: auto, margin-right: auto));
@include mc.meta("qo-margin-y-auto", (margin-top: auto, margin-bottom: auto));
@include mc.meta("qo-margin-top-auto", (margin-top: auto));
@include mc.meta("qo-margin-bottom-auto", (margin-bottom: auto));
@include mc.meta("qo-margin-left-auto", (margin-left: auto));
@include mc.meta("qo-margin-right-auto", (margin-right: auto));

// @deprecated — typo aliases kept for backwards compatibility
.qo-margin-botttom-sm { margin-bottom: sp.$space-sm; }
.qo-margin-botttom-md { margin-bottom: sp.$space-md; }
.qo-margin-botttom-lg { margin-bottom: sp.$space-lg; }
.qo-margin-botttom-xl { margin-bottom: sp.$space-xl; }