/* song.css — the <cherry-song> player (was src/components/song/song.css) */

cherry-song {
	display: block;
}

:root {
	--song-height: 4em;
	--song-width: 100%;
	--song-fill: var(--entry-fill);
	--song-play-size: 2.4em;
	--song-playbar-track-fill: #333;
	--song-playbar-progress-fill: deeppink;
	--song-playbar-height: 0.5em;
	--song-play-highlight-color: white;
}

.song {
	--song-play-fill: color-mix(in srgb, var(--song-fill), white 64%);
	--song-play-shadow-color: color-mix(in srgb, var(--song-fill), black 2%);
	--song-play-icon-fill: var(--song-playbar-progress-fill);
	font-size: 1rem;
	height: var(--song-height);
	width: var(--song-width);
	margin: auto;
	display: flex;
	place-items: center;
	place-content: space-between;
	img {
		margin: 0;
		width: var(--song-height);
		height: var(--song-height);
	}
	overflow: hidden;
	background: var(--song-fill);

	figcaption {
		background: black;
		color: white;
		font-family: var(--mono-family);
		margin-right: 0.825em;
		padding: 4px;
		font-size: 0.7em;
		border-radius: 12px;
	}
}

.song img ~ .song-player {
	margin-inline: 0.825em;
}

.song-player {
	width: 100%;
}

@keyframes fades {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.song-player--audio {
	animation: fades forwards 5s ease-in;
	border-radius: 100px;
	background: white;
	color: black;
	box-shadow:
		2px 2px purple,
		-2px -2px yellow;
}

.song-player--pretty {
	animation: fades forwards 0.1s linear;
	height: var(--song-height);
	display: flex;
	place-content: center;
	place-items: center;
	gap: 0.825em;
}

.song-player__play {
	padding: 0;
	border: 0;
	width: var(--song-play-size);
	height: var(--song-play-size);
	border-radius: var(--song-play-size);
	background: var(--song-play-fill);
	display: flex;
	text-align: center;
	place-content: center;
	place-items: center;
	box-shadow:
		inset 1px 1px var(--song-play-highlight-color),
		1px 1px var(--song-play-shadow-color),
		2px 2px var(--song-play-shadow-color),
		3px 3px var(--song-play-shadow-color);
	position: relative;
	&[aria-label="play"]:hover {
		translate: -1px -1px;
		box-shadow:
			inset 1px 1px var(--song-play-highlight-color),
			1px 1px var(--song-play-shadow-color),
			2px 2px var(--song-play-shadow-color),
			3px 3px var(--song-play-shadow-color),
			4px 4px var(--song-play-shadow-color);
	}
	&[aria-label="pause"]:active,
	&[aria-label="pause"],
	&[aria-label="pause"]:hover,
	&:active,
	&:active:hover {
		translate: 2px 2px;
		box-shadow:
			inset 1px 1px var(--song-play-shadow-color),
			inset 2px 2px var(--song-play-shadow-color);
	}
	&[aria-label="pause"]:not(:active) {
		box-shadow: inset 1px 1px var(--song-play-shadow-color);
		translate: 1px 1px;
	}
	svg {
		font-size: 1em;
		fill: var(--song-play-icon-fill);
		height: 1em;
	}
	&[aria-label="play"] svg {
		margin-left: 4px;
	}
}

.song-player__meta {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: calc(6px + 1em);
}

.song-player__times {
	display: flex;
	place-content: space-between;
	place-items: flex-end;
	padding: 4px 2px;
	opacity: 0.64;
	font-size: 12px;
}

.song-playbar {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	user-select: none;
	touch-action: none;
}

.song-playbar__track {
	background-color: var(--song-playbar-track-fill);
	position: relative;
	height: var(--song-playbar-height);
	width: 100%;
	border-radius: 1em;
	overflow: hidden;
	opacity: 0.5;
	transition: opacity 0.5s linear;
	.song-playbar--canplay & {
		opacity: 0.8;
	}
	.song-playbar--canplaythrough & {
		opacity: 1;
	}
}

.song-playbar__fill {
	position: absolute;
	background-color: var(--song-playbar-progress-fill);
	height: 100%;
}

.song-playbar__thumb {
	display: block;
	width: 2px;
	height: calc(var(--song-playbar-height) - 2px);
	top: 1px;
	&:focus {
		outline: 1px solid white;
		background: var(--song-playbar-progress-fill);
	}
}

/* the playbar (kobalte's slider positioned these inline) */
.song-playbar__fill {
	left: 0;
}
.song-playbar__thumb {
	position: absolute;
	transform: translateX(-50%);
	cursor: pointer;
}
.song-playbar {
	cursor: pointer;
}