styles.scss

@use "React/Components/App/App";
@use "React/Components/Header/Header";
@use "React/Components/Search/Search";

@keyframes marquee {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}

.soundscapesroot {
	position: relative;

	&:hover {
		.soundscapesroot-player {
			opacity: 1;
		}
	}

	&.soundscapesroot--hideyoutube {
		.soundscapesroot-player {
			display: none;
		}
	}

	.soundscapesroot-player {
		position: absolute;
		left: 40px;
		bottom: 110%;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.5s;
	}

	button {
		cursor: pointer;
	}

	.soundscapesroot-previousbutton {
		margin-right: 4px;
	}

	.soundscapesroot-nextbutton {
		margin-left: 4px;
	}

	.soundscapesroot-changesoundscapebutton {
		margin-left: 4px;
		position: relative;
	}

	.soundscapesroot-changesoundscapeselect {
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.soundscapesroot-nowplaying {
		margin: 0 12px;
		width: 150px;
		overflow: hidden;
		white-space: nowrap;

		.soundscapesroot-nowplaying-text {
			display: inline-block;
			animation: marquee 10s linear infinite;
		}

		&.soundscapesroot-nowplaying--noscroll {
			width: auto;
			.soundscapesroot-nowplaying-text {
				animation: none;
			}
		}
	}
}

input.soundscapes-validation-error {
	border-color: #fb464c;
}

button.soundscapes-button-disabled {
	opacity: 0.5;
}