.vx-blog-toc {
  display: flex;
  flex-direction: column;
  gap: var(--blog-spacing-after-heading);
}

.vx-blog-toc.hidden {
  display: none;
}

.vx-blog-toc__title {
  margin: 0;
  color: var(--vtx-black);
  font-family: var(--blog-font-mono);
  font-size: var(--blog-size-caption);
  font-weight: 600;
  line-height: var(--blog-lh-h6);
  letter-spacing: var(--vtx-blog-toc-heading-tracking);
  text-transform: uppercase;
}

.vx-blog-toc ol {
  display: flex;
  flex-direction: column;
  gap: var(--vtx-blog-presentation-toc-list-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--blog-font-body);
  font-weight: 500;
  line-height: var(--blog-lh-h6);
}

.vx-blog-toc .toc-link {
  display: inline;
  color: var(--vtx-black);
  text-align: left;
  text-decoration: none;
  transition: color var(--vtx-blog-component-transition-duration) ease;
}

.vx-blog-toc .toc-link span {
  color: var(--vtx-black);
  font-size: var(--blog-size-caption);
  font-weight: var(--blog-weight-normal);
  line-height: var(--blog-lh-caption);
  letter-spacing: var(--vtx-blog-toc-link-tracking);
  transition: color var(--vtx-blog-component-transition-duration) ease, font-weight var(--vtx-blog-component-transition-duration) ease;
}

.vx-blog-toc .toc-link:hover span,
.vx-blog-toc .toc-link.is-active span,
.vx-blog-toc .toc-link.toc-active span,
.vx-blog-toc li:first-child span {
  color: var(--blog-color-text);
  font-weight: bold;
}

.vx-blog-toc-heading-anchor {
  margin-inline-start: var(--vtx-blog-toc-anchor-gap);
  color: var(--vtx-black);
  font-size: var(--vtx-blog-toc-anchor-size);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--vtx-blog-component-transition-duration) ease;
}

h2:hover > .vx-blog-toc-heading-anchor,
.vx-blog-toc-heading-anchor:focus-visible {
  opacity: 1;
}