.nowplaying {
	background: #bb0000;
	border-radius: 10px;
	padding: 0.5em;
	box-shadow:
		0 0 10px #bb0000,
		0 0 2px #000000;
	font-size: 0.5em;
	margin: 0 1em;
}

@keyframes bounce {
	10% {
		transform: scaleY(0.3); /* start by scaling to 30% */
	}

	30% {
		transform: scaleY(1); /* scale up to 100% */
	}

	60% {
		transform: scaleY(0.5); /* scale down to 50% */
	}

	80% {
		transform: scaleY(0.75); /* scale up to 75% */
	}

	100% {
		transform: scaleY(0.6); /* scale down to 60% */
	}
}

.trackProgress {
	@apply my-0.5 flex w-full items-center justify-center;

	.icon {
		position: relative;
		display: flex;
		justify-content: space-between;
		width: 13px;
		height: 13px;

		.musicbar {
			width: 3px;
			height: 100%;
			border-radius: 3px;
			animation: bounce 2.2s ease infinite alternate;
			content: "";
			&:nth-of-type(2) {
				animation-delay: -2.2s; /* Start at the end of animation */
			}

			&:nth-of-type(3) {
				animation-delay: -3.7s; /* Start mid-way of return of animation */
			}
		}
	}
}

.bar {
	@apply flex items-center gap-1 whitespace-nowrap;

	progress {
		@apply mx-auto w-10/12;
	}
}