@keyframes speaker-bounce-part1 {
	to {
		transform: scale(1.2);
	}
}

@keyframes speaker-bounce-part2 {
	to {
		transform: scale(0.85);
	}
}

@keyframes speaker-bounce-part3 {
	to {
		transform: scale(1);
	}
}

.volumeControl {
	display: flex;
	align-items: center;
	flex-direction: row;
	margin-left: -12px;
	margin-right: -8px;
}

.volumeControl > svg {
	opacity: 0.5;
}

.speakerAnimate :global(.speaker-bounce-1) {
	animation:
		speaker-bounce-part1 0.2s ease-in-out 0s forwards,
		speaker-bounce-part2 0.2s ease-in-out 0.2s forwards,
		speaker-bounce-part3 0.2s ease-in-out 0.4s forwards;
	transform-origin: center;
}

.speakerAnimate :global(.speaker-bounce-2) {
	animation:
		speaker-bounce-part1 0.2s ease-in-out 0.05s forwards,
		speaker-bounce-part2 0.2s ease-in-out 0.25s forwards,
		speaker-bounce-part3 0.2s ease-in-out 0.45s forwards;
	transform-origin: center;
}

.speakerAnimate :global(.speaker-bounce-3) {
	animation:
		speaker-bounce-part1 0.2s ease-in-out 0.1s forwards,
		speaker-bounce-part2 0.2s ease-in-out 0.3s forwards,
		speaker-bounce-part3 0.2s ease-in-out 0.5s forwards;
	transform-origin: center;
}

.speakerAnimate :global(.speaker-bounce-4) {
	animation:
		speaker-bounce-part1 0.2s ease-in-out 0.15s forwards,
		speaker-bounce-part2 0.2s ease-in-out 0.35s forwards,
		speaker-bounce-part3 0.2s ease-in-out 0.55s forwards;
	transform-origin: center;
}
