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

/*
Theme

The theme module.

Weight: -99

Style guide: #{settings.$prefix}-select.theme
*/

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

The theme modifiers.

Weight: -100

Markup: <span class="#{settings.$prefix}-select  {{modifier_class}}">
  <select class="#{settings.$prefix}-select__field" name="{{modifier_class}}">
    <option value="">select...</option>
    <option value="option-1">Lorem ipsum dolor sit amet</option>
    <option value="option-2">あのイーハトーヴォのすきとおった風</option>
  </select>
</span>
<!-- disabled -->
<span class="#{settings.$prefix}-select  {{modifier_class}}">
  <select class="#{settings.$prefix}-select__field" name="{{modifier_class}}" disabled="disabled">
    <option value="">select...</option>
    <option value="option-1">Lorem ipsum dolor sit amet</option>
    <option value="option-2">あのイーハトーヴォのすきとおった風</option>
  </select>
</span>

#{settings.$prefix}-select--theme-normal - Normal theme

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

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

      // 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")})
      );
      --background-color-up: rgb(
        var(--#{$pkg}-color-#{map.get($default-theme, "background")})
      );
      --background-color-focus: rgb(
        var(--#{$pkg}-color-#{map.get($default-theme, "background-focus")})
      );
      --border-color-up: rgb(
        var(--#{$pkg}-color-#{map.get($default-theme, "border")})
      );
      --border-color-focus: rgb(
        var(--#{$pkg}-color-#{map.get($default-theme, "border-focus")})
      );

      // Default settings
      --color: var(--color-up);
      --field-padding: 10px 25px 10px 10px;
      --field-border: 1px solid var(--border-color-up);
      --field-border-radius: 3px;
      --field-background-color: var(--background-color-up);
      --field-transition: border-color 0.1s ease-out;
      --icon-content: "";
      --icon-position: absolute;
      --icon-z-index: 1;
      --icon-inset: 0 12px 0 auto;
      --icon-transform-origin: 50% 50%;
      --icon-transform: none;
      --icon-display: block;
      --icon-width: 14px;
      --icon-height: 8px;
      --icon-margin: auto 0;
      --icon-color: var(--color-focus);
      --icon-clip-path: path(
        "M7.002,7.875 L0.002,0.875 L0.701,0.176 L7.011,6.487 L13.313,0.185 L14.000,0.872 L7.002,7.875 Z"
      );

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

        position: var(--icon-position);
        z-index: var(--icon-z-index);
        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);
        margin: var(--icon-margin);

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

      @include mixin.has-focus() {
        --field-border: 1px solid var(--border-color-focus);
        --field-color: var(--color-focus);
      }

      @include mixin.has-disabled() {
        --field-border: 1px solid var(--border-color-up);
        --field-color: var(--color-up);
      }

      // 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");
          $background-up: map.get($theme, "background");
          $background-focus: map.get($theme, "background-focus");
          $border-up: map.get($theme, "border");
          $border-focus: map.get($theme, "border-focus");

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