@use "../../settings";

/*
Marker

The marker module.

Weight: -99

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

/*
Modifiers

The marker modifiers.

Weight: -100

Markup: <!-- un ordered list -->
<ul class="#{settings.$prefix}-list  {{modifier_class}}">
  <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  {{modifier_class}}">
      <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  {{modifier_class}}">
  <li class="#{settings.$prefix}-list__item  #{settings.$prefix}-text">あのイーハトーヴォのすきとおった風。</li>
  <li class="#{settings.$prefix}-list__item  #{settings.$prefix}-text">あのイーハトーヴォのすきとおった風。
    <ol class="#{settings.$prefix}-list  {{modifier_class}}">
      <li class="#{settings.$prefix}-list__item  #{settings.$prefix}-text">あのイーハトーヴォのすきとおった風。</li>
      <li class="#{settings.$prefix}-list__item  #{settings.$prefix}-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</li>
    </ol>
  </li>
</ol>

#{settings.$prefix}-list--marker-circle - Circle
#{settings.$prefix}-list--marker-circle-filled - Filled circle
#{settings.$prefix}-list--marker-square - Square
#{settings.$prefix}-list--marker-square-filled - Filled square
#{settings.$prefix}-list--marker-asterisk - Asterisk
#{settings.$prefix}-list--marker-numeric - Numeric
#{settings.$prefix}-list--marker-numeric-bracket - Numeric with bracket

Style guide: #{settings.$prefix}-list.marker.builtin
*/
.#{settings.$prefix}-list--marker {
  &-circle,
  &-circle-filled {
    --item-padding: 0 0 0 1.3em;
    --marker-width: 1.2em;
  }

  &-circle {
    --marker-content: "\0025E6";
  }

  &-circle-filled {
    --marker-content: "\002022";
  }

  &-square,
  &-square-filled {
    --item-padding: 0 0 0 1.3em;
    --marker-width: 1.2em;
  }

  &-square {
    --marker-content: "\0025AB";
  }

  &-square-filled {
    --marker-content: "\0025AA";
  }

  &-asterisk {
    --item-padding: 0 0 0 1.25em;
    --marker-content: "\00203B";
    --marker-width: 1em;
  }

  &-numeric {
    $counter-name: "#{settings.$prefix}-list--marker-numeric";

    --counter-reset: #{$counter-name};
    --counter-increment: #{$counter-name};
    --item-padding: 0 0 0 1.6em;
    --marker-content: counter(#{$counter-name}, decimal) ".";
    --marker-width: 1.5em;
  }

  &-numeric-bracket {
    $counter-name: "#{settings.$prefix}-list--marker-numeric-bracket";

    --counter-reset: #{$counter-name};
    --counter-increment: #{$counter-name};
    --item-padding: 0 0 0 1.9em;
    --marker-content: "(" counter(#{$counter-name}, decimal) ")";
    --marker-width: 1.75em;
  }
}