:root {
  --prosekit-list-bullet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='currentColor'/%3E%3C/svg%3E");
  --prosekit-list-toggle-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='8,10 12,14 16,10' fill='currentColor'/%3E%3C/svg%3E");
  --prosekit-list-toggle-closed-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='10,8 14,12 10,16' fill='currentColor'/%3E%3C/svg%3E");
}

.prosemirror-flat-list {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.prosemirror-flat-list > .list-marker {
  width: 1.5em;
  width: 1lh;
  height: 1.5em;
  text-align: center;
  height: 1lh;
  position: absolute;
  inset-inline-start: 0;
}

.prosemirror-flat-list > .list-content {
  margin-inline-start: 1.5em;
  margin-inline-start: 1lh;
}

.prosemirror-flat-list[data-list-kind="bullet"] > .list-marker, .prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
  background-color: currentColor;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.prosemirror-flat-list[data-list-kind="bullet"] > .list-marker {
  mask-image: var(--prosekit-list-bullet-icon);
}

.prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
  mask-image: var(--prosekit-list-toggle-open-icon);
}

.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-marker {
  mask-image: var(--prosekit-list-toggle-closed-icon);
}

.prosemirror-flat-list[data-list-kind="ordered"] > * {
  contain: style;
}

.prosemirror-flat-list[data-list-kind="ordered"]:before {
  inset-inline-end: calc(100% - 1.5em);
  content: counter(prosemirror-flat-list-counter, decimal) ". ";
  font-variant-numeric: tabular-nums;
  position: absolute;
  inset-inline-end: calc(100% - 1lh);
}

.prosemirror-flat-list[data-list-kind="ordered"] {
  counter-increment: prosemirror-flat-list-counter;
}

.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"] {
  counter-reset: prosemirror-flat-list-counter;
}

@supports (counter-set: prosemirror-flat-list-counter 1) {
  :is(.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"])[data-list-order] {
    counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
  }
}

@supports not (counter-set: prosemirror-flat-list-counter 1) {
  :is(.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"])[data-list-order] {
    counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
  }
}

.prosemirror-flat-list[data-list-kind="task"] > .list-marker, .prosemirror-flat-list[data-list-kind="task"] > .list-marker * {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  display: flex;
}

.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable] > .list-marker {
  cursor: pointer;
}

.prosemirror-flat-list[data-list-kind="toggle"]:not([data-list-collapsable]) > .list-marker {
  opacity: .4;
  pointer-events: none;
}

.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-content > :nth-child(n+2) {
  display: none;
}