@property --background {
	syntax: "<color>";
	inherits: true;
	initial-value: Canvas;
}

:root {
	color-scheme: light dark;

	--background: Canvas;
	--text: CanvasText;

	/* will probably switch to alpha() once baseline-widely-available */
	--layer: rgb(from currentColor r g b / 5%);

	--selected-background: SelectedItem;
	--selected-text: SelectedItemText;

	--playing-background: rgb(from AccentColor r g b / 30%);
	--playing-text: currentColor;

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

	--unfocused-background: rgb(from currentColor r g b / 30%);
	--unfocused-text: currentColor;

	--border: none;
	--border-subtle: none;
	--border-text: 1px solid rgb(from currentColor r g b / 10%);

	@media (prefers-contrast: more) {
		--layer: rgb(from currentColor r g b / 10%);

		--playing-background: AccentColor;
		--playing-text: AccentColorText;

		--unfocused-background: rgb(from currentColor r g b / 50%);

		--border-text: 1px solid rgb(from currentColor r g b / 50%);
	}

	--shadow-sm: none;
	--shadow-md: none;

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

	--icon-size: 16px;

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

	--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: max(
		env(safe-area-inset-top, 0px),
		calc(env(titlebar-area-y, 0px) + env(titlebar-area-height, 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.dynamic-colors {
	--accent: currentColor;
	--accent-green: currentColor;
	--accent-orange: currentColor;
	--accent-red: currentColor;
	--playing-background: rgb(from currentColor r g b / 30%);
	--selected-background: rgb(from currentColor r g b / 25%);
	--selected-text: currentColor;
}

html.dynamic-highlights {
	--playing-background: rgb(from var(--accent) r g b / 30%);
	--selected-background: rgb(from var(--accent) r g b / 25%);
	--selected-text: currentColor;
	--accent-green: var(--accent);
	--accent-orange: var(--accent);
	--accent-red: var(--accent);

	:is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
		accent-color: var(--accent);
	}
}

html.shadows {
	--shadow-sm: 0 2px 10px rgb(0 0 0 / 0.2);
	--shadow-md: 0 16px 32px rgb(0 0 0 / 0.2);

	@media (prefers-contrast: more) {
		--shadow-sm: 0 2px 10px rgb(0 0 0 / 0.4);
		--shadow-md: 0 16px 32px rgb(0 0 0 / 0.4);
	}
}

html.borders {
	--border: 1px solid rgb(from currentColor r g b / 25%);
	--border-subtle: 1px solid rgb(from currentColor r g b / 10%);

	@media (prefers-contrast: more) {
		--border: 1px solid currentColor;
		--border-subtle: 1px solid rgb(from currentColor r g b / 50%);
	}
}

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);
}

@supports (font: -apple-system-body) {
	html:not(.custom-font-size):not(.custom-font-family) {
		font: -apple-system-body;
	}
}

body {
	background-color: var(--background);
	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);
}

html.transparency :is(.scroll-fade, .scroll-fade-top, .scroll-fade-bottom) {
	--scroll-fade-top-offset: 0px;
	--scroll-fade-top: 0px;
	--scroll-fade-bottom: 0px;
	--scroll-fade-top-length: 0px;
	--scroll-fade-bottom-length: 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-top-length), var(--scroll-fade-top))
			),
		black calc(100% - min(var(--scroll-fade-bottom-length), var(--scroll-fade-bottom))),
		transparent
	);
}
html.transparency :is(.scroll-fade, .scroll-fade-top) {
	--scroll-fade-top-length: 1.5rem;
}
html.transparency :is(.scroll-fade, .scroll-fade-bottom) {
	--scroll-fade-bottom-length: 1.5rem;
}

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

button:not(.native):disabled {
	opacity: 0.5;
}

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

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

html:is(.dynamic-colors, .custom-colors) :is(.library-search, .queue-filter) input {
	background-color: var(--layer);
	color: inherit;
	border: var(--border-subtle);
	border-radius: var(--radius-md);
	corner-shape: squircle;

	&::placeholder {
		opacity: 0.5;
		color: inherit;
	}
}

.artwork {
	background-color: rgb(from currentColor r g b / 10%);

	html.borders &:not(:focus-visible) {
		outline: var(--border-subtle);
		outline-offset: -1px;
	}
}

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

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

.popover {
	border: var(--border);
	background-color: Canvas;
	color: CanvasText;
	box-shadow: var(--shadow-sm);
	border-radius: var(--radius-md);
	corner-shape: squircle;

	html.transparency & {
		background-color: rgb(from Canvas r g b / 80%);
		backdrop-filter: blur(16px);
	}
}

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 {
	transition: --background 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 {
		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;
	}

	.loading {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;
			background-color: rgb(from currentColor r g b / 20%);
			mask: linear-gradient(90deg, transparent 30%, black 50%, transparent 70%) 0 0 / 200% 100%
				no-repeat;
			animation: loading-shimmer 1s ease-in-out 1s infinite backwards;
		}
	}
}

@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 loading-shimmer {
	from {
		mask-position: 140%;
	}
	to {
		mask-position: -40%;
	}
}

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

@keyframes fade-in {
	from {
		opacity: 0;
	}
}

#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;
	}
	#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;
		touch-action: pan-y pinch-zoom;
	}
	html {
		--library-offscreen: -100%;
		--queue-offscreen: 100%;
	}
	html:dir(rtl) {
		--library-offscreen: 100%;
		--queue-offscreen: -100%;
	}
	html.motion {
		#library,
		#queue {
			transition:
				transform 250ms var(--ease-out-cubic),
				visibility 250ms linear;
		}
	}
	html:not(.show-library-mobile) #library {
		transform: translateX(var(--library-offscreen));
		visibility: hidden;
	}
	html.show-library-mobile #queue {
		transform: translateX(var(--queue-offscreen));
		visibility: hidden;
	}
}

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;
}

:is(#queue, #library),
html.miniplayer #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;
}