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

/*
#{settings.$prefix}-list

The list unit.

Weight: -1080

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

/*
Core

The core module.

Weight: -100

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

/*
Default style

The default style.

Weight: -100

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

Style guide: #{settings.$prefix}-list.core.default
*/
.#{settings.$prefix}-list {
  --counter-reset: none;
  --counter-increment: none;

  // For item
  --item-padding: 0;

  // For marker
  --marker-position: absolute;
  --marker-top: 0px;
  --marker-left: 0px;
  --marker-content: none;
  --marker-display: block;
  --marker-width: auto;
  --marker-margin: auto;
  --marker-color: currentColor;
  --marker-text-align: center;
  --marker-word-wrap: normal;
  --marker-white-space: nowrap;
  --marker-font-variant: common-ligatures proportional-width text;

  counter-reset: var(--counter-reset);

  &__item:where(& > &__item) {
    --padding: var(--item-padding);
    --item-counter-increment: var(--counter-increment);
    --item-marker-content: var(--marker-content);

    counter-increment: var(--item-counter-increment);

    &::before {
      content: var(--item-marker-content);

      position: var(--marker-position);
      top: var(--marker-top);
      left: var(--marker-left);

      display: var(--marker-display);

      width: var(--marker-width);
      margin: var(--marker-margin);

      font-variant: var(--marker-font-variant);
      color: var(--marker-color);
      text-align: var(--marker-text-align);
      word-wrap: var(--marker-word-wrap);
      white-space: var(--marker-white-space);
    }
  }
}