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

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

.api-toc {
	position: fixed;
	z-index: var(--z-index-toc);
	top: var(--header-height, --header-navigation-height);
	bottom: 0;
	right: 0;
	height: calc(100vh - var(--header-height, --header-navigation-height));
	width: 100%;

	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;

	@include breakpoint-only($breakpoint-sm, $breakpoint-lg) {
		width: var(--api-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(--api-toc-width-lg);
		display: block !important;
	}

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

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

	&__content {
		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;
		}

		dd {
			margin-inline-start: var(--spacing-1);
		}

		.b-link {
			text-decoration: none;
		}

		code {
			font-family: var(--font-family-monospace);
			font-weight: var(--font-weight-regular);
			font-size: var(--font-size-sm);
			line-height: var(--line-height-md);
		}
	}

	&__heading {
		margin-bottom: var(--spacing-3);
		font-size: 1rem;
		font-weight: var(--font-weight-bold);
		color: var(--color-secondary-700);

		:not(:first-child) {
			margin-top: var(--spacing-3);
		}
	}

	&__list {
		list-style: none;
		margin: 0 0 0 var(--spacing-1);
		padding: 0;
		overflow: hidden;
		transition: height var(--duration-normal) var(--smootherstep);

		&-button {
			margin-bottom: var(--spacing-3);
			margin-top: var(--spacing-3);

			&-icon {
				transition: transform var(--duration-normal) ease;
			}

			&--open {
				.api-toc__list-button-icon {
					transform: rotate(90deg);
				}
			}
		}

		&-item {

			&__link {
				text-decoration: none;

				code {
					font-family: var(--font-family-monospace);
					font-weight: var(--font-weight-regular);
					font-size: var(--font-size-sm);
					line-height: var(--line-height-md);
				}
			}

			&-label {
				font-family: var(--font-family-monospace);
				font-size: 80%;
				font-weight: var(--font-weight-regular);
				color: var(--color-secondary-700);
			}
		}

		&.is-empty {
			&:before {
				content: "No items to display for the current filtering criteria.";
				display: block;
				margin: var(--spacing-4) 0;

				font-family: var(--font-family-text);
				font-weight: var(--font-weight-thin);
				font-size: var(--font-size-xs);
				line-height: var(--line-height-base);
				letter-spacing: var(--letter-spacing-base);
				color: var(--color-text-primary);
				font-style: italic;
			}

			> * {
				display: none;
			}
		}
	}


	&__show-button {
		position: fixed;
		z-index: var(--z-index-toc-show-button);
		width: 40px;

		@include mobile {
			top: var(--header-height, --header-navigation-height);
		}
	}

	&__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);
		}
	}
}
