/* =================================== */
/* CSS for control sap.m/Page.control  */
/* Quartz Dark theme                   */
/* =================================== */

.sapMPageBgStandard {
	background-color: var(--sapBackgroundColor);
}

.sapMPageBgSolid {
	background-color: var(--sapBackgroundColor);
}

.sapMPageBgTransperant {
	background-color: transparent;
}

.sapMPageBgList {
	background-color: var(--sapGroup_ContentBackground);
}

/* The following overrides for sap_belize/sap_belize_plus are only intended for apps inside FLP (Ushell) */
.sapUshellShell {

	/* In sap_belize_plus backgroundDesign=Standard maps to Solid */
	.sapMPageBgStandard {
		background-color: var(--sapBackgroundColor);
	}

	/* For the pages in the master part of sap.m.SplitApp backgroundDesign=Standard maps to Transparent */
	.sapMSplitContainerMaster .sapMPageBgStandard {
		background-color: transparent;
		background-image: none;
	}

	/* Hack - temporary - this is the FLP change*/
	#sapUshellDashboardPage {
		background-color: transparent !important;
		background-image: none !important;
	}
}

.sapMPageWithFloatingFooter .sapMPageFloatingFooter {
	opacity: 1;

	.sapMIBar-CTX.sapMFooter-CTX {
		box-shadow: var(--sapContent_Shadow1);
		border: none;
	}
}

html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {

	@keyframes bounceShow {

		0% {
			transform: translateY(100%);
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes bounceHide {

		0% {
			transform: translateY(-5%);
			opacity: 1;
		}

		100% {
			transform: translateY(100%);
			opacity: 0;
		}
	}
}

.sapMPage.sapF2CollapsedHeader > .sapMPageHeader {

	& + section,
	& + .sapUiHiddenPlaceholder + section {
		top: 0;
	}

	& + .sapMPageSubHeader + section {
		top: 2.75rem;
	}
}

.sapMPage.sapF2CollapsedHeader > .sapMPageHeader {

	& + section,
	& + .sapUiHiddenPlaceholder + section {
		top: 0;
	}

	& + .sapMPageSubHeader + section {
		top: 2.75rem;
	}
}

/* page with footer */
.sapMPageWithFooter > section {
	bottom: 2.75rem;
}

.sapMPage {

	> .sapMPageHeader + section,
	> .sapMPageSubHeader + section,
	> .sapMPageHeader + .sapUiHiddenPlaceholder + section {
		top: 2.75rem;
	}

	> .sapMPageHeader + .sapMPageSubHeader + section {
		top: 5.5rem;
	}

	> .sapMPageHeader + .sapMPageSubHeader.sapMPageSubHeaderInfoBar + section {
		top: 4.75rem;
	}
}

.sapUiSizeCompact .sapF2CollapsedHeader.sapMPageWithHeader {

	> section {
		top: 0;
	}

	&.sapMPageWithSubHeader > section {
		top: 2rem;
	}
}

.sapMPageWithHeader {
	.sapMPageHeader:has(.sapFShellBar) + section,
	.sapMPageHeader:has([ui5-shellbar]) + section {
		top: 2.75rem;
	}

	&.sapMPageWithSubHeader .sapMPageSubHeader:has(.sapFShellBar) + section,
	&.sapMPageWithSubHeader .sapMPageSubHeader:has([ui5-shellbar]) + section {
		top: 5.5rem;
	}
}

.sapMPageHeader,
.sapMPageSubHeader,
.sapMPageFooter {

	.sapUi-Std-PaddingS,
	.sapUi-Std-PaddingM,
	.sapUi-Std-PaddingL,
	.sapUi-Std-PaddingXL {

		&.sapMBar {
			box-sizing: border-box;

			.sapMBarLeft {
				padding-left: inherit;
			}

			.sapMBarRight {
				padding-right: inherit;
			}
		}
	}
}

.sapUi-Std-PaddingS,
.sapUi-Std-PaddingM,
.sapUi-Std-PaddingL,
.sapUi-Std-PaddingXL {

	&.sapMPageFloatingFooter.sapMPageFooter {
		margin: 0.5rem 0;
		width: auto;
	}
}

/* Compact size */
.sapUiSizeCompact {
	/* Header and footer have 2.5 rem */
	.sapMPageWithHeader > section {
		top: 2.5rem;
	}

	.sapMPageWithFooter > section {
		bottom: 2.5rem;
	}

	/* Subheader only 2 rem */
	.sapMPageWithSubHeader > section {
		top: 2rem;
	}

	.sapMPageWithHeader {
		.sapMPageHeader:has(.sapFShellBar) + section,
		.sapMPageHeader:has([ui5-shellbar]) + section {
			top: 2.75rem;
		}

		&.sapMPageWithSubHeader .sapMPageSubHeader:has(.sapFShellBar) + section,
		&.sapMPageWithSubHeader .sapMPageSubHeader:has([ui5-shellbar]) + section {
			top: 5.25rem;
		}
	}
}