@use "../../lib/mixin";
@use "../../settings";

/*
#{settings.$prefix}-text

The text unit.

Weight: -1090

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

/*
Core

The core module.

Weight: -100

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

/*
Default style

The default style.

Weight: -100

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

Style guide: #{settings.$prefix}-text.core.default
*/
.#{settings.$prefix}-text {
  $pkg: settings.$pkg;

  --font-size: var(--#{$pkg}-font-size);
  --font-weight: var(--#{$pkg}-font-weight);
  --font-style: normal;
  --line-height: var(--#{$pkg}-line-height);
  --text-align: left;
  --text-decoration: none;
  --text-indent: 0;
  --letter-spacing: var(--#{$pkg}-letter-spacing);
  --white-space: normal;
  --vertical-align: baseline;

  font-size: var(--font-size);
  font-weight: var(--font-weight);
  font-style: var(--font-style);
  line-height: var(--line-height);
  text-align: var(--text-align);
  text-decoration: var(--text-decoration);
  text-indent: var(--text-indent);
  letter-spacing: var(--letter-spacing);
  white-space: var(--white-space);
  vertical-align: var(--vertical-align);
}

/*
Default link style

The default link style.

Weight: -99

Markup: <h1 class="#{settings.$prefix}-text">Lorem ipsum dolor <a class="#{settings.$prefix}-text__link" 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" href="#">イーハトーヴォ</a>のすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>

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

  --display: inline;
  --color: var(--#{$pkg}-color-link);
  --text-decoration: none;
  --background-color: transparent;

  display: var(--display);
  color: var(--color);
  text-decoration: var(--text-decoration);
  background-color: var(--background-color);

  @include mixin.on-link() {
    --color: rgb(var(--#{$pkg}-color-link));
    --text-decoration: underline;
  }

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