@use "@db-ui/foundations/build/styles/variables";

.db-page-document {
	block-size: 100%;
	overflow: hidden;
}

@mixin header-footer-style {
	> :is(.db-header, .db-footer, header, footer) {
		display: flex;
		flex: 0 1 auto;
		flex-grow: 0;
		flex-shrink: 0;
	}
}

.db-page {
	opacity: 0;

	@media screen and (prefers-reduced-motion: no-preference) {
		&[data-fade-in="true"] {
			transition: opacity variables.$db-transition-straight-emotional;
		}
	}

	&:not([data-fonts-loaded]),
	&[data-fonts-loaded="true"] {
		opacity: 1;
	}

	&[data-variant="fixed"] {
		@include header-footer-style();

		block-size: 100%;
		min-block-size: 100%;
		display: flex;
		flex-direction: column;

		/* workaround for angular */
		> :is(db-header, dbheader, dbfooter, db-footer) {
			@include header-footer-style();
		}

		> .db-main {
			display: flex;
			flex-direction: column;
			overflow: auto;
			flex: 1 1 auto;
			inline-size: 100%;
		}
	}
}