.lyrics {
	position: fixed;
	top: 0;
	left: 0;

	z-index: 100;

	width: 100vw;
	height: 100vh;

	display: flex;
	flex-direction: column;

	&.stopped {
		.lyrics-video {
			filter: blur(6px);
		}
	}

	.lyrics-stopped-decorator {
		position: absolute;
		z-index: 100;

		top: 0;
		left: 0;

		width: 100vw;
		height: 100vh;

		padding: 35vh;

		opacity: 0.5;
		filter: grayscale(0.9);

		img {
			position: relative;
			width: 100%;
			height: 100%;

			object-fit: contain;
		}
	}

	.lyrics-background-color {
		position: absolute;

		z-index: 105;

		width: 100%;
		height: 100%;
	}

	.lyrics-background-wrapper {
		z-index: 110;
		position: absolute;

		top: 0;
		left: 0;

		width: 100vw;
		height: 100vh;

		backdrop-filter: blur(10px);

		.lyrics-background-cover {
			position: relative;

			z-index: 110;

			display: flex;
			flex-direction: column;

			align-items: center;
			justify-content: center;

			width: 100%;
			height: 100%;

			img {
				width: 40vw;
				height: 40vw;

				object-fit: cover;

				border-radius: 24px;
			}
		}
	}

	.lyrics-video {
		z-index: 120;
		position: absolute;

		top: 0;
		left: 0;

		width: 100vw;
		height: 100vh;

		object-fit: cover;

		transition: all 150ms ease-out;

		&.hidden {
			opacity: 0;
		}
	}

	.lyrics-text-wrapper {
		z-index: 200;
		position: fixed;

		bottom: 0;
		left: 0;

		padding: 60px;

		.lyrics-text {
			display: flex;
			flex-direction: column;

			width: 600px;
			height: 200px;

			padding: 20px;
			gap: 30px;

			overflow: hidden;

			background-color: rgba(var(--background-color-accent-values), 0.6);
			border-radius: 12px;

			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);

			.line {
				font-size: 2rem;

				opacity: 0.1;

				margin: 0;

				&.current {
					opacity: 1;
				}
			}
		}
	}

	.lyrics-player-controller-wrapper {
		position: fixed;
		z-index: 210;

		bottom: 0;
		right: 0;

		padding: 60px;

		transition: all 150ms ease-in-out;

		&.hidden {
			opacity: 0;
		}

		.lyrics-player-controller {
			position: relative;

			display: flex;
			flex-direction: column;

			align-items: center;

			gap: 10px;

			width: 300px;

			padding: 20px;

			border-radius: 12px;

			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);

			background-color: rgba(var(--background-color-accent-values), 0.8);

			transition: all 150ms ease-in-out;

			&:hover {
				gap: 20px;

				.player-controls {
					opacity: 1;
					height: 30px;
				}
			}

			.lyrics-player-controller-info {
				display: flex;
				flex-direction: column;

				width: 100%;

				gap: 5px;

				transition: all 150ms ease-in-out;

				overflow: hidden;

				.lyrics-player-controller-info-title {
					font-size: 1.4rem;
					font-weight: 600;

					width: 100%;

					color: var(--background-color-contrast);

					h4 {
						margin: 0;
					}

					.lyrics-player-controller-title-text {
						transition: all 150ms ease-in-out;

						width: 90%;

						overflow: hidden;

						// do not wrap text
						white-space: nowrap;

						&.overflown {
							opacity: 0;
							height: 0px;
						}
					}
				}

				.lyrics-player-controller-info-details {
					display: flex;
					flex-direction: row;
					width: 100%;

					align-items: center;

					gap: 7px;

					font-size: 0.7rem;

					font-weight: 400;

					// do not wrap text
					word-break: break-word;

					h3 {
						margin: 0;
					}
				}
			}

			.player-controls {
				opacity: 0;
				height: 0px;
				transition: all 150ms ease-in-out;
			}

			.toolbar_player_indicators_wrapper {
				position: absolute;

				display: flex;
				flex-direction: row;

				align-items: center;
				justify-content: center;

				width: 100%;
				padding: 4px;

				.toolbar_player_indicators {
					padding: 4px 6px;
					font-size: 0.9rem;

					border-radius: 8px;
				}
			}
		}
	}

	.videoDebugOverlay {
		position: fixed;

		top: 20px;
		right: 20px;

		z-index: 300;

		display: flex;

		flex-direction: column;

		padding: 10px;
		border-radius: 12px;

		background-color: rgba(var(--background-color-accent-values), 0.8);

		width: 200px;
		height: fit-content;

		transition: all 150ms ease-in-out;

		&.hidden {
			opacity: 0;
		}
	}
}

.lyrics-text .line .word.current-word {
	/* Styling for the currently active word */
	font-weight: bold;
	color: yellow; /* Example highlight */
}
