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

/*
Theme

The theme module.

Weight: -99

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

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

The theme modifiers.

Weight: -100

Markup: <div class="#{settings.$prefix}-document  {{modifier_class}}">
  <!-- heading -->
  <h1>Lorem ipsum dolor sit amet.</h1>
  <h2>あのイーハトーヴォのすきとおった風。</h2>
  <h3>Lorem ipsum dolor sit amet.</h3>
  <h4>あのイーハトーヴォのすきとおった風。</h4>
  <h5>Lorem ipsum dolor sit amet.</h5>
  <h6>あのイーハトーヴォのすきとおった風。</h6>
  <hr />
  <!-- paragraph -->
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br />sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <!-- inline markup -->
  <p>Lorem ipsum <strong>dolor sit amet</strong>, consectetur <b>adipiscing elit</b>,sed do eiusmod <em>tempor incididunt</em> ut labore et dolore <i>magna aliqua</i>.</p>
  <p>Lorem ipsum <u>dolor sit amet</u>, consectetur <del>adipiscing elit</del>,sed do eiusmod <s>tempor incididunt</s> ut labore et dolore <code>magna aliqua</code>.</p>
  <p>Lorem ipsum <span>dolor sit amet</span>, consectetur <a href="javascript:;">adipiscing elit</a>.</p>
  <hr />
  <!-- list -->
  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
      </ul>
    </li>
  </ul>
  <ol>
    <li>あのイーハトーヴォのすきとおった風。</li>
    <li>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
      <ol>
        <li>あのイーハトーヴォのすきとおった風。</li>
        <li>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</li>
      </ol>
    </li>
  </ol>
  <hr />
  <!-- embedded image -->
  <p><img src="https://picsum.photos/600/400/?grayscale&amp;blur=10" /></p>
  <hr />
  <!-- embedded image (error) -->
  <p><img src="#" alt="Lorem ipsum dolor sit amet." /></p>
  <hr />
  <!-- embedded image (extended markup) -->
  <figure class="#{settings.$prefix}-document__pict  #{settings.$prefix}-document__pict--copy-protect-true" style="width: 400px;">
    <img src="https://picsum.photos/400/300/?grayscale&amp;blur=10" alt="" width="400" height="300" />
    <figcaption>Lorem ipsum dolor sit amet.</figcaption>
  </figure>
  <hr />
  <!-- embedded video -->
  <p>
    <iframe title="vimeo-player" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen></iframe>
  </p>
  <hr />
  <!-- embedded video (extended markup) -->
  <p>
    <span class="#{settings.$prefix}-document__pict  #{settings.$prefix}-document__pict--aspect-ratio-16-9">
      <iframe title="vimeo-player" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen></iframe>
    </span>
  </p>
  <hr />
  <!-- table -->
  <table>
    <tr>
      <th scope="row">Lorem ipsum dolor sit amet.</th>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
    </tr>
    <tr>
      <th scope="row">あのイーハトーヴォのすきとおった風。</th>
      <td>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</td>
    </tr>
  </table>
  <hr />
  <!-- table (extended markup) -->
  <div class="#{settings.$prefix}-document__scrollable-table">
    <table>
      <tr>
        <th scope="col">Lorem ipsum dolor sit amet.</th>
        <th scope="col">あのイーハトーヴォのすきとおった風。</th>
        <th scope="col">Lorem ipsum dolor sit amet.</th>
        <th scope="col">あのイーハトーヴォのすきとおった風。</th>
        <th scope="col">Lorem ipsum dolor sit amet.</th>
        <th scope="col">あのイーハトーヴォのすきとおった風。</th>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td>Lorem ipsum dolor sit amet.
          <div class="#{settings.$prefix}-document__scrollable-table">
            <table>
              <tr>
                <th scope="row">Lorem ipsum dolor sit amet.</th>
                <td>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
              </tr>
              <tr>
                <th scope="row">Lorem ipsum dolor sit amet.</th>
                <td>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </table>
  </div>
  <hr />
  <!-- blockquote -->
  <blockquote>
    <!-- heading -->
    <h1>Lorem ipsum dolor sit amet.</h1>
    <h2>あのイーハトーヴォのすきとおった風。</h2>
    <h3>Lorem ipsum dolor sit amet.</h3>
    <h4>あのイーハトーヴォのすきとおった風。</h4>
    <h5>Lorem ipsum dolor sit amet.</h5>
    <h6>あのイーハトーヴォのすきとおった風。</h6>
    <hr />
    <!-- paragraph -->
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br />sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <hr />
    <!-- inline markup -->
    <p>Lorem ipsum <strong>dolor sit amet</strong>, consectetur <b>adipiscing elit</b>,sed do eiusmod <em>tempor incididunt</em> ut labore et dolore <i>magna aliqua</i>.</p>
    <p>Lorem ipsum <u>dolor sit amet</u>, consectetur <del>adipiscing elit</del>,sed do eiusmod <s>tempor incididunt</s> ut labore et dolore <code>magna aliqua</code>.</p>
    <p>Lorem ipsum <span>dolor sit amet</span>, consectetur <a href="javascript:;">adipiscing elit</a>.</p>
    <hr />
    <!-- list -->
    <ul>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <ul>
          <li>Lorem ipsum dolor sit amet.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        </ul>
      </li>
    </ul>
    <ol>
      <li>あのイーハトーヴォのすきとおった風。</li>
      <li>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
        <ol>
          <li>あのイーハトーヴォのすきとおった風。</li>
          <li>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</li>
        </ol>
      </li>
    </ol>
    <hr />
    <!-- embedded image -->
    <p><img src="https://picsum.photos/600/400/?grayscale&amp;blur=10" /></p>
    <hr />
    <!-- embedded image (error) -->
    <p><img src="#" alt="Lorem ipsum dolor sit amet." /></p>
    <hr />
    <!-- embedded image (extended markup) -->
    <figure class="#{settings.$prefix}-document__pict  #{settings.$prefix}-document__pict--copy-protect-true" style="width: 400px;">
      <img src="https://picsum.photos/400/300/?grayscale&amp;blur=10" alt="" width="400" height="300" />
      <figcaption>Lorem ipsum dolor sit amet.</figcaption>
    </figure>
    <hr />
    <!-- embedded video -->
    <p>
      <iframe title="vimeo-player" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen></iframe>
    </p>
    <hr />
    <!-- embedded video (extended markup) -->
    <p>
      <span class="#{settings.$prefix}-document__pict  #{settings.$prefix}-document__pict--aspect-ratio-16-9">
        <iframe title="vimeo-player" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen></iframe>
      </span>
    </p>
    <hr />
    <!-- table -->
    <table>
      <tr>
        <th scope="row">Lorem ipsum dolor sit amet.</th>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      </tr>
      <tr>
        <th scope="row">あのイーハトーヴォのすきとおった風。</th>
        <td>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</td>
      </tr>
    </table>
    <hr />
    <!-- table (extended markup) -->
    <div class="#{settings.$prefix}-document__scrollable-table">
      <table>
        <tr>
          <th scope="col">Lorem ipsum dolor sit amet.</th>
          <th scope="col">あのイーハトーヴォのすきとおった風。</th>
          <th scope="col">Lorem ipsum dolor sit amet.</th>
          <th scope="col">あのイーハトーヴォのすきとおった風。</th>
          <th scope="col">Lorem ipsum dolor sit amet.</th>
          <th scope="col">あのイーハトーヴォのすきとおった風。</th>
        </tr>
        <tr>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
          <td>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
          <td>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
          <td>Lorem ipsum dolor sit amet.
            <div class="#{settings.$prefix}-document__scrollable-table">
              <table>
                <tr>
                  <th scope="row">Lorem ipsum dolor sit amet.</th>
                  <td>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</td>
                  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                </tr>
                <tr>
                  <th scope="row">Lorem ipsum dolor sit amet.</th>
                  <td>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら。</td>
                  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </table>
    </div>
    </blockquote>
  <hr />
  <pre>
&lt;!-- heading --&gt;
&lt;h1&gt;Lorem ipsum dolor sit amet.&lt;/h1&gt;
&lt;h2&gt;Lorem ipsum dolor sit amet.&lt;/h2&gt;
&lt;h3&gt;Lorem ipsum dolor sit amet.&lt;/h3&gt;
&lt;h4&gt;Lorem ipsum dolor sit amet.&lt;/h4&gt;
&lt;h5&gt;Lorem ipsum dolor sit amet.&lt;/h5&gt;
&lt;h6&gt;Lorem ipsum dolor sit amet.&lt;/h6&gt;
&lt;hr /&gt;
&lt;!-- paragraph --&gt;
&lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit,&lt;br /&gt;sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
&lt;hr /&gt;
&lt;!-- inline markup --&gt;
&lt;p&gt;Lorem ipsum &lt;strong&gt;dolor sit amet&lt;/strong&gt;, consectetur &lt;b&gt;adipiscing elit&lt;/b&gt;,sed do eiusmod &lt;em&gt;tempor incididunt&lt;/em&gt; ut labore et dolore &lt;i&gt;magna aliqua&lt;/i&gt;.&lt;/p&gt;
&lt;p&gt;Lorem ipsum &lt;u&gt;dolor sit amet&lt;/u&gt;, consectetur &lt;del&gt;adipiscing elit&lt;/del&gt;,sed do eiusmod &lt;s&gt;tempor incididunt&lt;/s&gt; ut labore et dolore &lt;code&gt;magna aliqua&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Lorem ipsum &lt;span&gt;dolor sit amet&lt;/span&gt;, consectetur &lt;a href="javascript:;"&gt;adipiscing elit&lt;/a&gt;.&lt;/p&gt;
&lt;hr /&gt;
&lt;!-- list --&gt;
&lt;ul&gt;
  &lt;li&gt;Lorem ipsum dolor sit amet.&lt;/li&gt;
  &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    &lt;ul&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
  &lt;li&gt;Lorem ipsum dolor sit amet.&lt;/li&gt;
  &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    &lt;ol&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
&lt;/ol&gt;
  </pre>
</div>

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

Style guide: #{settings.$prefix}-document.theme.builtin
*/
  .#{settings.$prefix}-document--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);
      --link-color: var(--color-up);
      --focus-color: var(--color-focus);
      --pre-color: var(--color-focus);
      --pre-background-color: var(--background-color-focus);
      --pre-border: 1px solid var(--border-color-up);
      --code-color: var(--color-focus);
      --code-background-color: var(--background-color-focus);
      --code-border: 1px solid var(--border-color-up);
      --blockquote-border: 3px solid var(--border-color-up);
      --table-border: 1px solid var(--border-color-focus);
      --table-background-color: var(--background-color-up);
      --table-heading-background-color: var(--background-color-focus);
      --hr-border: 1px solid var(--border-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");
          $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}));
        }
      }
    }
  }
}