.theme-drawer {
	position: absolute;
	transform: translateX(-100%);
	top: 0;
	background-color: var(--bs-body-bg);
	max-height: 100%;
	z-index: 1;
	&:hover {
		/*35px = first theme margin, 40px = theme padding * 2, 10px = theme margin*/
		max-height: calc(100% + 35px + var(--amount-themes) * (40px + 10px));
		transition: all calc(var(--amount-themes) * 0.1s) ease .3s; /*Only on opening*/
	}
	
}

@media screen and (max-width: 576px) {
	.theme-drawer {
		transform: translateX(0);
		right: 0;
	}
}

.theme {
	--color: white;
	--bg-color: black;
	padding: 20px;
	width: 20px;
	margin: 10px;
	background-color: var(--bg-color);
	border-radius: 50%;
	display: none;
	opacity: 0;
	position: relative;
	&:first-of-type {
		margin-top: 0;
		margin-bottom: 35px;
	}

	&.selected {
		opacity: 1;
		display: block;
		&:hover {
			animation: DownUpDown 0.4s ease forwards;
		}
		span {
			position: absolute;
			color: var(--color);
			right: 0;
			left: 0;
			top: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			pointer-events: none;
		}
	
	}

	&:not(.selected):hover, &:not(.selected):focus-within {
		cursor: pointer; 
		&::after {
			content: attr(data-label) "";
			position: absolute;
			transform: translateX(-120%) translateY(-50%);
			left: 0;
			display: flex;
			align-items: center;
			overflow: visible;
			padding: 3px 5px;
			border-radius: 3px;
			background-color: gray;
		}
	
	}
}

.theme-drawer:hover .theme,
.theme-drawer:focus-within .theme {
	display: block;
}

@keyframes DownUpDown {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}

	75% {
		transform: translateY(5px);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Staggered delay using nth-child */
.theme-drawer:hover .theme:nth-child(n+2):not(.selected),
.theme-drawer:focus-within .theme:nth-child(n+2):not(.selected) {
	animation: fadeInDown 0.2s ease forwards;
	animation-delay: calc((var(--theme-index, 0)) * 100ms + .3s);
}