html, body {
	--sl-font-sans: 'Inter';
	--sl-input-font-family: 'Inter';
	--sl-font-mono: 'Inconsolata';
    margin: 0;
	font-family: var(--sl-font-sans);
}

h1:focus {
    outline: none;
}

/*<app-root>
	<app-drawer>
		<app-drawer-titlebar>
		<app-drawer-body>
	</app-drawer>
	<app-main>
		<app-main-titlebar>
			[slot=left]
			[slot=caption]
			[slot=right]
		</app-main-titlebar>
		<app-main-body>
	<app-main>
</app-root>*/

body {
	background-color: var(--sl-color-neutral-600);
}

login-root {
	margin-left: auto;
	margin-right: auto;
	max-width: 600px;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	display: flex;
	flex-direction: row;
}

login-main {
	box-shadow: var(--sl-shadow-x-large);
	background-color: var(--sl-color-neutral-50);
	border-radius: 12px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	max-height: 300px;
}

app-root {
	margin-left: auto;
	margin-right: auto;
	max-width: 1600px;
	box-shadow: var(--sl-shadow-x-large);
	transition: margin-top ease-out 200ms, margin-bottom ease-out 200ms, border-radius ease-out 200ms;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	--app-border-color: var(--sl-color-neutral-300);
	--app-titlebar-height: 56px;
	--app-drawer-width: 250px;
}

@media (min-height: 800px) and (min-width: 1600px) {
	app-root {
		border-radius: 12px;
		margin-top: 12px;
		margin-bottom: 12px;
	}
}

@media (max-width: 960px) {
	app-root {
		--app-drawer-width: 64px;
	}
	app-drawer-titlebar > :not(sl-icon) {
		display: none;
	}
}

app-drawer {
	border-right: 1px solid var(--app-border-color);
	min-width: var(--app-drawer-width);
	display: flex;
	flex-direction: column;
	height: 100%;
}

app-drawer-titlebar, app-main-titlebar {
	z-index: 100;
	box-sizing: border-box;
	height: var(--app-titlebar-height);
	padding: 0rem 1rem 0 1rem;
	border-bottom: 1px solid var(--app-border-color);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

/* fixes problem with position: sticky resizing the titlebar */
app-main-titlebar::after {
	content: '';
	margin-left: -0.5rem;
	height: 100px;
}

app-drawer-titlebar {
	background-color: var(--sl-color-neutral-200);
	font-size: 125%;
}

app-drawer-body {
	background-color: var(--sl-color-neutral-200);
	flex-grow: 1;
	overflow-y: auto;
}

app-main {
	background-color: var(--sl-color-neutral-50);
	overflow-y: auto;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

app-main-titlebar {
	background: linear-gradient(to bottom, var(--sl-color-neutral-0) 50%, hsla(var(--sl-hsl-neutral-0) / 50%));
	backdrop-filter: blur(3px);
	color: var(--sl-color-neutral-950);
	position: sticky;
	top: 0;
}

app-main-titlebar > [slot="left"] {
	order: 1;
	flex-grow: 0;
}

app-main-titlebar > * {
	order: 2;
	flex-grow: 1;
	font-size: 18px;
	text-align: center;
}

app-main-titlebar > [slot="right"] {
	order: 3;
	flex-grow: 0;
}

app-main-body {
	flex-grow: 1; /*calc(100% - var(--app-titlebar-height));*/
	padding: var(--sl-spacing-medium);
	gap: var(--sl-spacing-medium);
}

nsl-sidenav {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--sl-spacing-small);
}

nsl-sidenav-item {
	color: var(--sl-color-neutral-700);
	display: flex;
	flex-direction: row;
	flex-grow: 1;
}

nsl-sidenav-item a, nsl-sidenav-item a:hover {
	padding: var(--sl-spacing-small);
	text-decoration: none;
	color: inherit;
	flex-basis: 100%;
	display: flex;
	flex-direction: row;
	gap: var(--sl-spacing-x-small);
	border-radius: var(--sl-border-radius-small);
	border: 1px solid transparent;
}

nsl-sidenav-item a:not(.href-match):hover {
	background-color: var(--sl-color-primary-50);
	border-color: var(--sl-color-primary-300);
	color: var(--sl-color-primary-700);
}

nsl-sidenav-item .href-match {
	background-color: var(--sl-color-neutral-300);
}

nsl-sidenav-item a sl-icon {
	aspect-ratio: 1 / 1;
	font-size: 125%;
}

@media (max-width: 960px) {
	nsl-sidenav {
		padding: var(--sl-spacing-x-small);
	}
	nsl-sidenav-item a > :not(sl-icon) {
		display: none;
	}
}

/* === shoelace styles === */

nsl-group:has([data-invalid]), nsl-group:has(.invalid) {
	border-color: var(--sl-color-danger-300);
}

/* validity styles, based on sample in shoelace.style/getting-started/form-controls */

nsl-group sl-input[data-invalid]::part(base),
nsl-group sl-select[data-invalid]::part(combobox),
nsl-group sl-checkbox[data-invalid]::part(control) {
	border-color: var(--sl-color-danger-600);
}

nsl-group [data-invalid]::part(form-control-label),
nsl-group [data-invalid]::part(form-control-help-text),
nsl-group sl-checkbox[data-invalid]::part(label) {
	color: var(--sl-color-danger-700);
}

nsl-group sl-checkbox[data-invalid]::part(control) {
	outline: none;
}

nsl-group sl-input:focus-within[data-invalid]::part(base),
nsl-group sl-select:focus-within[data-invalid]::part(combobox),
nsl-group sl-checkbox:focus-within[data-invalid]::part(control) {
	border-color: var(--sl-color-danger-600);
	box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-300);
}

.nsl-tree-item-padding-small sl-tree-item::part(item) {
	padding-top: var(--sl-spacing-xx-small);
	padding-bottom: var(--sl-spacing-xx-small);
}

.nsl-tree-item-padding-medium sl-tree-item::part(item) {
	padding-top: var(--sl-spacing-x-small);
	padding-bottom: var(--sl-spacing-x-small);
}

.nsl-tree-item-padding-large sl-tree-item::part(item) {
	padding-top: var(--sl-spacing-small);
	padding-bottom: var(--sl-spacing-small);
}

.nsl-tree-hover sl-tree-item::part(item):hover {
	background-color: var(--sl-color-neutral-300);
}
.nsl-tree-hover sl-tree-item::part(item--selected):hover {
	background-color: var(--sl-color-neutral-100);
}

/* other shoelace custom styles */

[readonly], .readonly {
	--sl-input-border-color: var(--sl-color-neutral-200);
	--sl-input-border-color-hover: var(--sl-color-neutral-200);
	--sl-input-border-color-focus: var(--sl-color-neutral-300);
	--sl-input-focus-ring-color: hsla(var(--sl-hsl-gray-400) / 25%);
	--sl-focus-ring: 3px solid var(--sl-input-focus-ring-color);
}

:is(sl-button, sl-icon-button)[disabled]::part(base), sl-select[disabled]::part(combobox) {
	cursor: default;
}

.input-label-left + .input-label-left {
	margin-top: var(--sl-spacing-medium);
}

@media (max-width: 959.9999px) {
	.input-label-left::part(form-control-label) {
		font-size: 85%;
	}
}

@media (min-width: 960px) {
	.input-label-left {
		--gap-width: 2rem;
	}
	
	.input-label-left::part(form-control) {
		display: grid;
		grid: auto / var(--label-width) 1fr;
		gap: var(--sl-spacing-3x-small) var(--gap-width);
		align-items: center;
	}
	
	.input-label-left::part(form-control-label) {
		text-align: left;
		margin-top: 1px;
	}
	
	.input-label-left::part(form-control-help-text) {
		grid-column-start: 2;
	}
}


/* display: grid; grid-template-columns: var(--label-width) 1fr; gap: 2rem; margin-top: 1rem; align-items: center */


/* === monaco styles === */

.graphql-code-editor {
	transition: var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
}

.graphql-code-editor.monaco-editor-container,
.graphql-code-editor.monaco-editor-container > .monaco-editor,
.graphql-code-editor.monaco-editor-container > .monaco-editor > .overflow-guard {
	border-radius: var(--sl-border-radius-medium);
}

.graphql-code-editor:not(.invalid) > .focused {
    background-color: var(--sl-input-background-color-focus);
    border-color: var(--sl-input-border-color-focus);
    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
}

.graphql-code-editor > .focused.readonly .cursors-layer > .cursor {
	--z-display: none !important;
	background-color: rgba(0, 0, 0, 0.4);
}

.graphql-code-editor.invalid {
	border-color: var(--sl-color-danger-600) !important;
	box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-300);
}