.mask {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 30;
}

.mask.obscure {
	background: hsl(from var(--back-3) h s l / 50%);
	-webkit-backdrop-filter: blur(1.2rem);
	backdrop-filter: blur(1.2rem);
}

.mask.hidden {
	display: none;
}

.dropdown * {
	transition-duration: 0.25s;
	transition-timing-function: var(--spring-easing);
}

.dropdown [data-toggle="dropdown"] {
	padding-inline: 0;
	height: 100%;
}

.dropdown .title {
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	padding: 0;
	margin: 0;
	height: 100%;
	display: grid;
	grid-auto-flow: column;
	justify-items: start;
	align-items: center;
}

.dropdown .title:hover {
	text-decoration: inherit;
	text-decoration-thickness: inherit;
	text-underline-offset: inherit;
	text-decoration-color: inherit;
}

.dropdown .title i {
	margin-bottom: 0.25em;
}

.dropdown-menu {
	background: var(--back-1);
	box-shadow: var(--shadow);
	border: var(--border);
	border-radius: var(--radius);
	padding-block: 0.25rem;
	overflow: hidden;
	padding-inline: 0;
}

.dropdown.open {
	z-index: 500;
}

.dropdown .dropdown-menu {
	left: calc(-1 * (var(--radius) + var(--border-1)));
}

.dropdown-menu > * {
	height: unset;
	padding: 0;
	width: 100%;
	transition-property: background-color;
	transition-duration: 0s;
}

.dropdown-menu > *:hover {
	background-color: var(--yellow-300);
	text-decoration: none;
}

.dropdown-menu > li > a {
	display: block;
	padding-block: 0.5rem;
	padding-inline: 1rem;
	width: 100%;
}

.dropdown-menu a:hover {
	text-decoration: none;
}

.dropdown:not(.open) .dropdown-menu {
	display: block;
	opacity: 0;
	transform: translateY(-2rem);
	pointer-events: none;
}

.dropdown:not(.open) .dropdown-menu * {
	padding-block: 0;
	opacity: 0;
}