.com-page-index {
  --color-com-page-index-text: hsl(0 0% 0% / 1);
  --color-com-page-index-bg: hsl(0 0% 98% / 1);
  --color-com-page-index-border: hsl(0 0% 85% / 1);
  --color-com-page-index-toc: hsl(0 0% 50% / 1);
  --color-com-page-index-marker: hsl(0 0% 50% / 1);
  /* Todo: Active color doesn't really work here. Change this. */
  --color-com-page-index-active: var(--color-primary-orange);
}

.com-page-index {
  position: sticky; top: var(--subheader-height);
}

.com-page-index-content {
  position: absolute; top: 0; left: 0;
  width: 100%; height: auto;
  padding: 40px 40px;
  background: var(--color-com-page-index-bg);
  border: 1px solid var(--color-com-page-index-border);
}

.com-page-index header {
  margin-bottom: 16px; padding-bottom: 16px;
  color: var(--color-com-page-index-toc);
  border-bottom: 1px solid var(--color-com-page-index-border);
}

.com-page-index ul { margin: 0; padding: 0; }

.com-page-index li {
  list-style-type: disclosure-closed;
  list-style-position: inside;
  margin: 0; padding: 0;
}

.com-page-index li::marker { color: var(--color-com-page-index-marker); }

.com-page-index a {
  display: inline-flex; align-items: center;
  text-decoration: none;
  color: var(--color-com-page-index-text);
  transition: color ease-out 200ms;
}

.com-page-index a:hover { color: var(--color-com-page-index-active); }
.com-page-index a.active { color: var(--color-com-page-index-active); }
.com-page-index a img { position: relative; pointer-events: none; opacity: 0; transform: translate(2px, 1px); transition: opacity ease-out 200ms; }
.com-page-index a.active img { opacity: 0.45; }