[data-component='card']:has([data-table-of-contents='table']) {
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--spacing--md, 2rem));
    max-height: 80dvh;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  [data-table-of-contents='table'] {
    & ol,
    ul {
      list-style-type: none;
      padding: 0;
    }
    & li > a {
      display: block;
      text-decoration: none;
      padding-block-end: 0.25em;
      line-height: 1.25;
      margin-block-end: 1em;
      border-block-end: solid 1px var(--_site-theme---card--border);
      text-wrap: balance;
      transition: opacity var(--global-transition-duration) ease;
      &:not(:hover, .is-active-link) {
        opacity: 0.75;
      }
    }
    & li li {
      padding-inline-start: 0.75em;
    }
    .is-active-link {
      position: relative;
      &::before {
        content: '';
        width: 0.15em;
        position: absolute;
        left: -0.5em;
        background-color: currentColor;
        height: 1lh;
      }
    }
    & li > :where(ul, ol) {
      max-height: 0px;
      overflow: hidden;
      transition: max-height var(--global-transition-duration) ease;
    }
    & li:has(a.is-active-link, :focus) > :where(ul, ol),
    li > :where(ul, ol):has(.is-active-link) {
      max-height: 1000px;
    }
  }