src/components/TOC.module.scss
/**
  TOC
  TODO: The styles used here reproduce the used theme appearance. Customize to Arcjet's design.
*/

.TOC {
  .NavDesktop {
    padding: calc(var(--sp) * 5) calc(var(--sp) * 4);

    .Switcher {
      margin-bottom: calc(var(--sp) * 3);

      display: flex;
      flex-flow: column;
      row-gap: calc(var(--sp) * 0.5);
    }

    .OnThisPageLabel {
      margin-bottom: calc(var(--sp) * 0.5);
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin: 0;
        padding: 0;

        a {
          --pad-inline: 0.5rem;
          border-radius: calc(var(--sp) * 0.5);
          padding-block: 0.25rem;

          padding-inline: var(--pad-inline) var(--pad-inline);
          margin: calc(var(--sp) * 0.2) 0;
          margin-left: calc(1rem * var(--depth));

          line-height: 1.25;
          display: block;
          font-size: var(--sl-text-xs);
          text-decoration: none;
          color: var(--aj-palette-txt-tertiary);
          overflow-wrap: anywhere;

          &:hover,
          &:focus {
            background: var(--sidebar-link-hoverBg);
            color: var(--aj-palette-txt-tertiary);
          }

          &:active {
            background: var(--sidebar-link-activeBg);
          }

          &.Selected {
            color: var(--aj-palette-txt-primary);
            background: var(--sidebar-link-selectedBg);
          }
        }
      }
    }
  }

  .NavMobile {
    position: fixed;
    z-index: var(--sl-z-index-toc);
    border: none;
    background-color: rgba(var(--colorBgRgb) / 0.4);
    backdrop-filter: blur(var(--blur1));
    right: 0;
    left: 0;

    inset-inline-start: var(--sl-content-inline-start, 0);
    top: var(--Header-height);
    padding-top: calc(var(--sp) * 3);

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50%;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(
        rgba(var(--colorBgRgb) / 1) 8px,
        rgba(var(--colorBgRgb) / 0)
      );
    }

    & > * {
      position: relative;
      z-index: 10;
    }

    summary {
      gap: calc(var(--sp) * 2);
      align-items: center;
      height: auto;
      border: 0px;
      padding: calc(var(--sp) * 1) var(--sl-content-pad-x) calc(var(--sp) * 3);
      font-size: var(--sl-text-xs);
      outline-offset: var(--sl-outline-offset-inside);
    }

    & :global {
      .toggle {
        flex-shrink: 0;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        border-radius: 0.5rem;
        padding-block: 0.5rem;
        padding-inline-start: 0.75rem;
        padding-inline-end: 0.5rem;
        line-height: 1;
        background: var(--aj-palette-block-level2-blurBg);
        user-select: none;
        cursor: pointer;

        transition: all var(--time-sm) var(--easing-default);

        &:hover,
        &.open {
          background: var(--aj-palette-block-level3-blurBg);
          color: var(--sl-color-white);
          border-color: var(--sl-color-gray-2);
        }

        &:active {
          opacity: 0.8;
        }

        &.open svg {
          transform: rotateZ(90deg);
        }
      }

      .display-current {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: var(--sl-color-white);
      }

      .dropdown {
        margin-top: calc(-1 * var(--border-top));
        max-height: calc(
          85vh - var(--sl-nav-height) - var(--sl-mobile-toc-height)
        );
        overflow-y: auto;
        overscroll-behavior: contain;

        background: transparent;
        border: 0px;

        padding: 0 var(--sl-content-pad-x) calc(var(--sp) * 3);
      }
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      --depth: 0; // Overridden dynamically

      li {
        margin: 0;
        padding: 0;

        a {
          display: flex;
          justify-content: space-between;
          gap: var(--pad-inline);
          border: 0px;
          border-radius: 0;
          color: var(--aj-palette-txt-tertiary);
          font-size: var(--sl-text-sm);
          text-decoration: none;
          outline-offset: var(--sl-outline-offset-inside);

          line-height: 1.25;

          padding: calc(var(--sp) * 1) calc(var(--sp) * 1);
          margin: calc(var(--sp) * 0.2) 0;
          margin-left: calc(1rem * var(--depth));

          border-radius: calc(var(--sp) * 0.5);

          outline: none;

          &:after {
            content: "";
          }

          &:hover,
          &:focus {
            background: var(--sidebar-link-hoverBg);
            color: var(--aj-palette-txt-tertiary);
          }

          &:active {
            background: var(--sidebar-link-activeBg);
          }

          &.Selected {
            color: var(--aj-palette-txt-primary);
            background: var(--sidebar-link-selectedBg);

            &:after {
              width: 1rem;
              background-color: var(--sl-color-text-accent);
              -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==);
              mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==);
              -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
              flex-shrink: 0;
            }
          }
        }
      }
    }
  }
}
