@use "@gloria/layout/_mixins.scss" as *;
@use "@gloria/base/_mixins.scss" as *;

:root {
	--toc-width-xl: 320px;
	--toc-width-lg: 288px;
	--toc-width-l: 256px;
}

.l-layout__main:has(.live-snippet--wide) + .c-toc {
	--toc-right: calc(((100vw - var(--snippet-max-width)) / 2) - var(--toc-width-xl) - var(--spacing-2));
 }

.c-toc {
	--toc-right: calc(((100vw - var(--container-max-width-thin)) / 2) - var(--toc-width-xl));
	position: fixed;
	z-index: var(--z-index-toc);
	top: var(--header-height, --header-navigation-height);
	bottom: 0;
	right: max(var(--toc-right), 0px);
	height: calc(100vh - var(--header-height, --header-navigation-height));
	width: 100%;

	@include breakpoint-only($breakpoint-sm, $breakpoint-lg) {
		width: var(--toc-width-lg);
	}

	@include max-width($breakpoint-lg) {
		display: none;
		background-color: var(--color-gray-200);
		box-shadow: calc(var(--spacing-1) * -1) var(--spacing-1) var(--spacing-2) 0 var(--color-secondary-800-alpha);
		overflow: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);

		@include scrollbar;

		@include mobile {
			top: var(--header-height, --header-navigation-height);
			overflow: auto;
			height: calc(100vh - var(--header-height, --header-navigation-height));
			@include scrollbar;
		}

		&.is-anim {
			&-entering,
			&-entered {
				transform: translateX(0);
			}

			&-exiting {
				transform: translateX(100%);
			}

			&-exited {
				transform: translateX(100%);
			}
		}
	}

	@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
		width: var(--toc-width-lg);
		display: block !important;
	}

	@include min-width($breakpoint-xl) {
		width: var(--toc-width-xl);
		display: block !important;
	}

	&--transition {
		transition: transform var(--duration-fast) ease-in-out;
	}

	&__secondary-navigation {
		padding: var(--spacing-9) var(--spacing-3) var(--spacing-3) var(--spacing-3);

		@include mobile {
			padding: var(--spacing-6) var(--spacing-4)
		}

		@include min-width($breakpoint-lg) {
			position: sticky;
			top: var(--header-height, --header-navigation-height);
			overflow: auto;
			overscroll-behavior: contain;
			height: calc(100vh - var(--header-height, --header-navigation-height));
			@include scrollbar;
		}
	}

	h3 {
		margin: 0;
		padding: var( --spacing-3 ) 0;
		font-family: var(--font-family-heading);
		font-size: var(--font-size-base);
		font-weight: bold;
		line-height: var(--line-height-base);
		color: var(--color-secondary-700);

		@include min-width($breakpoint-xl) {
			padding: var(--spacing-2) 0;
		}

		+ ol {
			margin-top: 0;
			padding-top: var(--spacing-4);

			@include min-width($breakpoint-xl) {
				padding-top: var(--spacing-3);
			}
		}
	}

	&__show-button {
		@include mobile {
			position: absolute;
			top: var(--header-height, --header-navigation-height);
			z-index: var(--z-index-toc-show-button);
			width: 40px;
		}

		&--sticky {
			@include mobile {
				position: fixed;
				top: 76px;
			}
		}
	}

	&__hide-button,
	&__show-button {
		color: var(--color-primary);
		background-color: var(--color-common-white);
		cursor: pointer;

		&:hover {
			text-decoration: underline;
		}

		@include mobile {
			font-size: var(--font-size-sm);
		}

		@include min-width($breakpoint-lg) {
			display: none;
		}
	}

	&__hide-button {
		position: absolute;
		z-index: 1;
		top: calc(var(--spacing-9) + var(--spacing-4));
		right: var(--spacing-3);
		background-color: transparent;
		border: none;
		font-size: var(--font-size-sm);

		@include mobile {
			top: var(--spacing-10);
			right: var(--spacing-4);
		}
	}

	ol {
		margin-left: 0;
		padding-left: 0;
		list-style: none;
	}

	ol ol {
		border-left: 1px solid var(--color-gray-400);
		margin-left: var(--spacing-3);
		margin-top: var(--spacing-3);
		margin-bottom: var(--spacing-3);
		padding-left: var(--spacing-3);
	}

	ol > li {
		&:not(:first-child) {
			margin-top: var(--spacing-2);
		}
	}

	ol a {
		display: block;
		padding: 0 var(--spacing-2);
		text-decoration: none;
		font-size: var(--font-size-sm);
		color: var(--color-secondary-700);

		&:hover,
		&.is-active {
			color: var(--color-primary);
		}

		&.is-active {
			-webkit-text-stroke-width: thin;
		}
	}
}
