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

/*
Z index

The z-index module.

Weight: -92

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

/*
Modifiers

The z-index modifiers.
+ The breakpoint prefixes can be specified like as `sm:#{settings.$util-prefix}--z-index-50`.

Weight: -100

Markup: <div class="z-index-example-wrapper">
  <div class="z-index-example-1">1</div>
  <div class="z-index-example {{modifier_class}}"></div>
  <div class="z-index-example-49">49</div>
</div>
<style>
  :where(.z-index-example-wrapper) {
    position: relative;
    width: 75px;
    height: 75px;
  }
  :where(.z-index-example) {
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 50px;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    background: #999;
    z-index: 2;
  }
  :where(.z-index-example-1) {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    line-height: 50px;
    color: #fff;
    background: #ccc;
    text-align: center;
    z-index: 1;
  }
  :where(.z-index-example-49) {
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 50px;
    top: 50%;
    left: 50%;
    margin: 0;
    color: #fff;
    background: #666;
    text-align: center;
    z-index: 49;
  }
</style>

#{settings.$util-prefix}--z-index-0 - 0 z-index
#{settings.$util-prefix}--z-index-50 - 50 z-index
#{settings.$util-prefix}--z-index-normal - Normal z-index

Style guide: #{settings.$util-prefix}.z-index.builtin
*/
.#{settings.$util-prefix}--z-index {
  $z-indexes: settings.$util-z-index;

  @each $z-index in $z-indexes {
    $name: "";

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

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

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

        z-index: var(--z-index);
      }
    }
  }
}