.audio-player {
	cursor: pointer;
	display: inline-block;
	border: 1px solid #369;
	border-radius: 0.5rem;
	overflow: hidden;
	background: #9cf;
	transition: color 0.25s, background-color 1s;
}
.audio-player.playing {
	background-color: #369;
	color: white;
}
.audio-player svg {
	fill: currentColor;
	width: 2.5rem;
	height: 2.5rem;
	display: block;
}

@keyframes audio-player-waves {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	10% {
		transform: scale(1);
		opacity: 1;
	}
	90% {
		transform: scale(2.5, 4);
		opacity: 0.8;
	}
	100% {
		transform: scale(3, 5);
		opacity: 0;
	}
}
.audio-player svg .wave {
	opacity: 0;
	transform-origin: 20% 50%;
	animation: 2s linear 0s infinite paused audio-player-waves;
}
.audio-player.playing svg .wave,
.audio-player.stopping svg .wave {
	animation-play-state: running;
}
.audio-player svg .wave.wave-1 { animation-delay: 0s; }
.audio-player svg .wave.wave-2 { animation-delay: 0.5s; }
.audio-player svg .wave.wave-3 { animation-delay: 1s; }
.audio-player svg .wave.wave-4 { animation-delay: 1.5s; }