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

:root {
	--sidebar-width-xl: 320px;
	--sidebar-width-lg: 288px;
	--sidebar-width-md: 256px;
	--sidebar-collapsed: 42px;
}

.c-sidebar {
	position: relative;
	z-index: 1;
	background-color: var(--color-common-white);
	border-right: 1px solid var(--color-gray-400);
	transition: transform var(--duration-normal) ease-in-out,
		visibility 0s var(--duration-normal) linear;

	@include mobile {
		display: none;
	}

	@include desktop {
		position: fixed;
		top: var(--header-height, --header-navigation-height);
		left: 0;
		width: var(--sidebar-width-xl);
	}

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

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

	@include min-width($breakpoint-md) {
		height: calc(100vh - var(--header-height, --header-navigation-height));
		padding-bottom: 42px;

		.c-sidebar--api & {
			padding-bottom: 0;
		}
	}

	&--api {
		--sidebar-width-lg: var(--sidebar-width-xl);
		--sidebar-width-md: var(--sidebar-width-xl);
	}

	&--hidden {
		display: none;
	}

	&--collapsed {
		transform: translateX(100%);

		@include desktop {
			transform: translateX(calc(-1 * var(--sidebar-width-xl) + var(--sidebar-collapsed)));
		}

		@include breakpoint-only($breakpoint-md, $breakpoint-lg) {
			transform: translateX( calc(-1 * var(--sidebar-width-md) + var(--sidebar-collapsed)));
		}

		@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
			transform: translateX( calc(-1 * var(--sidebar-width-lg) + var(--sidebar-collapsed)));
		}

		.c-sidebar__nav {
			visibility: hidden;
			transition: visibility 0s var(--duration-normal) linear;
		}

		.c-sidebar__toggle-button {
			.c-icon {
				transform: rotate(180deg);
			}
		}

		+ .l-layout__main {
			@include desktop {
				width: calc(100% - var(--toc-width-xl));
			}

			@include breakpoint-only($breakpoint-md, $breakpoint-lg) {
				width: 100%;
			}

			@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
				width: calc(100% - var(--toc-width-lg));
			}

			&.l-layout__main--no-toc {
				@include desktop {
					width: 100%;
				}

				@include breakpoint-only($breakpoint-lg, $breakpoint-xl) {
					width: 100%;
				}
			}
		}
	}

	&__nav {
		padding: var(--spacing-3) 0 0 0;

		@include min-width($breakpoint-md) {
			overflow-y: auto;
			overflow-x: hidden;
			overscroll-behavior: contain;
			height: calc(100vh - var(--header-height, --header-navigation-height) - 41px); /* Full height reduced by header height and sidebar footer height. */
			@include scrollbar;

			.c-sidebar--api & {
				height: calc(100vh - var(--header-height, --header-navigation-height)); /* Full height reduced by header height. */
				padding-bottom: 1rem;
			}
		}

		&--loading {
			opacity: 0;
			visibility: hidden;
		}
	}

	&__footer {
		position: sticky;
		bottom: 0;
		left: 0;
		right: 0;
		width: calc(100% - 1px);
		display: flex;
		justify-content: flex-end;
		background-color: var(--color-common-white);
		padding: 0;
		border-top: 1px solid var(--color-gray-400);
	}

	&__toggle-button {
		.c-icon {
			transition: transform var(--duration-normal) linear;
		}
	}
}
