@use "sass:math";
@use "sass:meta";
@use "sass:list";
@use "../lib/function";
@use "../lib/mixin";
@use "../settings";

/*
Margin

The margin module.

Weight: -96

Style guide: #{settings.$util-prefix}.margin
*/

/*
Modifiers

The margin modifiers.
+ The direction can be specified like as `#{settings.$util-prefix}--margin-top-50`. (Direction: `#{meta.inspect(settings.$util-directions)}`)
+ The breakpoint prefixes can be specified like as `sm:#{settings.$util-prefix}--margin-50`.

Weight: -100

Markup: <div class="margin-example {{modifier_class}}"></div>
<style>
  :where(.margin-example) {
    position: relative;
    width: 50px;
    height: 50px;
    background: #999;
  }
</style>

#{settings.$util-prefix}--margin-0 - All 0px margin.
#{settings.$util-prefix}--margin-_50 - All -50px margin.
#{settings.$util-prefix}--margin-50 - All 50px margin.
#{settings.$util-prefix}--margin-normal - All normal margin.

Style guide: #{settings.$util-prefix}.margin.builtin
*/
.#{settings.$util-prefix}--margin {
  $margins: list.join(settings.$util-margin, ("auto"));
  $directions: settings.$util-directions;

  @each $margin in $margins {
    $name: "";

    // stylelint-disable scss/no-duplicate-dollar-variables
    @if meta.type-of($margin) == "list" {
      $name: list.nth($margin, 1);
      $margin: list.nth($margin, 2);
    } @else if $margin == "auto" {
      $name: $margin;
    } @else {
      $name: function.math-remove-unit($margin);

      @if $margin < 0 {
        $name: "_#{math.abs($name)}";
      }
    }
    // stylelint-enable scss/no-duplicate-dollar-variables

    @each $direction in $directions {
      $direction: if($direction == "", $direction, "-#{$direction}");

      &#{$direction}-#{$name} {
        @include mixin.by-breakpoints() {
          --margin#{$direction}: #{$margin};

          margin#{$direction}: var(--margin#{$direction});
        }
      }
    }
  }
}