@import "../settings/variables";

// SPACING UTILITIES

// permute-attributes-and-values
// Permutation of .#{Attribute}#{ClassSuffix}#{ClassSuffix} {
//Map({Attribute}{AttributeSuffix}: CSSValue)
@mixin permute-attributes-and-values($property, $attributeMap, $valueMap) {
  @each $attributeKey, $attributes in $attributeMap {
    @each $valueKey, $value in $valueMap {
      .#{$property}#{$attributeKey}#{$valueKey} {
        @each $attribute in $attributes {
          #{$property}#{$attribute}: $value;
        }
      }
    }
  }
}

// Map (ClassSuffix: List(AttributeSuffix))
$orientations: (
  "": (
    "",
  ),
  "-x": (
    "-left",
    "-right",
  ),
  "-y": (
    "-top",
    "-bottom",
  ),
  "-t": (
    "-top",
  ),
  "-r": (
    "-right",
  ),
  "-b": (
    "-bottom",
  ),
  "-l": (
    "-left",
  ),
);

// List(Attribute)
$properties: ("margin", "padding");

// Map (ClassSuffix: CSSValue)
$sizes: (
  "-none": 0px,
  "-auto": auto,
  "-xs": spacing(xs),
  "-sm": spacing(sm),
  "-md": spacing(md),
  "-lg": spacing(lg),
  "-xl": spacing(xl),
  "-xxl": spacing(xxl),
);

@include permute-attributes-and-values("margin", $orientations, $sizes);
@include permute-attributes-and-values(
  "padding",
  $orientations,
  map-remove($sizes, "-auto")
);

.flex-align-self-center {
  align-self: center;
}
.flex-align-self-stretch {
  align-self: stretch;
}
.flex-align-self-baseline {
  align-self: baseline;
}
.flex-align-self-flex-end {
  align-self: flex-end;
}
.flex-align-self-flex-start {
  align-self: flex-start;
}
.flex-align-self-normal {
  align-self: normal;
}