/* =================================================== */
/* CSS for control sap.esh.search.ui/SearchFieldGroup  */
/* Base theme                                          */
/* =================================================== */

.SearchFieldGroup {

	input[type='search']::-webkit-search-cancel-button {
		-webkit-appearance: none;
	}
}

#searchFieldInShell {
	display: block;
	height: 100%;
	width: 100%;

	.searchInput {

		input::-webkit-search-cancel-button {
			-webkit-appearance: none;
		}
	}

	& > .sapMFlexBox {
		height: 100%;
		align-items: center;

		> div:nth-child(1) {
			max-width: 50%;
			max-width: ~"calc(50% - 1.5rem)";
			margin-right: 0.125rem;
		}

		& > div:nth-child(2) {
			flex-basis: 4rem !important;
		}

		& > div:nth-child(4) {
			margin-left: 0.125rem;
		}
	}
}

#searchFieldInShell .searchSelect.sapMSlt.sapMSltIconOnly {
	width: 2.5rem;
}

.sapUiSizeCompact #searchFieldInShell .searchSelect.sapMSlt.sapMSltIconOnly {
	width: unset;
}

body:not(.sapUiSizeCompact) #searchFieldInShell .sapMFlexBox > div:nth-child(1) {
	min-width: 2.45rem !important;
}

#searchFieldInShell .searchSelect,
#searchFieldInShell .searchInput,
#searchFieldInShell .searchBtn {
	display: block;
}

html.sapUiMedia-Std-Phone #searchFieldInShell {

	> div:first-child {
		padding-left: 0.25rem;
	}

	> div:last-child {
		padding-right: 0.25rem;
	}
}

/******** suggestion ********/

/* avoid suggestion background */
.searchSuggestionCustomListItem {
	background-color: transparent;
}

#searchFieldInShell-input-popup {

	i {
		font-style: inherit;
	}

	tr:not(.sapMLIBActive) li:not(.sapMLIBActive) i {
		color: var(--sapContent_MarkerTextColor);
	}

	li {
		background-color: transparent;
		display: block;
		border: none;
	}
}

.searchSuggestion {

	td,
	.sapMLIBShowSeparator > td {
		border-top: none;
	}
}

#searchFieldInShell-input-popup-table-tblBody .sapMLIBContent {
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 2rem;
}

.suggestListItemCell {
	line-height: 2rem;
}

.sapUshellSearchSuggestAppIcon {
	margin-left: 0.6rem;
	margin-right: 0.6rem;
	line-height: 2rem;
}

.sapUshellSearchSuggestFilterIcon {
	margin-left: 0.6rem;
	margin-right: 0.6rem;
	line-height: 2rem;
	color: var(--sapContent_LabelColor);
}

.sapUshellSearchObjectSuggestIcon {
	margin-left: 0.6rem;
	margin-right: 0.6rem;
	line-height: 2rem;
}

tr:not(.sapMLIBActive) li:not(.sapMLIBActive) .sapUshellSearchSuggestAppIcon {
	color: var(--sapContent_NonInteractiveIconColor);
}

.searchHeaderSuggestion {
	box-shadow: none !important;
}

.searchSuggestion:not(.searchAppSuggestion) .suggestListItemCell:empty {
	display: none;
}

.searchSuggestion .suggestIcon,
.suggestText {
	vertical-align: middle;
}

/******** suggestion header ********/

.sapUiSizeCompact tr.searchHeaderSuggestion {
	height: 2.5rem;
}

tr.searchHeaderSuggestion td > div.sapMFlexBox {
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--sapList_TableGroupHeaderBorderColor);
	padding-top: 1rem;
	padding-bottom: 0.2rem;
}

tr.searchHeaderSuggestion div.sapMFlexBox span.sapMLabel {
	color: var(--sapList_TableGroupHeaderTextColor);
}

tr.searchHeaderSuggestion div.sapMFlexBox span.sapUiIcon {
	color: var(--sapList_TableGroupHeaderTextColor);
}

tr.searchHeaderSuggestion.sapMLIBHoverable:hover {
	background: var(--sapList_Background);
}

/******** object suggestion ********/

div.sapUshellSearchObjectSuggestion-Container {
	display: flex;
	align-items: center;

	.sapUshellSearchObjectSuggestion-Labels {
		margin-left: 0.5rem;

		.sapUshellSearchObjectSuggestion-Label1 {
			color: var(--sapList_TextColor);
		}

		.sapUshellSearchObjectSuggestion-Label2 {
			color: var(--sapContent_LabelColor);
		}
	}
}

.sapUiSizeCozy .searchObjectSuggestion {
	height: 4rem;

	.sapMListTblCell {
		padding-top: 0.75rem;
		padding-bottom: 0rem;
	}
}

/******** recent suggestion ********/
.searchRecentSuggestion .suggestText {
	margin-left: 0.5rem; /* space between text and search icon, aligned with object suggestion icon */
	padding-right: 0.1rem; /* make some room for italic letters leaning to the right */
}

/******** data source select ********/

.sapMPopover ul li[id*='searchFieldInShell-select'] {
	height: 2.125rem;
	line-height: 2.125rem;
	border: none;
}