@keyframes normal {
	0%{
		height: 20%;
	}
	50%{
		height: 40%;
	}
	100%{
		height: 20%;
	}
}
@keyframes loud {
	0%{
		height: 30%;
	}
	50%{
		height: 80%;

	}
	100%{
		height: 30%;
	}
}

.audio-container{
	background-color: var(--ov-accent-action-color);
	padding: 5px;
	max-width: 15px;
	max-height: 15px;
	height: 15px;
	width: 15px;
	border-radius: var(--ov-surface-radius);
	display: flex;
	justify-content: space-between;
}

.stick{
	margin: auto;
	height: 80%;
	width: 3px;
	background: var(--ov-text-primary-color);
	border-radius: 8px;
}

.pause {
	animation-play-state:paused;
	height: 1px;
}

.play {
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-play-state:running;
}


.normal{
	animation-name: normal;
}

.loud{
	animation-name: loud;
}
