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

/*
Type

The type module.

Weight: -99

Style guide: #{settings.$prefix}-icon.type
*/

@if meta.type-of(settings.$builtin-themes) == "map" {
  /*
Modifiers

The inline modifiers.

Weight: -100

Markup: <span class="#{settings.$prefix}-icon  {{modifier_class}}"></span>

#{settings.$prefix}-icon--type-arrow-normal - Normal type

Style guide: #{settings.$prefix}-icon.type.builtin
*/
  .#{settings.$prefix}-icon--type {
    $pkg: settings.$pkg;

    &-arrow {
      &-normal {
        $default-theme: map.get(settings.$builtin-themes, "light");
        $this: #{&};

        // Load colors
        --color-up: rgb(
          var(--#{$pkg}-color-#{map.get($default-theme, "color")})
        );
        --color-focus: rgb(
          var(--#{$pkg}-color-#{map.get($default-theme, "color-focus")})
        );

        // Default settings
        --width: 18px;
        --height: 12px;
        --color: var(--color-up);
        --icon-content: "";
        --icon-position: absolute;
        --icon-inset: 0 auto auto 0;
        --icon-transform-origin: 0 0;
        --icon-transform: none;
        --icon-display: block;
        --icon-width: 18px;
        --icon-height: 12px;
        --icon-color: var(--color);
        --icon-clip-path: path(
          "M9.003,11.593 L0.093,2.683 L2.319,0.458 L9.018,7.157 L15.702,0.472 L17.909,2.679 L9.003,11.593 Z"
        );

        &::after {
          content: var(--icon-content);

          position: var(--icon-position);
          inset: var(--icon-inset);
          transform-origin: var(--icon-transform-origin);
          transform: var(--icon-transform);

          display: var(--icon-display);

          width: var(--icon-width);
          height: var(--icon-height);

          background-color: var(--icon-color);
          clip-path: var(--icon-clip-path);
        }

        @include mixin.on-focus(
          $capturing-selectors: (
            "a[href]",
            "button"
          )
        ) {
          --color: var(--color-focus);
        }

        // Settings by color schemes
        @each $name, $theme in settings.$builtin-themes {
          @media (prefers-color-scheme: #{$name}) {
            $color-up: map.get($theme, "color");
            $color-focus: map.get($theme, "color-focus");

            // Apply colors to settings
            --color-up: rgb(var(--#{$pkg}-color-#{$color-up}));
            --color-focus: rgb(var(--#{$pkg}-color-#{$color-focus}));
          }
        }
      }
    }
  }
}