:root {
	--corner-radius-panel: 10px;
	--corner-radius-card: 8px;
	--corner-radius-tile: 6px;
	
	--padding-panel: 4px;
	--padding-card: 8px;
	
	--color-bg-panel: rgba(255, 255, 255, 0.75);
	--color-bg-card: white;
	--color-bg-tile: rgba(0, 0, 0, 0.1);
	--color-on-bg: black;
	--color-on-accent: white;
	--color-accent: #6699ff;
	
	--system-bar-height-large: 40px;
	--system-bar-height-small: 24px;
	--system-bar-height: var(--system-bar-height-small);
	--app-tile-size-small: 48px;
	--app-tile-size-medium: 100px;
	--app-tile-gap: 4px;
	--qs-tile-height: 72px;
	--snap-zone-size: 48px;
	--window-title-bar-height: 40px;
	--window-grabbable-border-width: 8px;
	
	--ui-transition-duration: 0.2s;
	
	--mdc-shape-small: var(--corner-radius-tile);
	
	--z-system-bar: 1001;
	--z-system-panes: 1000;
	--z-fullscreen-window: 1002;
}
@media (prefers-color-scheme: dark) {
	:root {
		--color-accent: #6699ff;
		--color-bg-card: #1d1d1d;
		--color-bg-panel: rgba(0, 0, 0, 0.75);
		--color-bg-tile: rgba(255, 255, 255, 0.2);
		--color-on-bg: white;
		--color-on-accent: black;
		
		--mdc-theme-text-primary-on-background: rgba(255, 255, 255, 0.87);
		--mdc-ripple-color: #fff;
	}
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	padding: 0;
	overflow: hidden;
}

body {
	/* Default FlashOS background image :) */
	background: linear-gradient(120deg, #01243A, #015287 25%, #014776 40%, #015287 60%, #000000);
	background-attachment: fixed;
	
	font-family: Roboto, Helvetica, 'Segoe UI', Arial, sans-serif;
}

ideal-system-bar,
ideal-launcher-pane,
ideal-action-pane {
	background-color: var(--color-bg-panel);
	box-shadow: rgba(0, 0, 0, 0.26) 0 2px 5px 0, rgba(0, 0, 0, 0.16) 0 2px 10px 0;
	color: var(--color-on-bg);
}

ideal-system-bar {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: var(--system-bar-height);
	
	display: flex;
	align-items: center;
	overflow: hidden;
	
	z-index: var(--z-system-bar);
}
	ideal-system-bar mwc-icon-button {
		margin: -4px -2px;
	}
		ideal-system-bar mwc-icon-button:first-child {
			margin-left: -8px;
			--mdc-icon-size: 16px;
		}
	ideal-system-bar mwc-button {
		--mdc-theme-primary: currentColor;
	}
@media (min-width: 600px) {
	:root {
		--system-bar-height: var(--system-bar-height-large);
	}
	ideal-system-bar mwc-icon-button:first-child {
		margin-left: -2px;
		--mdc-icon-size: 24px;
	}
}

ideal-system-icon-area {
	margin-left: auto;
	margin-right: 2px;
	
	--mdc-icon-size: 1rem;
	
	z-index: 1;
}

ideal-launcher-pane,
ideal-action-pane {
	display: block;
	position: fixed;
	top: var(--system-bar-height);
	width: 100%;
	max-height: 100%;
	
	border-radius: 0 0 var(--corner-radius-panel) var(--corner-radius-panel);
	
	transform: translateY(-100%) translateY(calc(-1 * var(--system-bar-height)));
	opacity: 0;
	transition-property: transform, opacity;
	transition-duration: 0.25s;
	
	outline: 0 none;
	z-index: var(--z-system-panes);
}
	ideal-launcher-pane[open],
	ideal-action-pane[open] {
		transform: none;
		opacity: 1;
	}
	ideal-launcher-pane h1,
	ideal-action-pane h1 {
		font-size: 1.25rem;
		font-weight: 500;
	}
@media (min-width: 600px) {
	ideal-launcher-pane,
	ideal-action-pane {
		width: auto;
	}
}

ideal-launcher-pane {
	left: 0;
}
/* TODO: reimplement this animation in the now-contained components
	ideal-launcher-pane ideal-app-tile {
		transform: translateY(-4em) scale(0.85);
		transition: transform 0.4s;
	}
		ideal-launcher-pane[open] ideal-app-tile {
			transform: none;
		}
*/

@media (min-width: 600px) {
	ideal-launcher-pane {
		left: 4px;
	}
}

ideal-action-pane {
	right: 0;
}
@media (min-width: 600px) {
	ideal-action-pane {
		right: 4px;
		width: 356px;
	}
}

ideal-window[fullscreen] {
	z-index: var(--z-fullscreen-window);
}