:root {
  --toc-sticky-top: 20px;
  --toc-active-color: #111111;
  --toc-active-font-weight: 700;
  --toc-active-border-color: currentColor;
  --toc-link-transition: 180ms ease;
}

body.admin-bar {
  --toc-sticky-top: 52px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --toc-sticky-top: 66px;
  }
}

nav.toc,
nav .toc,
.nav.toc,
.nav .toc,
.toc-scrollspy-sticky-enabled {
  position: sticky;
  top: var(--toc-sticky-top);
  align-self: start;
}

nav.toc a,
nav .toc a,
.nav.toc a,
.nav .toc a,
.toc-scrollspy-sticky-enabled a {
  transition: color var(--toc-link-transition), opacity var(--toc-link-transition), border-color var(--toc-link-transition);
}

nav.toc a.is-active,
nav .toc a.is-active,
.nav.toc a.is-active,
.nav .toc a.is-active,
.toc-scrollspy-sticky-enabled a.is-active {
  color: var(--toc-active-color);
  font-weight: var(--toc-active-font-weight);
}

/* Optional indicator if theme already uses left borders or padding. */
nav.toc li:has(> a.is-active),
nav .toc li:has(> a.is-active),
.nav.toc li:has(> a.is-active),
.nav .toc li:has(> a.is-active),
.toc-scrollspy-sticky-enabled li:has(> a.is-active) {
  border-left: 2px solid var(--toc-active-border-color);
  list-style-position: inside;
}

html {
  scroll-behavior: smooth;
}

/* Helps anchor jumps when a sticky header is present. */
[id] {
  scroll-margin-top: calc(var(--toc-sticky-top) + 80px);
}