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

/*
Padding

The padding module.

Weight: -95

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

/*
Modifiers

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

Weight: -100

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

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

Style guide: #{settings.$util-prefix}.padding.builtin
*/
.#{settings.$util-prefix}--padding {
  $paddings: settings.$util-padding;
  $directions: settings.$util-directions;

  @each $padding in $paddings {
    $name: "";

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

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

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

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