1ul,
 2ol {
 3  @apply mt-5 mb-5;
 4}
 5
 6ul > li,
 7ol > li {
 8  @apply relative mt-2 mb-2;
 9
10  & > *:first-child {
11    @apply mt-0;
12  }
13  & > *:last-child {
14    @apply mb-0;
15  }
16}
17
18ul {
19  --bullet-1: "•";
20  --bullet-2: "‣";
21  --bullet-3: "-";
22  --current-bullet: var(--bullet-1);
23
24  & > li {
25    @apply pl-[1.5em];
26
27    &::before {
28      content: var(--current-bullet);
29      @apply absolute left-[0.5em];
30    }
31  }
32
33  ul {
34    --current-bullet: var(--bullet-2);
35  }
36  ul ul {
37    --current-bullet: var(--bullet-3);
38  }
39  ul ul ul {
40    --current-bullet: var(--bullet-1);
41  }
42  ul ul ul ul {
43    --current-bullet: var(--bullet-2);
44  }
45  ul ul ul ul ul {
46    --current-bullet: var(--bullet-3);
47  }
48}
49
50[role="doc-toc"] > ol li > ol {
51  @apply pl-[1em] mt-0;
52}
53
54ol:not([role="doc-toc"] *, .no-counter) > li {
55  @apply pl-[2em];
56
57  &::before {
58    /* `list-item` is an internal counter of Browser */
59    /* See https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Counter_styles/Using_counters#list_item_counters */
60    content: counter(list-item) ". ";
61    @apply absolute left-0 text-right w-[1.5em];
62  }
63}
64
65/* For Chromium */
66@supports (x: attr(x number)) {
67  ol {
68    counter-reset: list-item;
69
70    > li {
71      &:not([value]) {
72        counter-increment: list-item;
73      }
74      &[value] {
75        counter-set: list-item attr(value number);
76      }
77    }
78  }
79}