/* ===================================== */
/* CSS for control sap.ushell/SearchCEP  */
/* Morning Horizon theme                 */
/* ===================================== */

html.sap-phone #CEPSearchField.sapMFocus > .sapMSFF::before {
	border: 0.125rem solid #0070f2;
	position: absolute;
	content: ' ';
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	border-radius: inherit;
	z-index: 2;
	pointer-events: none
}

/* Placeholder SearchField in CEP */
#PlaceHolderSearchField > .sapMSFF {
	border-radius: 1.125rem;
	background-color: var(--sapShell_InteractiveBackground);
	border: none;
	color: var(--sapShell_InteractiveTextColor);
	background: none;
	background-color: var(--sapShell_InteractiveBackground);

	&:focus {
		background-color: var(--sapShell_Hover_Background);
		border: var(--sapButton_Lite_Active_BorderColor);
		color: var(--sapButton_Emphasized_Background);
	}

	&:hover {
		background-color: var(--sapShell_Hover_Background);
		box-shadow: var(--sapContent_Interaction_Shadow);
	}
}

.sapUshellCEPSearchFieldMargin {
	margin-top: 0.1rem !important;
}

/* Placeholder SearchField - placholder text */
#PlaceHolderSearchField-I::placeholder {
	color: var(--sapField_PlaceholderTextColor);
	font-style: italic;
}

/* SearchField in popover - CEP */
#CEPSearchField > .sapMSFF {
	border-radius: 1.125rem;
	height: 2.25rem !important;
	background-color: var(--sapShell_InteractiveBackground);
	border: none;
	color: var(--sapShell_InteractiveTextColor);
	background: none;
	background-color: var(--sapShell_InteractiveBackground);

	&:hover {
		background-color: var(--sapShell_Hover_Background);
		box-shadow: var(--sapContent_Interaction_Shadow);
	}

	&:focus-within {
		background-color: var(--sapShell_Hover_Background);
		border: var(--sapButton_Lite_Active_BorderColor);
		color: var(--sapButton_Emphasized_Background);
	}
}

/* SearchField in popover - placholder text */
#CEPSearchField-I::placeholder {
	color: var(--sapField_PlaceholderTextColor);
	font-style: italic;
}

/** Clear Search Button **/
#PlaceHolderSearchField-search {
	border-radius: 1.125rem !important;
	height: 1.75rem;
	width: 1.75rem;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 6px;
	line-height: 2;

	&:hover {
		background-color: var(--sapShell_Hover_Background);
		box-shadow: var(--sapContent_Interaction_Shadow);
		color: var(--sapShell_InteractiveTextColor);
	}

	&:active {
		background-color: var(--sapShell_Active_Background);
		border: 1px solid var(--sapButton_Lite_Active_BorderColor);
		color: var(--sapShell_Active_TextColor);
	}
}

#PlaceHolderSearchField-reset {
	border-radius: 1.125rem !important;
	height: 1.75rem;
	width: 1.75rem;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 6px;
	line-height: 2;

	&:hover {
		background-color: var(--sapShell_Hover_Background);
		box-shadow: var(--sapContent_Interaction_Shadow);
		color: var(--sapShell_InteractiveTextColor);
	}

	&:active {
		background-color: var(--sapShell_Active_Background);
		border: 1px solid var(--sapButton_Lite_Active_BorderColor);
		color: var(--sapShell_Active_TextColor);
	}
}

#CEPSearchField-search {
	border-radius: 1.125rem;
	height: 1.75rem;
	width: 1.75rem;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 6px;

	&:hover {
		background-color: var(--sapShell_Hover_Background);
		box-shadow: var(--sapContent_Interaction_Shadow);
		color: var(--sapShell_InteractiveTextColor);
	}

	&:focus {
		background-color: var(--sapShell_Active_Background);
		border-color: var(--sapButton_Lite_Active_BorderColor);
		color: var(--sapShell_Active_TextColor);
	}
}

#CEPSearchField-reset {
	border-radius: 1.125rem !important;
	height: 1.75rem;
	width: 1.75rem;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 6px;

	&:hover {
		background-color: var(--sapShell_Hover_Background);
		box-shadow: var(--sapContent_Interaction_Shadow);
		color: var(--sapShell_InteractiveTextColor);
	}

	&:active {
		background-color: var(--sapShell_Active_Background);
		border: 1px solid var(--sapButton_Lite_Active_BorderColor);
		color: var(--sapShell_Active_TextColor);
	}
}

#CEPSearchField.sapMSFVal > .sapMSFF .sapMSFS {
	background-color: var(--sapButton_Emphasized_Background);
	color: var(--sapButton_Emphasized_TextColor);
}

.sapUshellCEPSearchFieldPopover {
	border-radius: 1.125rem;
	padding-bottom: 0.5rem;
}

.sapUshellCEPSearchFieldMargin {
	margin-top: 0.1rem !important;
}

.searchCEPList > .sapMListHdrText {
	font-family: inherit
}

.searchCEPlistItemIcon {
	color: #758ca4 !important;
}