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

/*
#{settings.$prefix}-document

The document unit.

Weight: -1040

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

/*
Core

The core module.

Weight: -100

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

/*
Default style

The default style.

Weight: -100

Markup: <div class="#{settings.$prefix}-document">
  <!-- 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://placehold.co/600x400.png" alt="Lorem ipsum dolor sit amet." width="600" height="400" /></p>
  <hr />
  <!-- embedded image (error) -->
  <p><img src="#" alt="Lorem ipsum dolor sit amet." width="400" height="300" /></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://placehold.co/400x300.png" alt="Lorem ipsum dolor sit amet." 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://placehold.co/600x400.png" alt="Lorem ipsum dolor sit amet." width="600" height="400" /></p>
    <hr />
    <!-- embedded image (error) -->
    <p><img src="#" alt="Lorem ipsum dolor sit amet." width="400" height="300"  /></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://placehold.co/400x300.png" alt="Lorem ipsum dolor sit amet." 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>

Style guide: #{settings.$prefix}-document.core.default
*/
.#{settings.$prefix}-document {
  $pkg: settings.$pkg;
  $heading-elements: (
    "h1": 1.75,
    "h2": 1.6,
    "h3": 1.45,
    "h4": 1.3,
    "h5": 1.15,
    "h6": 1
  );

  // Typography
  --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;

  // Spacings
  --top-spacing: 20px;

  // For individual elements
  --list-indent: 1.5em;
  --list-item-display: list-item;
  --img-overflow: hidden;
  --img-max-width: 100%;
  --img-margin: 0 auto;
  --img-height: auto;
  --iframe-overflow: hidden;
  --iframe-max-width: 100%;
  --iframe-margin: 0 auto;
  --pre-code-font-family: var(--#{$pkg}-font-family-monospace);
  --pre-code-font-size: calc(var(--font-size) * 0.85);
  --pre-overflow: auto;
  --pre-box-sizing: border-box;
  --pre-padding: 15px;
  --pre-border: 1px solid currentColor;
  --pre-border-radius: 3px;
  --pre-color: inherit;
  --pre-background-color: transparent;
  --code-display: inline-block;
  --code-padding: 1px 3px;
  --code-border: 1px solid currentColor;
  --code-border-radius: 3px;
  --code-color: inherit;
  --code-background-color: transparent;
  --table-border: 1px solid currentColor;
  --table-cell-padding: 5px 10px calc(5px * #{settings.$line-height});
  --table-color: inherit;
  --table-background-color: transparent;
  --table-heading-color: inherit;
  --table-heading-background-color: transparent;
  --blockquote-indent: 15px;
  --blockquote-border: 3px solid currentColor;
  --blockquote-border-width: 0 0 0 3px;
  --hr-border: 1px solid currentColor;
  --link-color: rgb(var(--#{$pkg}-color-link));
  --focus-color: rgb(var(--#{$pkg}-color-focus));
  --link-decoration: underline;
  --focus-decoration: none;
  --message-on-image-error: var(--#{$pkg}-message-on-image-error);
  --pict-aspect-ratio: auto;
  --pict-object-fit: contain;
  --pict-pointer-events: auto;
  --pict-caption-padding: 5px 0 0;
  --scrollable-table-column-width: 10em;

  // For heading elements
  @each $element, $size in $heading-elements {
    --#{$element}-font-size: calc(#{$size} * 1em);
    --#{$element}-font-weight: var(--#{$pkg}-font-weight-bold);
  }

  :where(:not([class*="#{settings.$prefix}-"])) {
    // Initialize text elements to apply font settings
    &:where(
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      ul,
      ol,
      p,
      li,
      img,
      pre,
      th,
      td,
      figcaption,
      strong,
      b,
      em,
      i,
      u,
      del,
      s,
      code,
      a,
      span
    ) {
      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);
    }

    // Initialize block elements to apply settings like box unit.
    &:where(
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      ul,
      ol,
      p,
      li,
      img,
      blockquote,
      pre,
      code,
      figcaption,
      iframe
    ) {
      --position: relative;
      --z-index: auto;
      --transform-origin: 50% 50% 0;
      --transform: none;
      --overflow: visible;
      --display: block;
      --gap: normal;
      --align-content: normal;
      --align-items: normal;
      --justify-content: normal;
      --justify-items: normal;
      --box-sizing: content-box;
      --width: auto;
      --max-width: none;
      --height: auto;
      --max-height: none;
      --margin: 0;
      --padding: 0;
      --border: 0;
      --border-radius: 0;
      --color: inherit;
      --visibility: visible;
      --opacity: 1;
      --background-color: transparent;
      --box-shadow: none;
      --transition: none;

      position: var(--position);
      z-index: var(--z-index);
      transform-origin: var(--transform-origin);
      transform: var(--transform);

      overflow: var(--overflow);
      display: var(--display);
      gap: var(--gap);
      align-content: var(--align-content);
      align-items: var(--align-items);
      justify-content: var(--justify-content);
      justify-items: var(--justify-items);

      box-sizing: var(--box-sizing);
      max-width: var(--max-width);
      max-height: var(--max-height);
      margin: var(--margin);
      padding: var(--padding);
      border: var(--border);
      border-radius: var(--border-radius);

      color: var(--color);

      visibility: var(--visibility);
      opacity: var(--opacity);
      background-color: var(--background-color);
      box-shadow: var(--box-shadow);

      transition: var(--transition);
    }

    // For block elements without iframe
    &:where(
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      ul,
      ol,
      p,
      li,
      img,
      blockquote,
      pre,
      figcaption
    ) {
      --width: auto;
      --height: auto;

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

    // Initialize inline elements
    &:where(strong, b, em, i, u, del, s, code, a, span) {
      --display: inline;
      --border: 0;

      display: var(--display);
      border: var(--border);
    }

    // For heading elements
    @each $element, $size in $heading-elements {
      &:where(#{$element}) {
        --font-size: var(--#{$element}-font-size);
        --font-weight: var(--#{$element}-font-weight);

        &:not(:first-child) {
          --padding: calc(var(--top-spacing) * #{$size} * 0.7) 0 0;
        }
      }
    }

    // For paragraph and listing elements
    &:where(p, ul, ol):not(ul *, ol *) {
      &:not(:first-child) {
        --padding: var(--top-spacing) 0 0;
      }
    }

    &:where(ul, ol) {
      padding-left: var(--list-indent);
    }

    &:where(li) {
      --display: var(--list-item-display);
    }

    // For img elements
    &:where(img) {
      --overflow: var(--img-overflow);
      --max-width: var(--img-max-width);
      --height: var(--img-height);
      --margin: var(--img-margin);

      &::after {
        content: var(--message-on-image-error);

        position: absolute;
        inset: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        text-align: center;
      }
    }

    // For iframe elements
    &:where(iframe) {
      --overflow: var(--iframe-overflow);
      --max-width: var(--iframe-max-width);
      --margin: var(--iframe-margin);
    }

    // For pre and code elements
    &:where(pre, code):where(:not(pre code, code pre)) {
      --font-family: var(--pre-code-font-family);
      --font-size: var(--pre-code-font-size);
    }

    &:where(pre) {
      --overflow: var(--pre-overflow);
      --box-sizing: var(--pre-box-sizing);
      --max-width: 100%;
      --padding: var(--pre-padding);
      --border: var(--pre-border);
      --border-radius: var(--pre-border-radius);
      --color: var(--pre-color);
      --white-space: pre;
      --background-color: var(--pre-background-color);

      &:not(:first-child) {
        --margin: var(--top-spacing) 0 0;
      }
    }

    &:where(code) {
      --display: var(--code-display);
      --padding: var(--code-padding);
      --border: var(--code-border);
      --border-radius: var(--code-border-radius);
      --color: var(--code-color);
      --background-color: var(--code-background-color);
    }

    // For blockquote element
    &:where(blockquote) {
      --padding: 0 0 0 var(--blockquote-indent);
      --border: var(--blockquote-border);

      border-width: var(--blockquote-border-width);

      &:not(:first-child) {
        --margin: var(--top-spacing) 0 0;
      }
    }

    // For table elements
    &:where(table) {
      display: table;
      border-collapse: collapse;

      width: auto;
      max-width: 100%;
      margin: 0;
      padding: 0;
      border: var(--table-border);

      color: var(--table-color);

      background-color: var(--table-background-color);

      &:not(:first-child) {
        margin-top: var(--top-spacing);
      }
    }

    &:where(th, td) {
      display: table-cell;

      padding: var(--table-cell-padding);
      border: var(--table-border);

      color: var(--table-color);
      vertical-align: middle;

      background-color: var(--table-background-color);
    }

    &:where(th) {
      --table-color: var(--table-heading-color);
      --table-background-color: var(--table-heading-background-color);
    }

    // For hr element
    &:where(hr) {
      clear: both;

      height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      border-bottom: var(--hr-border);

      background: transparent;

      &:not(:first-child) {
        padding-top: var(--top-spacing);
      }
    }

    // For inline elements
    &:where(strong, b) {
      --font-weight: var(--#{$pkg}-font-weight-bold);
    }

    &:where(em, i) {
      --font-style: italic;
    }

    &:where(u) {
      --text-decoration: underline;
    }

    &:where(del, s) {
      --text-decoration: line-through;
    }

    &:where(a) {
      @include mixin.on-link() {
        --text-decoration: var(--link-decoration);

        color: var(--link-color);
      }

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

        color: var(--focus-color);
      }
    }
  }

  // Image with caption and iframe player
  &__pict {
    --max-width: 100%;
    --margin: var(--top-spacing) auto 0;

    &:where(p &, li &) {
      --margin: 0 auto;
    }

    :where(p, figcaption, span) {
      --padding: var(--pict-caption-padding);
    }

    :where(img) {
      pointer-events: var(--pict-pointer-events);
    }

    &--copy-protect-true :where(img) {
      --pict-pointer-events: none;
    }

    &--aspect-ratio {
      &-4-3,
      &-16-9 {
        > img,
        > iframe {
          --max-width: 100%;

          aspect-ratio: var(--pict-aspect-ratio);
          width: 100%;
          height: auto;
          object-fit: var(--pict-object-fit);
        }
      }

      &-4-3 {
        --pict-aspect-ratio: 4/3;
      }

      &-16-9 {
        --pict-aspect-ratio: 16/9;
      }
    }
  }

  // For scrollable table
  &__scrollable-table {
    --overflow: auto;
    --max-width: 100%;
    --margin: var(--top-spacing) 0 0 0;

    > table {
      th,
      td {
        min-width: var(--scrollable-table-column-width);
      }
    }
  }
}