:root {
	color-scheme: light dark;
	--bg-row: light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 100% / 0.05));
	--bg-secondary: light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 100% / 0.05));
	--bg-tertiary: light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
	--bg: Canvas;
	--border-subtle: light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
	--border-text: light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.1));
	--border: light-dark(hsl(0 0% 0% / 0.25), hsl(0 0% 100% / 0.25));
	--playing: light-dark(hsl(200 90% 50% / 0.25), hsl(200 90% 50% / 0.4));
	--text: CanvasText;
}

body {
	background-color: var(--bg);
	color: var(--text);
}

body.dynamic {
	transition:
		background-color 0.5s,
		color 0.5s;
}

#app {
	display: grid;
	grid-template-areas:
		"sidebar queue"
		"playback playback"
		"actions actions";
	grid-template-columns: var(--sidebar-width, 20rem) 1fr;
	grid-template-rows: 1fr auto auto;
	block-size: 100%;
	inline-size: 100%;
}

@media screen and (max-width: 32rem) {
	#app {
		grid-template-areas:
			"queue"
			"sidebar"
			"playback"
			"actions";
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr auto auto;
	}
}

body.transparent-bg {
	--bg-secondary: transparent;
	--bg-tertiary: transparent;
}

body.transparent-borders {
	--border: transparent;
	--border-subtle: transparent;
}

/* web app/pwa stuff */
body {
	block-size: 100dvh;
	inline-size: 100dvw;
	border-top: env(safe-area-inset-top) solid transparent;
	border-right: env(safe-area-inset-right) solid transparent;
	border-left: env(safe-area-inset-left) solid var(--bg-secondary);
	border-bottom: env(safe-area-inset-bottom) solid var(--bg-tertiary);
	-webkit-tap-highlight-color: transparent;
}

html {
	font-size: 0.8125rem;
	user-select: none;
	-webkit-user-select: none;
	overscroll-behavior: none;
}