.player {
	margin-block: 1em;

	display: grid;
	grid-template:
		"audio visualizer" 40px
		"meta visualizer" 1.1lh
		"details details" auto
		/ 1fr 1fr;

	column-gap: 1em;
}

.player canvas {
	image-rendering: crisp-edges;
}

.player audio {
	/* filter: invert(88%) sepia(28%) saturate(327%) hue-rotate(65deg) brightness(103%) contrast(105%); */
	filter: invert(86%) sepia(96%) saturate(175%) hue-rotate(50deg) brightness(95%) contrast(103%);
	/* border-radius: 4px; */
	border-radius: 0;

	height: 40px;
	width: 100%;
}

.player .info {
	grid-area: meta;
	display: flex;
	justify-content: end;
}

.player .info h2 {
	visibility: hidden;
}

.player .info *,
.player summary * {
	font-size: 1em;
	margin: 0;
	display: inline;
}

.player .info time {
	opacity: 0.5;
	height: 1lh;
	align-self: end;
}

.player .visualizer {
	width: 100%;
	height: 100%;

	grid-area: visualizer;
}

.player details {
	grid-area: details;
	height: 1lh;
	/* chrome-only for now */
	interpolate-size: allow-keywords;
	transition: height 0.2s ease-in-out;
}

.player summary {
	transform: translateY(-100%);
	max-width: 35%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.player details[open] {
	height: auto;
}

.player details p:first-of-type {
	margin-top: 0;
}
.player details p {
	margin-left: 1em;
}

@media (width < 576px) {
	.player {
		grid-template:
			"visualizer" 1lh
			"audio" 40px
			"meta" auto
			"details" auto
			/ 1fr;
	}
	.player .visualizer {
		height: 100% !important;
	}

	.player summary {
		max-width: 80%;
	}
}