/* ============================================== */
/* CSS for control sap.m/WizardProgressNavigator  */
/* Belize theme                                   */
/* ============================================== */

@_sap_m_WizardProgressNavigator_NavStepCircleHoverColor: lighten(@sapUiObjectHeaderBackground, 5);
@_sap_m_WizardProgressNavigator_NavStepTitleSelectedTextColor: darken(@sapUiGroupTitleTextColor, 20);
@_sap_m_WizardProgressNavigator_NavStepTitleHoverTextColor: darken(@sapUiGroupTitleTextColor, 10);

.sapMWizardProgressNav {
	position: absolute;
	z-index: 1;
}

.sapMWizardProgressNavStep:hover .sapMWizardProgressNavStepCircle {
	background-color: @sapUiObjectHeaderBackground;
	color: @sapUiHighlight;
}

.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"]:hover .sapMWizardProgressNavStepCircle {
	background-color: @sapUiHighlight;
	color: @sapUiContentContrastIconColor;
}

.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"]:hover .sapMWizardProgressNavStepTitle,
.sapMWizardProgressNavStep:hover .sapMWizardProgressNavStepTitle {
	color: @_sap_m_WizardProgressNavigator_NavStepTitleHoverTextColor;
}

.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] .sapMWizardProgressNavStepContainer::after {
	height: 0.125rem;
}

.sapMWizardProgressNavStepCircle {
	border-color: @sapUiHighlight;
}

.sapMWizardProgressNavStepTitle:hover {
	color: @_sap_m_WizardProgressNavigator_NavStepTitleHoverTextColor;
}

.sapMWizardProgressNavStep::after {
	border-bottom-color: @sapUiHighlight;
}

.sapMWizard .sapMWizardStepContainer {
  background: @sapUiGroupContentBackground;
}

.sapMWizardProgressNavStep:hover .sapMWizardProgressNavStepCircle {
	color:  @sapUiGroupTitleTextColor;
}

.sapMWizardProgressNavStep[data-sap-ui-wpn-step-active="true"] {

	.sapMWizardProgressNavStepTitle {
		color: @_sap_m_WizardProgressNavigator_NavStepTitleSelectedTextColor;
	}

  & ~ .sapMWizardProgressNavStep {
		color: fade(@sapUiGroupTitleTextColor, 50);
	}
	/* all steps after the active one have inactive style */
	& ~ .sapMWizardProgressNavStep .sapMWizardProgressNavStepCircle {
		border-color: fade(@sapUiHighlight, 50);
		color: fade(@sapUiHighlight, 50);
	}

	& ~ .sapMWizardProgressNavStep .sapMWizardProgressNavStepTitle {
		color: fade(@sapUiGroupTitleTextColor, 50);
	}

	& ~ .sapMWizardProgressNavStep .sapMWizardProgressNavStepLabelOptional {
		color: fade(@sapUiGroupTitleTextColor, 50);
	}

	& ~ .sapMWizardProgressNavStep:hover .sapMWizardProgressNavStepCircle {
		background-color: @sapUiObjectHeaderBackground;
	}

	/* all separators after (and including) the active step have inactive style */
	&::after,
	& ~ .sapMWizardProgressNavStep::after {
		border-bottom-color: fade(@sapUiHighlight, 50);
	}
}