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

/*
Border

The border module.

Weight: -94

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

/*
Modifiers

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

Weight: -100

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

#{settings.$util-prefix}--border-normal - All normal border

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

  @each $border in $borders {
    $name: "";

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

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

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

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