@layer reset, layout, pages, components;

@layer view-transitions {
	@view-transition {
		navigation: auto;
	}

	:root {
		view-transition-name: none;
	}
	::view-transition {
		pointer-events: none;
	}

	video {
		view-transition-name: video;
	}
}

video {
	display: block;
	width: 40vw;
	height: auto;
	aspect-ratio: 16 / 9;

	&.big {
		width: 80vw;
	}
}

@layer layout {
	html {
		background-color: white;
		height: 100%;
		width: 100%;

		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	body {
		height: 100%;
		width: 100%;
	}

	main, footer, aside {
		max-width: 60em;
		margin: 0 auto 4em;
		padding: 1em;
	}

	footer {
		font-style: italic;
		text-align: center;
	}
}

@layer reset {
	* {
		box-sizing: border-box;
	}
	html, body, ul[class] {
		margin: 0;
		padding: 0;
	}
}

@layer warnings {
	/* Warnings and Preferences */
	@media (prefers-reduced-motion: reduce) {
		.warning[data-reason="prefers-reduced-motion"] {
			display: block;
		}
	}

	@supports not (view-transition-name: works) {
		.warning[data-reason="same-document-view-transitions"] {
			display: block;
		}
	}

	.warning[data-reason="cross-document-view-transitions"] {
		/* JS will show this warning when needed */
	}

	.warning[data-reason="navigation-api"] {
		/* JS will show this warning when needed */
	}

	.warnings {
		position: fixed;
		bottom: 1em;
		left: 1em;
		right: 1em;
		view-transition-name: warning; /* Don’t transition this with the rest of the stuff */
	}

	@layer warning {
		.warning {
			box-sizing: border-box;
			padding: 1em;
			margin: 1em 0;
			border: 1px solid #ccc;
			background: rgba(255 255 205 / 0.8);
			display: none;
		}

		.warning > :first-child {
			margin-top: 0;
		}

		.warning > :last-child {
			margin-bottom: 0;
		}

		.warning a {
			color: blue;
		}
		.warning--info {
			border: 1px solid #123456;
			background: rgb(205 230 255 / 0.8);
		}
		.warning--alarm {
			border: 1px solid red;
			background: #ff000010;
		}
	}
}