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

/*
Height

The height module.

Weight: -97

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

/*
Modifiers

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

Weight: -100

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

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

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

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

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

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

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