.page-toc-wrapper {
  flex: 0 0 18%;
  padding-bottom: 6rem;

  @media only screen and (max-width: 1023px) {
    display: none;
  }
  
  @media print {
    display: none;
  }

  .page-toc {
    position: sticky;
    top: 0;
    /* Define the custom property for the scroll progress */
    --scroll-progress: 0;
    margin-bottom: 1rem;
    margin-top: calc(var(--dynamic-offset) + 4.3rem);
    font-size: 0.9rem;
    overflow-y: auto;
    max-height: 85vh;

    &:has(ul)::before {
      content: 'On this page';
      display: block;
      font-weight: 700;
      padding-bottom: 1em;
    }

    &:empty::before {
      display: none;
    }

    > .toc-list {
      overflow: hidden;
      position: relative;
      margin: 0;
      padding-left: 1rem;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0.125rem;
        width: 0.25rem;
        height: 100%;
        background: var(--light-cloud);
        border-radius: 10rem;
      }

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0.5rem;
        /* Use the custom property to set the height */
        min-height: 0.5rem;
        max-height: 100%;
        height: calc(var(--scroll-progress) * 100%);
        background: linear-gradient(to bottom, var(--lime), var(--ocean));
        transition: height 0.2s ease-out;
        border-radius: 10rem;
      }

      li {
        list-style: none;
        padding-left: 0.5rem;
        padding-top: 0.25em;
        padding-bottom: 0.25em;

        &:first-of-type {
          padding-top: unset;
        }

        &:last-of-type {
          padding-bottom: unset;
        }

        &.toc-3 {
          padding-left: 1.125rem;
        }

        &.toc-4 {
          padding-left: 1.75rem;
        }

        a.toc-link {
        text-decoration: none;

          &.is-active-link {
            font-weight: 700;
          }
        }
      }
    }
  }
}