.control-container {
	position: relative;
	grid-area: control;
	display: grid;
	grid-template-areas: "left center right";
	grid-template-columns: 1fr 2fr 1fr;
	padding: 0.625rem 1.5rem;
	background-color: var(--bg);
	> div {
		display: flex;
		align-items: center;
	}
	.material-symbols-outlined {
		cursor: pointer;
		transition: all ease-in-out 0.2s;
		color: var(--text-muted);
	}
	.left {
		grid-area: left;
		display: flex;
		align-items: center;
		gap: 0.9375rem;
		overflow: hidden;
		opacity: 0;
		transition: all 0.2s;
		width: 100%;
		img {
			width: 3.125rem;
			height: 3.125rem;
			object-fit: cover;
			border-radius: 0.3125rem;
		}
		.track-info {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			gap: 0.625rem;
			min-width: 10%;
			max-width: 70%;
			p {
				width: 100%;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
	.btn {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		.label {
			position: absolute;
			top: -2.8125rem;
			padding: 0.5rem 0.75rem;
			background-color: var(--bg-light);
			border-radius: 0.25rem;
			opacity: 0;
			transition: all ease-in-out 0.2s;
			pointer-events: none;
			white-space: nowrap;
		}
		span {
			&:hover {
				+ {
					.label {
						opacity: 1;
						transition-delay: 0.5s;
					}
				}
			}
		}
	}
	.center {
		grid-area: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.5rem;
		.actions {
			display: flex;
			align-items: center;
			gap: 0.9375rem;
			.play_btn {
				font-size: 2.5rem;
				color: var(--text);
			}
			span {
				font-size: 1.5625rem;
			}
		}
		.position {
			display: flex;
			align-items: center;
			gap: 0.875rem;
			width: 70%;
			min-width: 21.875rem;
		}
	}
	.position-bar {
		-webkit-appearance: none;
		appearance: none;
		width: 100%;
		cursor: pointer;
		outline: none;
		border-radius: 0.9375rem;
		height: 0.3125rem;
		transition: all 0.2s ease-in-out;
		background: linear-gradient(to right, var(--primary) 0%, var(--text-muted) 0%);
		&::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			height: 0.9375rem;
			width: 0.9375rem;
			background-color: var(--active-text);
			border-radius: 50%;
			border: none;
			transition: 0.2s ease-in-out;
			opacity: 0;
		}
		&:hover {
			&::-webkit-slider-thumb {
				opacity: 1;
			}
		}
		&:-webkit-slider-runnable-track {
			background-color: var(--text-muted);
		}
		&:-moz-range-track {
			background-color: var(--text-muted);
		}
	}
	.volume-bar {
		-webkit-appearance: none;
		appearance: none;
		width: 4.375rem;
		cursor: pointer;
		outline: none;
		border-radius: 0.9375rem;
		height: 0.3125rem;
		transition: all 0.2s ease-in-out;
		background: linear-gradient(to right, var(--primary) 0%, var(--text-muted) 0%);
		&::-webkit-slider-thumb {
			color: #fff;
			opacity: 0;
		}
		&:hover {
			&::-webkit-slider-thumb {
				opacity: 1;
			}
		}
		&:-webkit-slider-runnable-track {
			background-color: var(--text-muted);
		}
		&:-moz-range-track {
			background-color: var(--text-muted);
		}
	}
	.right {
		grid-area: right;
		display: flex;
		justify-content: flex-end;
		gap: 0.9375rem;
	}
}

@media (max-width: 768px) {
	.control-container {
		grid-template-columns: 1fr 2fr 1fr;
		padding: 0.5rem 0.5rem;
		gap: 0.5rem;
		.left,
		.center,
		.right {
			min-width: 0;
		}
	}
	.non-essential {
		display: none !important;
	}
	.important {
		display: flex !important;
		align-items: center;
	}
	.center .actions {
		gap: 0.5rem;
	}
	.center .btn.important span {
		font-size: 2rem;
	}
	.left.important img {
		width: 2.2rem;
		height: 2.2rem;
	}
	.track-info.important {
		max-width: 100px;
		p.title {
			font-size: 1rem;
		}
	}
}

@media (max-width: 480px) {
	.control-container {
		grid-template-columns: 1fr 2fr 1fr;
		padding: 0.25rem 0.25rem;
		gap: 0.25rem;
	}
	.track-info.important {
		max-width: 60px;
		p.title {
			font-size: 0.9rem;
		}
	}
	.center .btn.important span {
		font-size: 1.5rem;
	}
	.left.important img {
		width: 1.5rem;
		height: 1.5rem;
	}
}
