/**
 * Background music player — 100% match to React BackgroundMusicPlayer.
 * Uses theme CSS variables (--background, --gold, --muted-foreground, --ring) from main.css.
 */

/* Wrapper: fixed bottom-6 left-6 z-50 (same as React) */
#jemrock-music-player {
	position: fixed;
	bottom: 1.5rem;
	left: 1.5rem;
	z-index: 50;
}

/* Button: React Button variant="outline" size="icon" + overrides (h-12 w-12 rounded-full bg-background/80 backdrop-blur-sm border-gold/30 hover:bg-gold/20 hover:border-gold shadow-lg) */
.jemrock-music-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 3rem;
	height: 3rem;
	padding: 0;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 500;
	color: hsl(var(--gold));
	background-color: hsl(var(--background) / 0.8);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border: 1px solid hsl(var(--gold) / 0.3);
	border-radius: 9999px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.3s;
}

.jemrock-music-toggle:hover {
	background-color: hsl(var(--gold) / 0.2);
	border-color: hsl(var(--gold));
}

.jemrock-music-toggle:focus {
	outline: none;
}

.jemrock-music-toggle:focus-visible {
	box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.jemrock-music-toggle:disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* Icons: h-5 w-5 (1.25rem), pointer-events-none, shrink-0 */
.jemrock-music-svg {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	pointer-events: none;
}

.jemrock-music-svg--playing {
	color: hsl(var(--gold));
}

.jemrock-music-svg--paused {
	color: hsl(var(--muted-foreground));
}

/* Toggle visibility by state */
#jemrock-music-player .jemrock-music-icon-playing.hidden,
#jemrock-music-player .jemrock-music-icon-paused.hidden {
	display: none !important;
}

#jemrock-bg-audio {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}