:root {
	color-scheme: light dark;

	--bg-layer: light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 100% / 0.05));
	--bg-playing: hsl(200 90% 50% / 0.3);
	--bg-highlight: Highlight;
	--bg: Canvas;

	--border-subtle: 1px solid
		light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
	--border-text: 1px solid light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
	--border: 1px solid light-dark(hsl(0 0% 0% / 0.25), hsl(0 0% 100% / 0.25));

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

	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
}

html {
	font-size: calc(var(--font-size) * env(preferred-text-scale, 1));
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	overscroll-behavior: none;
}

html.dynamic {
	background: var(--bg);
}

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

body {
	background: transparent;
	color: var(--text);
	block-size: 100vh;
	inline-size: 100vw;
	padding-top: max(env(titlebar-area-height), env(safe-area-inset-top));
	padding-right: env(safe-area-inset-right);
	padding-left: env(safe-area-inset-left);
	padding-bottom: env(safe-area-inset-bottom);
}

@supports (block-size: 100dvh) {
	body {
		block-size: 100dvh;
		inline-size: 100dvw;
	}
}

#app {
	display: grid;
	grid-template-areas:
		"sidebar queue"
		"sidebar controls";
	grid-template-columns: auto 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 screen and (max-width: 32rem) {
	html:not(.miniplayer) body {
		background: var(--bg);
	}
	html:not(.miniplayer) #now-playing {
		border-block-start: var(--border);
	}
	#sidebar {
		display: contents;
	}
	#app {
		grid-template-areas:
			"main"
			"nowplaying"
			"controls";
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 1fr auto auto;
	}
	#library,
	#queue {
		grid-area: main;
	}
	html:not(.show-library-mobile) #library {
		display: none;
	}
	html.show-library-mobile #queue {
		display: none;
	}
}

html.miniplayer #sidebar {
	display: contents;
}

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

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

/* desktop build (wails) styling */

html.is-wails.is-macos {
	--bg-highlight: hsl(220, 90%, 45%);
	--text-highlight: hsl(0, 0%, 100%);

	&:not(.dynamic) {
		--border: 1px solid light-dark(hsl(0 0% 75%), hsl(0, 0%, 0%));
	}
}

.is-wails.is-macos dialog {
	inset-block-start: 38px;
}

.is-wails.is-macos #library {
	padding-block-start: 0;
	margin-block-start: 38px;
}

.is-wails.is-macos #queue {
	padding-block-start: 18px;
}

.miniplayer.is-wails.is-macos #now-playing {
	padding-block-start: 38px;
}

@media screen and (max-width: 32rem) {
	.is-wails.is-macos #queue {
		padding-block-start: 38px;
	}
}

/* squircles! only chromium supports this right now */
/* snippet from https://til.jakelazaroff.com/css/make-all-rounded-corners-squircles */

@supports (corner-shape: squircle) {
	:root {
		--radius-sm: 4px;
		--radius-md: 8px;
	}
}