/* ================================== */
/* CSS for control sap.f/DynamicPage  */
/* Belize theme                       */
/* ================================== */

/* Tablet and Desktop */
.sapFDynamicPageToggleHeaderIndicator,
.sapFDynamicPageHeaderPinButton {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.375rem;

	// Reflection: styles overwritten
	// The following styles were moved from the base theme
	// to specific theme which is using them
	.sapMBtnInner {
		height: 2rem;
		bottom: 0.5rem;

		.sapMBtnIcon {
			line-height: 2rem;
		}
	}
}

/* Compact */
.sapUiSizeCompact {
	.sapFDynamicPageToggleHeaderIndicator,
	.sapFDynamicPageHeaderPinButton {
		width: 2rem;
		height: 2rem;
		font-size: 1rem;

		// Reflection: styles overwritten
		// The following styles were moved from the base theme
		// to specific theme which is using them
		.sapMBtnInner {
			height: 1.25rem;
			bottom: 0.375rem;

			.sapMBtnIcon {
				line-height: 1.25rem;
			}
		}
	}
	.sapFDynamicPageToggleHeaderIndicator {
		margin-left: -1rem;
	}
	.sapFDynamicPageHeaderPinnable .sapFDynamicPageToggleHeaderIndicator {
		margin-left: -2rem;
	}
}

.sapFDynamicPageHeaderPinButton .sapMBtnInner {
	border: none;
	&:not(.sapMToggleBtnPressed) {
		background-color: @sapUiObjectHeaderBorderColor;
	}
}

.sapFDynamicPageHeaderPinButton:hover > .sapMBtnInner.sapMBtnHoverable {
	background-color: darken(@sapUiObjectHeaderBorderColor, 3);

	&.sapMToggleBtnPressed {
		background-color: @sapUiToggleButtonPressedHoverBackground;
	}
}

.sapFDynamicPageHeaderPinButton > .sapMBtnInner.sapMBtnActive,
.sapFDynamicPageHeaderPinButton > .sapMBtnInner.sapMBtnActive.sapMBtnHoverable {
	background-color: @sapUiSelected;
}

.sapFDynamicPage {
	.sapFDynamicPageContent {
		background: @sapUiGlobalBackgroundColor;
	}

	// DynamicPageTitle and Toggle Header Visual Indicator hover state
	&.sapFDynamicPageTitleClickEnabled {

		&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitle {
			.title-hover(@sapUiObjectHeaderBackground);
		}

		&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitleTranslucent {
			.title-hover(lighten(@sapUiObjectHeaderBackground, 10));
		}

		&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitleTransparent {
			.title-hover(transparent);
		}

		&.sapFDynamicPageTitleForceHovered {
			.sapFDynamicPageToggleHeaderIndicator {
				.sapMBtnInner {
					background-color: darken(@sapUiObjectHeaderBorderColor, 3);
				}
			}
		}
	}

	// Toggle Header Visual Indicator
	.sapFDynamicPageToggleHeaderIndicator.sapMBtn {

		& > .sapMBtnInner {
			border: none;
			background-color: @sapUiObjectHeaderBorderColor;
		}

		// hover state
		&:hover > .sapMBtnInner.sapMBtnHoverable {
			background-color: darken(@sapUiObjectHeaderBorderColor, 3);
		}

		// active state
		& .sapMBtnInner.sapMFocusable.sapMBtnActive,
		&:focus > .sapMBtnInner.sapMFocusable.sapMBtnActive {
			background: @sapUiSelected;
			color: @sapUiButtonActiveBackground;
		}
	}
}

// Note:
// The footer selector can`t be nested in the sapFDynamicPage less structure,
// because the contrast container would not work, as the theme generates css like ".sapContrast.sapFDynamicPageFooter"
// and will never match ".sapFDynamicPage .sapFDynamicPageFooter"
.sapFDynamicPageFooter .sapFDynamicPageActualFooterControl {
	background: fade(@sapUiPageFooterBackground, 90);
	color: @sapUiPageFooterTextColor;
	box-shadow: @sapUiShadowLevel1;
	border-bottom: 0 none;
}

.title-hover(@backgroundColor) {
	background-color: darken(@backgroundColor, 3);
}