/* Fallbacks bei allen Variablen: die Root-Vars kommen von der API und koennen
   im Fehlerfall fehlen. Als modaler Dialog liegt der Hinweis im Top-Layer und
   damit ueber allem - der z-index (ueber dem ToastContainer, 9999) greift nur,
   falls showModal() nicht verfuegbar ist. display gehoert an [open], sonst
   ueberstimmt diese Regel das UA-Stylesheet und der Dialog waere immer sichtbar. */
.fullscreen-notice {
	position: fixed;
	inset: 0;
	z-index: 10000;
	/* Ohne width/height greift das UA-Stylesheet mit fit-content und die Box
	   schrumpft trotz inset: 0 auf Inhaltsgroesse. auto statt 100vw/100vh:
	   bezieht sich auf den sichtbaren Bereich, nicht auf den large viewport. */
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	border: none;
	padding: 24px;
	text-align: center;
	background-color: var(--background-color, #fff);
	color: var(--app-font-color, #1a1a1a);

	&[open] {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	/* Wie .continue-button im SplashScreen, nur mit Fallbacks. Fehlt eine
	   Farbvariable, faellt der Hover auf den fruehreren Outline-Look zurueck;
	   bei den geerbten Eigenschaften (color, font-family) reicht dafuer das
	   Verwerfen der Deklaration. */
	& button {
		--notice-button-color: var(--button-color, var(--app-primary-color, #005e95));

		margin-top: 8px;
		padding: 7px 11px;
		border: 2px solid var(--notice-button-color);
		background-color: var(--notice-button-color);
		color: white;
		font-family: var(--app-font-family);
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
		transition:
			background-color 0.2s,
			color 0.2s,
			border-color 0.2s;

		&:hover {
			background-color: var(--button-hover-background, transparent);
			border-color: var(--button-hover-border, currentColor);
			color: var(--button-hover-color);
		}
	}
}

@media (prefers-color-scheme: dark) {
	.fullscreen-notice {
		background-color: var(--background-color, #242424);
		color: var(--app-font-color, #eee);
	}
}