:root {
	--nav-drawer-width: 256px;

	&[nav-drawer-auto-hide] #navigation-drawer {
		z-index: 2;
		position: absolute;
		height: 100%;
		box-shadow: var(--elevation-16);
	}

	&:not([nav-drawer-auto-hide]) #btn-menu {
		display: none;
	}

	&[is-navigation-drawer-collapsed] {
		#navigation-drawer__dim {
			transition: opacity 200ms;
		}

		#navigation-drawer {
			transition: margin-inline-start 200ms;
			margin-inline-start: calc(var(--nav-drawer-width) * -1 - 18px);
		}
	}
	&:not([is-navigation-drawer-collapsed])[nav-drawer-auto-hide] #navigation-drawer__dim {
		opacity: .5;
		pointer-events: all;
	}
}

#navigation-drawer__dim {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: rgb(0,0,0);
	z-index: 2;
	pointer-events: none;
	transition: opacity 250ms;
}

#window > #navigation-drawer {
	&.card {
		height: auto;
		margin: 0;
	}

	&.banner {
		&::after {
			top: calc(var(--titlebar-height) + var(--toolbar-height));
		}

		.window-top-bars {
			position: relative;
			color: white;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;

			&::after {
				content: "";
				position: absolute;
				width: 100%;
				bottom: 0;
				height: 56px;
				background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.15));
			}

			.window-top-bar {
				height: 56px;
				padding-top: 56px;
				box-sizing: unset;
			}	
		}

		&.separator {
			&::after {
				content: "";
				height: 1px;
				margin-block-start: -1px;
				background-color: rgb(230,230,230);

				@media (prefers-color-scheme: dark) {
					background-color: rgb(87,87,87);
				}
			}
		}
	}

	+ vbox {
		overflow: hidden;
	}
}

#navigation-drawer {
	position: relative;
	background: white;
	width: var(--nav-drawer-width);
	margin-inline-start: 0px;
	transition: margin-inline-start 250ms;

	@media (prefers-color-scheme: dark) {
		background: hsl(0, 0%, 22%);
	}

	&::after {
		content: "";
		position: absolute;
		right: -1px;
		top: 0;
		width: 1px;
		height: 100%;
		background: rgb(215,215,215);
		z-index: 2;

		@media (prefers-color-scheme: dark) {
			background: rgb(87,87,87);
		}
	}

	&:not(.rail) {
		&.item-radius {
			.item {
				height: 40px;
				border-radius: 4px;
				margin-inline: 8px;
				margin-block: 4px;
			}
		}	
	}
	
	&.card {
		height: fit-content;
		margin: 24px;
	}

	&.color {
		.item {
			&:not([disabled]) {
				&[selected] {
					background: color-mix(in srgb, var(--secondary-color, var(--primary-color)) 10%, transparent);
				}

				.ripple {
					background: color-mix(in srgb, var(--secondary-color, var(--primary-color)) 40%, transparent)
				}
			}
		}

		&:not(.item-radius) {
			.item {
				&:not([disabled]) {
					&:hover {
						background: color-mix(in srgb, var(--secondary-color, var(--primary-color)) 20%, transparent);
					}
				}
			}
		}
	}

	&.iconic {
		&.desktop {
			.item {
				&::before {
					width: 20px;
					height: 20px;
				}
			}
		}

		&.rail {
			width: 72px;
	
			h4 {
				display: none;
			}
	
			.item {
				border-radius: 50%;
				aspect-ratio: 1 / 1;
				height: auto;
				margin: 0;
	
				&::after {
					content: attr(label);
					margin-block-start: 6px;
					transition-property: margin, height, opacity;
					transition-duration: 100ms;
				}
			}
	
			&.iconic {
				.item {
					padding-inline: 0;
					justify-content: center;
					flex-direction: column;
	
					&::before {
						margin-inline-end: 0;
					}
	
					&[selected] {
						background: transparent;
					}
				}
	
				&.selected {
					.item {
						&:not([selected]) {
							&::after {
								margin-block-start: 0;
								height: 0;
								opacity: 0;
							}
						}
					}
				}
			}
	
			.window-top-bar {
				display: none;
			}
		}

		.item {
			&::before {
				content: "";
				width: 24px;
				height: 24px;
				margin-inline-end: 32px;
				mask-position: center;
				mask-size: contain;
				mask-repeat: no-repeat;
				background-color: rgba(0,0,0,.54);
				flex-shrink: 0;

				@media (prefers-color-scheme: dark) {
					background: rgba(255,255,255,.54);
				}
			}
		}
	}

	.navigation-items {
		padding-block: 8px;
		overflow-y: auto;
	}

	.item {
		all: unset;

		position: relative;
		overflow: hidden;
		align-items: center;
		flex-shrink: 0;

		transition: background-color 155ms;

		&:not([disabled]) {
			&:hover,
			&:focus-visible {
				background: rgba(153, 153, 153, .2);
			}

			.ripple {
				background: rgba(153, 153, 153, .4);
			}

			&[selected] {
				background: rgba(153, 153, 153, .1);
				color: var(--secondary-color, var(--primary-color));

				&::before {
					background: var(--secondary-color, var(--primary-color));
				}
			}
		}

		&::after {
			content: attr(label)
		}

		.button-box {
			display: none;
		}
	}

	h4,
	.item {
		display: flex;

		height: 48px;
		padding-inline: 16px;
	}

	separator {
		height: 1px;
		background-color: rgb(230,230,230);
		margin-block: 8px;
		flex-shrink: 0;

		@media (prefers-color-scheme: dark) {
			background-color: rgb(87,87,87);
		}
	}
}