:root {
  --vs-toc--anchor-align-items: baseline;
  --vs-toc--anchor-text-decoration: none;
  --vs-toc--anchor-text-decoration-on-hover: underline;
  --vs-toc--marker-content: counters(vs-counter-toc, '.') ' ';
  --vs-toc--marker-display: none;
  --vs-toc--marker-padding-inline-end: 1ch;
  --vs-toc--marker-text-align: end;
  --vs-toc--ol-indent-size: 2rem;
  --vs-toc--page-counter-display: inline;
  --vs-toc--page-counter-style: decimal;
  --vs-toc--page-leader-content: leader('.') ' ';
}

#toc,
[role='doc-toc'] {
  --vs--ol-padding-inline-start: var(--vs-toc--ol-indent-size);
  --vs--ol-minimum-inline-indent-size: 0rem;
}

:is(#toc, [role='doc-toc']) ol {
  counter-reset: vs-counter-toc;
  list-style: none;
}

:is(#toc, [role='doc-toc']) li {
  counter-increment: vs-counter-toc;
  break-inside: avoid;
  position: relative;
}

:is(#toc, [role='doc-toc']) li::before {
  content: var(--vs-toc--marker-content);
  display: var(--vs-toc--marker-display);
  position: absolute;
  text-align: var(--vs-toc--marker-text-align);
  padding-inline-end: var(--vs-toc--marker-padding-inline-end);
  /* Up to 6 indentations can be displayed (h1-h6) */
  inline-size: calc(var(--vs-toc--ol-indent-size) * 6);
  inset-inline-start: calc(var(--vs-toc--ol-indent-size) * -6);
}

:is(#toc, [role='doc-toc']) li > a {
  align-items: var(--vs-toc--anchor-align-items);
  text-decoration: var(--vs-toc--anchor-text-decoration);
}

:is(#toc, [role='doc-toc']) li > a:hover {
  text-decoration: var(--vs-toc--anchor-text-decoration-on-hover);
}

:is(#toc, [role='doc-toc']) li > a::after {
  content: var(--vs-toc--page-leader-content)
    target-counter(attr(href), page, var(--vs-toc--page-counter-style));
  display: var(--vs-toc--page-counter-display);
}