---
import MobileTableOfContents from "./MobileTableOfContents.astro";
import TableOfContents from "./TableOfContents.astro";
---

{
  Astro.locals.starlightRoute.toc && (
    <>
      <div class="lg:sl-hidden">
        <MobileTableOfContents />
      </div>
      <div class="right-sidebar-panel sl-hidden lg:sl-block">
        <div class="sl-container">
          <TableOfContents />
        </div>
      </div>
    </>
  )
}

<style>
  @layer starlight.core {
    .right-sidebar-panel {
      /* padding-top: 1rem ; */
    }
    .sl-container {
      width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
    }
    .right-sidebar-panel :global(h2) {
      color: var(--sl-color-white);
      font-size: var(--sl-text-h5);
      font-weight: 600;
      line-height: var(--sl-line-height-headings);
      margin-bottom: 0.5rem;
    }
    .right-sidebar-panel :global(:where(a)) {
      display: block;
      font-size: var(--sl-text-xs);
      text-decoration: none;
      color: var(--sl-color-gray-3);
      overflow-wrap: anywhere;
    }
    .right-sidebar-panel :global(:where(a):hover) {
      color: var(--sl-color-white);
    }
    @media (min-width: 72rem) {
      .sl-container {
        max-width: calc(
          (
            (
                100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) -
                  2 * var(--sl-sidebar-pad-x)
              ) * 0.25 
          )
        );
      }
    }
  }
</style>
