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

// Note:
// The following structure, selectors and parameters are the same as the ones, defined in belize theme.
// But, we still need to repeat the styles here in belize_plus, because of a restriction of the belize_plus generation build.
// We have '.sapContrast' on Title and Header level, because they are the contrast areas by design,
// but their appearance depends on classes, added to a parent element (.sapFDynamicPage).
// As the generated css would be '.sapContrast.sapFDynamicPageTitle', it will never match '.sapFDynamicPage.sapFDynamicPageTitleClickEnabled .sapFDynamicPageTitle'

.sapFDynamicPage {
	// DynamicPageTitle and Toggle Header Visual Indicator hover state
	&.sapFDynamicPageTitleClickEnabled {
		&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitle {
			.title-hover(@sapUiObjectHeaderBackground);
		}

		&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitle.sapFDynamicPageTitleTranslucent {
			.title-hover(fade(@sapUiObjectHeaderBackground, 60%));
		}

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

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

	// Toggle Header Visual Indicator
	.sapFDynamicPageToggleHeaderIndicator.sapMBtn {

		// normal state
		& > .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;
		}
	}
}

.sapUshellShell {
	.sapFDynamicPage {
		// DynamicPageTitle and Toggle Header Visual Indicator hover state
		&.sapFDynamicPageTitleClickEnabled {
			&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitle {
				.title-hover(fade(@sapUiObjectHeaderBackground, 60%));
			}

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

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