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

/*
Position

The position module.

Weight: -93

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

/*
Modifiers

The position modifiers.
+ The direction can be specified like as `#{settings.$util-prefix}--position-top-50`. (Direction: `#{meta.inspect(settings.$util-directions)}`)
+ The breakpoint prefixes can be specified like as `sm:#{settings.$util-prefix}--position-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}--position-0 - All 0px position.
#{settings.$util-prefix}--position-_50 - All -50px position.
#{settings.$util-prefix}--position-50 - All 50px position.
#{settings.$util-prefix}--position-normal - All normal position.

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

  @each $position in $positions {
    $name: "";

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

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

    @each $direction in $directions {
      $props: ();

      // stylelint-disable scss/no-duplicate-dollar-variables
      @if $direction == "" {
        // prettier-ignore
        $props: ("inset", );
      } @else if $direction == "block" {
        $props: ("top", "bottom");
      } @else if $direction == "inline" {
        $props: ("right", "left");
      } @else {
        // prettier-ignore
        $props: ($direction, );
      }
      // stylelint-enable scss/no-duplicate-dollar-variables

      $direction: if($direction == "", $direction, "-#{$direction}");

      &#{$direction}-#{$name} {
        @include mixin.by-breakpoints() {
          @each $prop in $props {
            --#{$prop}: #{$position};

            #{$prop}: var(--#{$prop});
          }
        }
      }
    }
  }
}