nav {
  &.on-this-page {
    display: flex;
    position: sticky;
    top: 7rem;
    flex-direction: column;
    max-width: 12rem;
    height: fit-content;
    gap: 0.375rem;
    font-size: var(--font-size-caption);

    @media (max-width: 60rem) {
      display: none;
      visibility: hidden;
    }

    h3 {
      font-size: var(--font-size-body);
    }

    ul {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    a {
      display: block;
      position: relative;
      padding: 0.375rem 0;

      &:before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 0;
        height: 0;
        transform: translate(-50%, -50%);
        border-radius: 100%;
        background-color: var(--color);
        content: "";
        opacity: 0;
        transition:
          width 180ms var(--ease-elastic),
          height 180ms var(--ease-elastic),
          opacity 240ms var(--ease-fluid);
      }

      &.active {
        span {
          transform: translateX(0.75rem);
          color: var(--color-display);
          font-weight: 600;
        }

        &:before {
          width: 0.375rem;
          height: 0.375rem;
          opacity: 1;
        }
      }

      span {
        display: block;
        transition:
          transform 240ms var(--ease-fluid),
          color 240ms var(--ease-fluid),
          font-weight 240ms var(--ease-fluid);
      }
    }
  }
}
