nav[aria-label='Table of contents'] {
  // Use the correct grid area (right sidebar).
  grid-area: left;
  display: block;
  // Add some padding to align with the rest of the elements on the page.
  padding: 112px var(--spacing-24) var(--spacing-20) var(--spacing-12);

  @media (max-width: 83rem) {
    // Hide in viewports under 1328px wide.
    display: none;
  }

  div {
    // Make the table of contents stick to the top of the page.
    position: sticky;
    top: var(--spacing-24);
    // Display as a grid to define a max width for the contents and consume
    // leftover space on the left side, as needed.
    display: grid;
    grid-template-columns:
      // Consume leftover space on the left side.

      minmax(0, 1fr)
      // Limit the width of the contents to 17.5rem.
      minmax(auto, 17.5rem);
    grid-template-rows: auto;
    // Add spacing between heading and list.
    row-gap: var(--spacing-10);

    > * {
      // Place all contents in the second column.
      grid-column: 2;
    }
  }

  h2 {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
  }

  ol {
    // Use a flex column to display the content.
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);

    ol {
      // Add some space for nested items.
      padding-inline-start: var(--spacing-6);
      padding-block: var(--spacing-2);
    }
  }

  li {
    // Make list items smaller and tighten spacing to increase readability.
    font-size: var(--font-sm);
    line-height: var(--line-height-normal);
    // Apply a lighter color to all list items.
    color: var(--color-text-light);
    // Wrapping the content to minimize orphans makes items look very short,
    // so revert to the default behavior as it looks better here.
    text-wrap: wrap;
  }

  a {
    // Remove underlines from links.
    --link_color-underline: transparent;
    // Apply a transition on hover.
    transition: color var(--animation-duration-medium) ease;

    &[aria-current='true'] {
      // Apply a different color to the current item.
      color: var(--color-primary-light);
      // Hijack the font smoothing to make the text look a little bolder.
      -webkit-font-smoothing: subpixel-antialiased;
    }

    @media (hover: hover) {
      &:is(:hover, :focus) {
        // Only apply hover styles on devices that support hover.
        color: var(--color-primary-light);
      }
    }
  }

  div > a {
    // Display as flex to accommodate the icon.
    display: flex;
    align-items: center;
    column-gap: var(--spacing-2);
    width: fit-content;

    // Apply a lighter color to the link.
    color: var(--color-text-light);
    border-radius: var(--border-radius-small);

    // Move closer to the rest of the links.
    margin-block-start: calc(0px - var(--spacing-2));

    @media (hover: hover) {
      // Only apply hover styles on devices that support hover.
      &:is(:hover, :focus) {
        @media (prefers-reduced-motion: no-preference) {
          // Apply an animation only if the user prefers motion.
          svg {
            // Animate the arrow, pulling upwards. The timing is custom to
            // make it feel snappy. It's repeated twice as to make sure the user
            // sees it, but also to make sure it's not too distracting.
            animation: arrow-rise 0.75s ease 2;
          }
        }
      }
    }
  }
}

// Define the animation for the arrow pulling upwards.
@keyframes arrow-rise {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }

  100% {
    transform: translateY(0);
  }
}
