---
import type { Props } from '../props';

import MobileTableOfContents from 'virtual:starlight/components/MobileTableOfContents';
import TableOfContents from 'virtual:starlight/components/TableOfContents';
---

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

<style>
	.right-sidebar-panel {
		padding: 1rem var(--sl-sidebar-pad-x);
	}
	.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 /* MAGIC NUMBER 🥲 */
				)
			);
		}
	}
</style>