@font-face {
	font-family: "Digital";
	src: url("/styles/fonts/digital-7.regular.ttf");
}

@font-face {
	font-family: "Digital Mono";
	src: url("/styles/fonts/digital-7.mono.ttf");
}

@font-face {
	font-family: "Digital Italic";
	src: url("/styles/fonts/digital-7.italic.ttf");
}

vaadin-scroller[slot="drawer"] {
	padding: var(--lumo-space-s);
}

[slot="drawer"]:is(header, footer) {
	display: flex;
	align-items: center;
	gap: var(--lumo-space-s);
	padding: var(--lumo-space-s) var(--lumo-space-m);
	min-height: var(--lumo-size-xl);
	box-sizing: border-box;
}

[slot="drawer"]:is(header, footer):is(:empty) {
	display: none;
}

.users-view {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.users-view vaadin-split-layout {
	width: 100%;
	height: 100%;
}

.users-view vaadin-grid {
	height: 100%;
}

.users-view .editor-layout {
	display: flex;
	flex-direction: column;
	width: 400px;
}

.users-view .editor {
	flex-grow: 1;
	padding: var(--lumo-space-l);
}

.users-view .editor vaadin-checkbox {
	padding-top: var(--lumo-space-m);
}

.users-view .button-layout {
	width: 100%;
	flex-wrap: wrap;
	background-color: var(--lumo-contrast-5pct);
	padding-bottom: var(--lumo-space-s);
	padding-top: var(--lumo-space-s);
	padding-left: var(--lumo-space-l);
	padding-right: var(--lumo-space-l);
	gap: var(--lumo-space-m);
}

.users-view .grid-wrapper {
	width: 100%;
}

/* Edit form next to the grid: scroll inside its own column so Save/Cancel stay reachable.
   .content must not grow to the form's full height (flex items default to min-height: auto),
   otherwise the form never gets a bounded height to scroll within. */
vaadin-horizontal-layout.content {
	min-height: 0;
}

vaadin-horizontal-layout.content > :not(vaadin-grid) {
	/* a scroll container may otherwise be squeezed below its content width by the grid */
	min-width: min-content;
	min-height: 0;
	max-height: 100%;
	overflow-y: auto;
}

/* Narrow screens: while the form is shown, give it the whole view */
@media all and (max-width: 800px) {
	:has(> vaadin-horizontal-layout.content > :not(vaadin-grid):not([hidden])) > .toolbar,
	vaadin-horizontal-layout.content:has(> :not(vaadin-grid):not([hidden])) > vaadin-grid {
		display: none;
	}

	vaadin-horizontal-layout.content > :not(vaadin-grid) {
		width: 100% !important;
		min-width: 0;
		box-sizing: border-box;
		/* room to scroll the buttons above the mobile browser's bottom toolbar */
		padding-bottom: 6rem;
	}
}

a[highlight] {
	font-weight: bold;
	text-decoration: underline;
}