---
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>