.cover {
	--base-box-shadow-v-0: rgba(0, 0, 0, 0.15);
	--base-box-shadow-y-0: 1.2em;
	--base-box-shadow-r-0: 2em;
	--base-box-shadow-s-0: -0.6em;
	--base-box-shadow-v-1: rgba(0, 0, 0, 0.225);
	--base-box-shadow-y-1: 0.4em;
	--base-box-shadow-r-1: 2.4em;
	aspect-ratio: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	background-position: center;
	background-size: cover;
	/* border-radius: max(2%, 0.7vh); */
	filter: drop-shadow(
			var(--base-box-shadow-v-0) 0px var(--base-box-shadow-y-0)
				var(--base-box-shadow-r-0)
		)
		drop-shadow(
			var(--base-box-shadow-v-1) 0px var(--base-box-shadow-y-1)
				var(--base-box-shadow-r-1)
		);
	transform: scale(1);
	transition: background-image 0.5s linear, filter 0.5s ease, transform 0.5s
		cubic-bezier(0.3, 0.2, 0.2, 1.4);

	&.musicPaused {
		--base-box-shadow-v-0: rgba(0, 0, 0, 0.15);
		--base-box-shadow-y-0: 0.6em;
		--base-box-shadow-r-0: 1em;
		--base-box-shadow-s-0: -0.3em;
		--base-box-shadow-v-1: rgba(0, 0, 0, 0.225);
		--base-box-shadow-y-1: 0.2em;
		--base-box-shadow-r-1: 1.2em;
		transform: scale(var(--scale-level));
		transition: background-image 0.5s linear, filter 0.5s ease, transform 0.6s
			cubic-bezier(0.4, 0.2, 0.1, 1);
	}
}

.coverInner {
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-color: black;
	transition: background-image 0.5s linear;
}
