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

/*
Width

The width module.

Weight: -98

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

/*
Modifiers

The width modifiers.
+ You can specify `min` or `max` option like as `#{settings.$util-prefix}--width-max-1000`.
+ The breakpoint prefixes can be specified like as `#{settings.$util-prefix}--width-1000`.

Weight: -100

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

#{settings.$util-prefix}--width-0 - 0px width.
#{settings.$util-prefix}--width-1000 - 1000px width.
#{settings.$util-prefix}--width-normal - Normal width.
#{settings.$util-prefix}--width-fit - 100% width.
#{settings.$util-prefix}--width-auto - Auto width.
#{settings.$util-prefix}--width-min-none - None min width.
#{settings.$util-prefix}--width-max-none - None max width.

Style guide: #{settings.$util-prefix}.width.builtin
*/
.#{settings.$util-prefix}--width {
  $widths: list.join(settings.$util-width, ("fit", "auto", "none"));

  @each $width in $widths {
    $minmax: ("", "min-", "max-");
    $name: "";

    // stylelint-disable scss/no-duplicate-dollar-variables
    @if meta.type-of($width) == "list" {
      $name: list.nth($width, 1);
      $width: list.nth($width, 2);
    } @else if $width == "fit" {
      $name: $width;
      $width: 100%;
    } @else if $width == "auto" {
      $minmax: ("");
      $name: $width;
    } @else if $width == "none" {
      $minmax: ("min-", "max-");
      $name: $width;
    } @else {
      $name: function.math-remove-unit($width);
    }
    // stylelint-enable scss/no-duplicate-dollar-variables

    @each $pfx in $minmax {
      &-#{$pfx}#{$name} {
        @include mixin.by-breakpoints() {
          --#{$pfx}width: #{$width};

          #{$pfx}width: var(--#{$pfx}width);
        }
      }
    }
  }
}