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

/*
Link theme

The link theme.

Weight: -98

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

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

The link theme modifiers.

Weight: -100

Markup: <h1 class="#{settings.$prefix}-text">Lorem ipsum dolor <a class="#{settings.$prefix}-text__link  {{modifier_class}}" href="#">sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
<p class="#{settings.$prefix}-text">あの<a class="#{settings.$prefix}-text__link  {{modifier_class}}" href="#">イーハトーヴォ</a>のすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>

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

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

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

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

      // Default settings
      @include mixin.on-link() {
        --color: var(--color-link);
        --text-decoration: underline;
      }

      @include mixin.on-focus() {
        --color: var(--color-focus);
        --text-decoration: none;
      }

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

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