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

#searchFieldInShell {

	.sapMFlexBox {

		& > div:nth-child(1) {
			margin-right: 0.25rem;
		}

		& > div:nth-child(3) {
			margin-left: 0.25rem;
		}

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

	.searchSelect {
		border-color: var(--sapShell_InteractiveBorderColor);
		background: transparent;

		.sapMSltLabel {
			color: var(--sapShell_TextColor);
		}

		.sapMSltArrow,
		.sapMSltIcon {
			color: var(--sapShell_InteractiveTextColor);
		}

		&:hover {

			.sapMSltArrow,
			.sapMSltIcon {
				background: var(--sapShell_Hover_Background);

				&::before {
					color: var(--sapShell_TextColor);
				}
			}
		}

		&.sapMSltPressed {

			.sapMSltArrow,
			.sapMSltIcon {
				background: var(--sapShell_Active_Background);

				&::before {
					color: var(--sapShell_Active_TextColor);
				}
			}
		}

		&:focus {
			outline-color: contrast(@sapShellColor, @sapUiContentFocusColor, @sapUiContentContrastFocusColor, @sapContent_ContrastTextThreshold);
			outline-offset: -0.125rem;
			outline-style: dotted;
			outline-width: 0.0625rem;
		}

		&.sapMSltFocused {
			outline-color: contrast(@sapShellColor, @sapUiContentFocusColor, @sapUiContentContrastFocusColor, @sapContent_ContrastTextThreshold);
			outline-offset: -0.125rem;
			outline-style: dotted;
			outline-width: 0.0625rem;
		}
	}

	.searchInput {

		.sapMInputBaseContentWrapper {
			background: transparent;
			border-color: var(--sapShell_InteractiveBorderColor);
		}

		.sapMInputBaseContentWrapper:hover {
			background: var(--sapShell_Hover_Background);
		}

		.sapMInputBaseInner {
			color: var(--sapShell_TextColor);
		}

		.sapMInputBaseInner::placeholder {
			color: var(--sapShell_InteractiveTextColor);
		}

		&.sapMFocus .sapMInputBaseContentWrapper {
			outline-color: contrast(@sapShellColor, @sapUiContentFocusColor, @sapUiContentContrastFocusColor, @sapContent_ContrastTextThreshold);
			outline-offset: -0.125rem;
			outline-style: dotted;
			outline-width: 0.0625rem;
		}
	}

	/* magnifier and cancel button */
	.sapMBtn {

		.sapMBtnInner.sapMBtnDefault {
			background-color: transparent;
			border-color: transparent;
			color: var(--sapShell_TextColor);

			.sapMBtnIcon {
				color: var(--sapShell_InteractiveTextColor);
			}
		}

		&:not(.sapMBtnDisabled) {

			&:hover {

				.sapMBtnInner.sapMBtnDefault {
					background-color: var(--sapShell_Hover_Background);
					border-color: var(--sapShell_Hover_Background);
					color: var(--sapShell_TextColor);

					.sapMBtnIcon {
						color: var(--sapShell_InteractiveTextColor);
					}
				}
			}

			.sapMBtnInner.sapMBtnDefault {

				&.sapMBtnActive {
					background-color: var(--sapShell_Active_Background);
					border-color: var(--sapShell_Active_Background);
					color: var(--sapShell_Active_TextColor);

					.sapMBtnIcon {
						color: var(--sapShell_Active_TextColor);
					}
				}
			}
		}

		&:focus {
			.sapMBtnDefault.sapMFocusable {
				outline-color: contrast(@sapUiShellColor, @sapUiContentFocusColor, @sapUiContentContrastFocusColor, @sapContent_ContrastTextThreshold);
			}
		}
	}
}