.player-controls {
	padding: 1rem;
	border-top: 1px solid var(--color-c);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.control-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;

	button {
		background: none;
	}
}

.progress-container {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.time-container {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}
.track-info {
	margin-bottom: 0.5rem;
	text-align: center;
	font-weight: bold;
}

.progress-bar {
	position: relative;
	flex: 1;
	height: 8px;
	background-color: #ddd;
	cursor: pointer;
}

.buffered-fill,
.progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	cursor: pointer;
	background-color: #0cc069;
}

.progress-fill {
	background-color: #4a6da7;
	z-index: 1;
}

.volume-control {
	display: flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	gap: 0.5rem;
	min-width: 0;
	svg{
		flex-shrink: 0;
	}
	input {
		min-width: 0;
	}

}