.list {
  --list-margin-left: 1.5em;
  --list-item-margin-top: 0.25em;
  --list-kome-item-content: "\203B";
  --list-kome-item-inset: 0 auto auto -1em;
  --list-note-item-gap: 0.25em;
  --list-note-item-margin-top: 0.25em;
}

.list:where(:is(.is-disc, .is-circle, .is-square, .is-decimal, .is-kome)) {
  margin-left: var(--list-margin-left);
}

.list:where(:is(.is-disc, .is-circle, .is-square, .is-decimal, .is-kome))
  > .item {
  display: list-item;
}

.list.is-disc > .item {
  list-style: disc outside;
}

.list.is-circle > .item {
  list-style: circle outside;
}

.list.is-square > .item {
  list-style: square outside;
}

.list.is-decimal > .item {
  list-style: decimal outside;
}

.list.is-kome > .item {
  position: relative;
  display: block;
}

.list.is-kome > .item::before {
  content: var(--list-kome-item-content);
  position: absolute;
  inset: var(--list-kome-item-inset);
}

.list:where(:is(.is-disc, .is-circle, .is-square, .is-decimal, .is-kome))
  > :where(.item:not(:first-child)) {
  margin-top: var(--list-item-margin-top);
}

.list:where(:is(.is-disc, .is-circle, .is-square, .is-decimal, .is-kome))
  :where(.list) {
  margin-top: var(--list-item-margin-top);
}

.list.is-note > .item {
  display: flex;
  gap: var(--list-note-item-gap);
}

.list:where(.is-note) > :where(.item:not(:first-child)) {
  margin-top: var(--list-note-item-margin-top);
}

.list:where(.is-note) :where(.list) {
  margin-top: var(--list-note-item-margin-top);
}