:root {
	color-scheme: light dark;

	--bg: Canvas;
	--bg-layer: color-mix(currentColor 5%, transparent);
	--bg-highlight: Highlight;

	--border-subtle: 1px solid color-mix(currentColor 10%, transparent);
	--border-text: 1px solid color-mix(currentColor 10%, transparent);
	--border: 1px solid color-mix(currentColor 25%, transparent);

	--text-highlight: HighlightText;
	--text: CanvasText;

	--accent-red: red;
	--accent-orange: orange;
	--accent-green: lime;

	--font-size: 1rem;
	--font-family: ui-sans-serif, system-ui, sans-serif;
	--font-family-monospace: ui-monospace, monospace;

	--icon-size: 16px;

	--radius-sm: 0px;
	--radius-md: 0px;

	--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

	--button-press-scale-x: 1.25;
	--button-press-scale-y: 0.75;
	--button-hover-duration: 350ms;
	--button-press-duration: 75ms;

	--viewport-inset-top: env(safe-area-inset-top, 0px);
	--viewport-inset-right: env(safe-area-inset-right, 0px);
	--viewport-inset-bottom: env(safe-area-inset-bottom, 0px);
	--viewport-inset-left: env(safe-area-inset-left, 0px);
	--viewport-inline-size: calc(
		100dvw -
		var(--viewport-inset-left) -
		var(--viewport-inset-right)
	);
	--viewport-block-size: calc(
		100dvh -
		var(--viewport-inset-top) -
		var(--viewport-inset-bottom)
	);
}

html.rounded-corners {
	--radius-sm: 2px;
	--radius-md: 4px;
}

@supports (corner-shape: squircle) {
	html.rounded-corners {
		--radius-sm: 4px;
		--radius-md: 8px;
	}
}

html {
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	overscroll-behavior: none;

	font-size: clamp(0.5rem, var(--font-size), 2rem);
	font-family: var(--font-family);
	line-height: revert; /* revert modern-normalize's line-height */

	/* biome-ignore lint/suspicious/noShorthandPropertyOverrides: Progressive enhancement */
	/* biome-ignore lint/a11y/useGenericFontNames: Apple system font */
	font: -apple-system-body;
}

body {
	background-color: var(--bg);
	color: var(--text);
	block-size: 100dvh;
	inline-size: 100dvw;
	padding: env(safe-area-inset-top) env(safe-area-inset-right)
		env(safe-area-inset-bottom) env(safe-area-inset-left);
}

:is(small, .text-footnote) {
	font-size: smaller;
	opacity: 0.75;
}

html.transparent-borders {
	--border: none;
	--border-subtle: none;
}

html.transparency .scroll-fade {
	--scroll-fade-size: 1.5rem;
	--scroll-fade-top-offset: 0px;
	--scroll-fade-top: 0px;
	--scroll-fade-bottom: 0px;
	mask-image: linear-gradient(
		to bottom,
		black 0,
		black var(--scroll-fade-top-offset),
		transparent var(--scroll-fade-top-offset),
		black
			calc(
				var(--scroll-fade-top-offset) +
				min(var(--scroll-fade-size), var(--scroll-fade-top))
			),
		black calc(100% - min(var(--scroll-fade-size), var(--scroll-fade-bottom))),
		transparent
	);
}

button:not(.no-touch-target),
input,
select {
	position: relative;

	&::after {
		content: "";
		position: absolute;
		inset: -0.25rem;
	}
}

button:not(.native) {
	color: inherit;
	font: inherit;
	background: none;
	border: none;
	padding: 0;
}

.artwork {
	background-color: color-mix(currentColor 10%, transparent);
}

.artwork-image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

:is(.artwork, .artwork-image) {
	border-radius: var(--radius-sm);
	corner-shape: squircle;
}

button.pressable--gentle {
	--button-press-scale-x: 1.05;
	--button-press-scale-y: 0.95;
	--button-hover-duration: 300ms;
	--button-press-duration: 50ms;
}

html.motion {
	&.dynamic-colors {
		body,
		#queue .head {
			transition: background-color 300ms var(--ease-out-cubic);
		}
	}

	img.image-loading {
		visibility: hidden;
	}

	button:where(.pressable, :has(> .icon)) {
		transform-origin: var(--button-transform-origin, center);
		transition:
			transform var(--button-hover-duration) var(--ease-out-quart),
			opacity var(--button-hover-duration) var(--ease-out-quart);
	}

	button:where(.pressable, :has(> .icon)):not(:disabled):not(
			:where(.pressable--gentle)
		):hover,
	button.pressable.focused:not(:disabled, :active, .pressable--gentle) {
		transform: scale(1.125);
	}

	button:where(.pressable, :has(> .icon)):not(:disabled):active {
		transform: scaleX(var(--button-press-scale-x))
			scaleY(var(--button-press-scale-y));
		opacity: 0.5;
		transition-duration: var(--button-press-duration);
		transition-timing-function: ease-out;
	}

	button.is-activated {
		animation: button-activation
			calc(var(--button-hover-duration) + var(--button-press-duration)) ease-out;
	}

	button.pressable--gentle.is-activated {
		animation-name: button-activation-gentle;
	}

	.progress-bar.is-activated:not(.disabled) {
		animation: progress-bar-activation
			calc(var(--button-hover-duration) + var(--button-press-duration) - 35ms)
			ease-out;
	}
}

@keyframes button-activation {
	17.65% {
		transform: scaleX(var(--button-press-scale-x))
			scaleY(var(--button-press-scale-y));
		animation-timing-function: var(--ease-out-quart);
	}
}

@keyframes button-activation-gentle {
	14.29% {
		transform: scaleX(var(--button-press-scale-x))
			scaleY(var(--button-press-scale-y));
		animation-timing-function: var(--ease-out-quart);
	}
}

@keyframes progress-bar-activation {
	16% {
		transform: scaleY(var(--progress-press-scale, var(--button-press-scale-y)));
		animation-timing-function: var(--ease-out-quart);
	}
}

@keyframes pop-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
}

#app {
	display: grid;
	grid-template-areas:
		"sidebar queue"
		"sidebar controls";
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	block-size: 100%;
	inline-size: 100%;
}

#queue {
	grid-area: queue;
}

#controls {
	grid-area: controls;
}

#sidebar {
	grid-area: sidebar;
	position: relative;
	display: flex;
	flex-direction: column;
	border-inline-end: var(--border);
}

@media (width <= 32rem) {
	#sidebar {
		display: contents;
	}
	.now-playing-container {
		grid-area: nowplaying;
	}
	html:not(.miniplayer) #now-playing {
		border-block-start: var(--border);
	}
	#app {
		overflow: hidden;
		grid-template-areas:
			"main"
			"nowplaying"
			"controls";
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 1fr auto auto;
	}
	#library,
	#queue {
		grid-area: main;
		min-inline-size: 0;
	}
	#library {
		transform: translateX(-100%);
		visibility: hidden;
	}
	html.show-library-mobile {
		#library {
			transform: translateX(0);
			visibility: visible;
		}
		#queue {
			transform: translateX(100%);
			visibility: hidden;
		}
	}
	html:dir(rtl) {
		&:not(.show-library-mobile) #library {
			transform: translateX(100%);
		}
		&.show-library-mobile #queue {
			transform: translateX(-100%);
		}
	}
	html:not(.show-library-mobile) #library,
	html.show-library-mobile #queue {
		pointer-events: none;
	}
	html.motion {
		:is(#library, #queue) {
			transition:
				transform 250ms var(--ease-out-cubic),
				visibility 250ms linear;
		}
	}
}

html.miniplayer :is(#sidebar, .now-playing-container) {
	display: contents;
}

html.miniplayer #app {
	grid-template-areas:
		"nowplaying"
		"controls";
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto;
}

html.miniplayer #now-playing {
	grid-area: nowplaying;
}

html.miniplayer #library,
html.miniplayer #queue {
	display: none;
}

html.window-controls-overlay {
	--viewport-inset-top: max(
		env(safe-area-inset-top, 0px),
		calc(env(titlebar-area-y, 0px) + env(titlebar-area-height, 0px))
	);
}

html.window-controls-overlay :is(#queue, #library),
html.miniplayer.window-controls-overlay #now-playing {
	margin-block-start: calc(
		var(--viewport-inset-top) -
		env(safe-area-inset-top, 0px)
	);
}

html.miniplayer.window-controls-overlay #now-playing {
	padding-block-start: 0;
}

.titlebar-drag-region {
	position: fixed;
	left: env(titlebar-area-x, 0px);
	top: env(titlebar-area-y, 0px);
	width: env(titlebar-area-width, 0px);
	height: env(titlebar-area-height, 0px);
	app-region: drag;
	z-index: 20;
}