@openui5/themelib_sap_horizon 1.119.1 → 1.120.0

package/src/sap/m/themes/sap_horizon/Select.less

@@ -118,8 +118,10 @@ html.sap-desktop .sapMSltIconOnly.focus:not(.sapMSltExpanded):not(.sapMSltDisabl
 }
 
 .sapMSlt.sapMSltReadonly {
-    background: @sapUiFieldReadOnlyBackground;
-    border-bottom: dashed @sapUiElementBorderWidth @sapUiFieldReadOnlyBorderColor;
+    border-color: @sapUiFieldReadOnlyBorderColor;
+    background:@sapUiFieldReadOnlyBackgroundStyle;
+    background-color: @sapUiFieldReadOnlyBackground;
+    box-shadow: none;
 }
 
 div.sapMSltPicker .sapMSltPickerValueState {

package/src/sap/m/themes/sap_horizon/Slider.less

@@ -12,10 +12,6 @@
 	height: 1.5rem;
 	margin-left: -1rem;
 	top: -0.625rem;
-
-	&:not(:focus) {
-		box-shadow: @sapUiContentSelectedShadow;
-	}
 }
 
 .sapMSlider {
@@ -23,7 +19,7 @@
 	align-items: center;
 }
 
-.sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
+.sapMSliderInner .sapMSliderHandle:not(:focus):not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
 	font-family: SAP-icons;
 	content: "\e29c";
 	position: absolute;
@@ -48,15 +44,13 @@
 	&:not(:focus) {
 		border-color: @sapUiSliderHoverHandleBorderColor;
 		background: @sapUiSliderHoverHandleBackground;
-		box-shadow: @sapUiContentSelectedShadow;
 	}
 }
 
 .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
-	background: @sapUiSliderActiveHandleBackground;
-	border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+	background: @sapUiSliderActiveRangeHandleBackground;
+	border: @sapUiContentFocusWidth solid @sapUiContentFocusColor;
 	outline: none;
-	box-shadow: none;
 	top: -0.625rem;
 }
 
@@ -128,6 +122,7 @@
 }
 
 .sapMSliderTick {
+	border-color: @sapUiContentMeasureIndicatorColor;
 	margin: 0;
 	height: .5rem;
 }

package/src/sap/m/themes/sap_horizon/SplitButton.less

@@ -8,13 +8,11 @@
 	border-color: @sapUiContentContrastFocusColor;
 }
 
-.sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnTransparent:not(.sapMToggleBtnPressed),
 .sapContrast.sapMIBar-CTX .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnTransparent:not(.sapMToggleBtnPressed),
 .sapContrast .sapMIBar-CTX .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnTransparent:not(.sapMToggleBtnPressed) {
 	border-left-color: @sapUiButtonBorderColor;
 }
 
-.sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnActive.sapMBtnTransparent:not(.sapMToggleBtnPressed),
 .sapContrast.sapMIBar-CTX .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnActive.sapMBtnTransparent:not(.sapMToggleBtnPressed),
 .sapContrast .sapMIBar-CTX .sapMSB .sapMSBArrow:not(.sapMBtnDisabled) .sapMBtnActive.sapMBtnTransparent:not(.sapMToggleBtnPressed) {
 	border-left-color: @sapUiButtonLiteActiveBorderColor;
@@ -45,7 +43,7 @@
 }
 
 .sapMSB .sapMSBInner .sapMSBText:not(.sapMSBTextIE) .sapMBtnInner {
-	margin-right: 2.3125rem;
+	margin-right: 2.25rem;
 }
 
 .sapMSB .sapMSBInner {
@@ -61,10 +59,10 @@
 
 .sapUiSizeCompact {
 	.sapMSB .sapMSBInner {
-		padding: 0.15rem 0;
+		padding: 0.1875rem 0;
 	}
 	.sapMSB .sapMSBText {
-		height: 1.75rem;
+		height: 1.625rem;
 	}
 }
 
@@ -100,8 +98,13 @@
 	background-color: @sapUiButtonAttentionBackground;
 }
 
-.sapMSB .sapMBtnInner {
-	border: none;
+.sapMMenuBtnSplit {
+	.sapMBtnInner,
+	span.sapMBtnInner.sapMBtnAccept,
+	span.sapMBtnInner.sapMBtnAttention,
+	span.sapMBtnInner.sapMBtnReject {
+		border-color: transparent;
+	}
 }
 
 .sapMSB .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
@@ -117,12 +120,18 @@
 	border-radius: 0.35rem;
 }
 
-.sapMSB.sapMSBEmphasized .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before,
-.sapMSB.sapMSBNeutral .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before,
+.sapMSB.sapMSBEmphasized .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
+	background-color: @sapUiButtonEmphasizedTextColor;
+}
+
+.sapMSB.sapMSBNeutral .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
+	background-color: @sapUiButtonInformationTextColor;
+}
+
 .sapMSB.sapMSBSuccess .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before,
 .sapMSB.sapMSBCritical .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before,
 .sapMSB.sapMSBNegative .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
-	background-color: @sapUiButtonEmphasizedTextColor;
+	background-color: @sapUiButtonSuccessTextColor;
 }
 
 .sapMSB.sapMSBAccept .sapMBtn:not(.sapMSBText) .sapMBtnInner.sapMBtnIconFirst::before {
@@ -158,7 +167,10 @@
 	border-radius: 0.375rem;
 }
 
-.sapMSB.sapMSBEmphasized:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after {
+.sapMSB.sapMSBEmphasized:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after,
+.sapMSB.sapMSBCritical:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after,
+.sapMSB.sapMSBNegative:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after,
+.sapMSB.sapMSBSuccess:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after {
 	border-color: @sapUiContentContrastFocusColor;
 }
 
@@ -167,7 +179,7 @@
 }
 
 .sapMSB :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
-	border: 0.125rem solid @sapUiContentFocusColor;
+	border: 0.0625rem solid @sapUiContentFocusColor;
 	min-width: 2.3125rem;
 
 	&.sapMBtnText > .sapUiIcon {
@@ -176,16 +188,10 @@
 
 	.sapUiIcon {
 		position: absolute;
-		top: -0.0625rem;
-		left: -0.0625rem;
-		padding-left: 0.0625rem;
+		left: 0.0625rem;
 		padding-right: 0.0625rem;
 	}
 
-	.sapMBtnContent {
-		padding-left: 0.0625rem;
-	}
-
 	.sapUiIcon + .sapMBtnContent {
 		padding-left: 1.4375rem;
 	}
@@ -198,8 +204,8 @@
 
 	:not(.sapMBtnDisabled) > span.sapMBtnInner {
 		&.sapMBtnInner.sapMBtnText {
-			padding-left: 0.4375rem;
-			padding-right: 0.5rem;
+			padding-right: 0.3125rem;
+			padding-left: 0.3125rem;
 		}
 		&.sapMBtnEmphasized.sapMBtnActive {
 			min-width: 2rem;
@@ -211,8 +217,18 @@
 	}
 }
 
-.sapMSB .sapMSBArrow:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive .sapUiIcon {
-	left: -0.0625rem;
+.sapUiSizeCompact {
+	.sapMSB :not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
+		.sapUiIcon {
+			position: absolute;
+			left: 0;
+			padding-right: 0;
+		}
+	
+		.sapMBtnContent {
+			top: 0;
+		}
+	}
 }
 
 .sapMMenuBtn .sapMBtnDisabled {
@@ -237,6 +253,13 @@ html.sap-desktop .sapMMenuBtnSplit .sapMBtn:focus > .sapMFocusable:after {
 	right: 0.125rem;
 }
 
+.sapUiSizeCompact {
+	.sapMSB:focus .sapMSBInner:not(.sapMSBInnerDisabled)::after {
+		left: 0.0625rem;
+		right: 0.0625rem;
+	}
+}
+
 html.sap-desktop .sapMSB .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
 	width: auto;
 	height: auto;

package/src/sap/m/themes/sap_horizon/Text.less

@@ -9,6 +9,9 @@
 	padding-top: 0.6875rem;
 	padding-bottom: 0.6875rem;
 }
+html[data-sap-ui-browser^="cr"] .sapUiFormEdit .sapMText {
+	line-height: 1.4375rem;
+}
 
 .sapMTB-Info-CTX > .sapMText {
 	font-style: italic;

package/src/sap/m/themes/sap_horizon/TextArea.less

@@ -13,10 +13,10 @@
 @_sapMTextAreaValueStateInformationPadding_Compact: 0.1875rem 0.5rem 0.125rem;
 @_sapMTextAreaValueStateErrorWarningPadding: 0.5rem 0.625rem 0.4375rem;
 @_sapMTextAreaValueStateErrorWarningPadding_Compact: 0.1875rem 0.5rem 0.125rem;
-@_sapMTextAreaContentWrapperPadding: 0 0 1px 0;
-@_sapMTextAreaContentWrapperValueStateSuccessPadding: 0 0 1px 0;
-@_sapMTextAreaContentWrapperValueStateInformationPadding: 0 0 2px 0;
-@_sapMTextAreaContentWrapperValueStateErrorWarningPadding: 0 0 2px 0;
+@_sapMTextAreaContentWrapperPadding: 0.0625rem;
+@_sapMTextAreaContentWrapperValueStateSuccessPadding: 0.0625rem;
+@_sapMTextAreaContentWrapperValueStateInformationPadding: 0.0625rem 0.0625rem 0.125rem 0.0625rem;
+@_sapMTextAreaContentWrapperValueStateErrorWarningPadding: 0.0625rem 0.0625rem 0.125rem 0.0625rem;
 
 .sapMInputBase.sapMTextArea {
 	min-height: 2.25rem;
@@ -46,4 +46,24 @@
 		right: 1px;
 		bottom: 1px;
 	}
+}
+
+.sapMTextArea.sapMInputBase.sapMInputBaseReadonly .sapMInputBaseContentWrapper {
+	padding: 0;
+}
+
+.sapMInputBaseContentWrapper ::-webkit-scrollbar:vertical {
+	border-top-right-radius: 0.25rem;
+	border-bottom-right-radius: 0.25rem;
+}
+
+.sapMInputBaseContentWrapper ::-webkit-scrollbar:horizontal {
+	border-bottom-left-radius: 0.25rem;
+	border-bottom-right-radius: 0.25rem;
+}
+
+.sapMTextAreaInner.sapMTextAreaGrow {
+	border: 0.0625rem solid transparent;
+	border-radius: 0.25rem;
+	right: 0;
 }

package/src/sap/m/themes/sap_horizon/Toolbar.less

@@ -10,7 +10,7 @@ html.sap-desktop .sapMTBActive.sapMTBFocused {
 
 .sapMTB {
 	height: 2.75rem;
-	padding: 0 0.5rem 0 0.25rem;
+	padding: 0 0.5rem;
 }
 
 .sapMIBar > .sapMBarChild:last-child {
@@ -19,7 +19,7 @@ html.sap-desktop .sapMTBActive.sapMTBFocused {
 
 .sapMTB-Transparent-CTX.sapMTB,
 .sapMIBar.sapMTB-Info-CTX.sapMTB {
-	padding: 0 0.5rem 0 0.75rem;
+	padding: 0 0.5rem 0 1rem;
 }
 
 /* Info Toolbar Context */

package/src/sap/m/themes/sap_horizon_dark/Button.less

@@ -159,6 +159,19 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMBtnActive.sapMFocusable
 	border-color:    @sapUiContentFocusColor;
 }
 
+// Value State Message buttons
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnCritical.sapMBtnActive {
+	border-color: @sapUiButtonCriticalBorderColor;
+}
+
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnNegative.sapMBtnActive {
+	border-color: @sapUiButtonNegativeBorderColor;
+}
+
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnSuccess.sapMBtnActive {
+	border-color: @sapButton_Success_BorderColor;
+}
+
 html.sap-desktop .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
 	content: "";
 	position: absolute;
@@ -173,10 +186,9 @@ html.sap-desktop .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before
 }
 
 html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBadgeIndicator):before,
-html.sap-desktop .sapMBtn:focus > .sapMBtnCritical.sapMFocusable:not(.sapMBadgeIndicator):before,
-html.sap-desktop .sapMBtn:focus > .sapMBtnNegative.sapMFocusable:not(.sapMBadgeIndicator):before,
-html.sap-desktop .sapMBtn:focus > .sapMBtnSuccess.sapMFocusable:not(.sapMBadgeIndicator):before,
-html.sap-desktop .sapMBtn:focus > .sapMBtnNeutral.sapMFocusable:not(.sapMBadgeIndicator):before {
+html.sap-desktop .sapMBtn:focus > .sapMBtnCritical.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator):before,
+html.sap-desktop .sapMBtn:focus > .sapMBtnNegative.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator):before,
+html.sap-desktop .sapMBtn:focus > .sapMBtnSuccess.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator):before {
 	border: 0.125rem solid @sapUiContentContrastFocusColor;
 }
 

package/src/sap/m/themes/sap_horizon_dark/CheckBox.less

@@ -159,6 +159,21 @@
 	border-radius: 0.5rem;
 }
 
+/* In Form Checkbox needs to be left aligned to bi in line with other controls (as Form itself has a padding) */
+.sapUiForm {
+	.sapMCbBg {
+		left: 0;
+	}
+
+	.sapMCb {
+		padding-left: 2.0625rem; // to have right gap between checkbox and label
+	}
+
+	.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus:before {
+		left: -0.25rem; /* more is not possible as this would cut off the focus border */
+	}
+}
+
 .sapUiSizeCompact {
 	.sapMCb {
 		height: 2rem;
@@ -196,4 +211,19 @@
 		top: 0.5625rem;
 		left: 0.5625rem;
 	}
+
+	/* In Form Checkbox needs to be left aligned to bi in line with other controls (as Form itself has a padding) */
+	.sapUiForm {
+		.sapMCbBg {
+			left: 0;
+		}
+
+		.sapMCb {
+			padding-left: 1.5rem; // to have right gap between checkbox and label
+		}
+
+		.sapMCb:not(.sapMCbBgDis).sapMCbHasLabel:focus:before {
+			left: -0.1875rem;
+		}
+	}
 }

package/src/sap/m/themes/sap_horizon_dark/MenuButton.less

@@ -60,9 +60,6 @@
 }
 
 .sapMMenuBtnSplit .sapMSB:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
-	padding-right: 0.4375rem;
-	padding-left: 0.4375rem;
-
 	.sapMBtnContent {
 		position: relative;
 		left: 0;
@@ -74,4 +71,22 @@
 		padding-right: 0.3125rem;
 		padding-left: 0.3125rem;
 	}
+	.sapMMenuBtn .sapMBtn:not(.sapMSBArrow) .sapMBtnInner .sapMBtnIcon,
+	.sapMMenuBtn .sapMBtn:not(.sapMSBArrow) .sapMBtnInner .sapMBtnContent {
+		position: relative;
+		top: 0;
+		left: 0;
+	}
+}
+
+.sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnNegative.sapMBtnActive::after {
+	color: @sapUiButtonNegativeActiveTextColor;
+}
+
+.sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnCritical.sapMBtnActive::after {
+	color: @sapUiButtonCriticalActiveTextColor;
+}
+
+.sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnSuccess.sapMBtnActive::after {
+	color: @sapUiButtonSuccessActiveTextColor;
 }

package/src/sap/m/themes/sap_horizon_dark/ObjectStatus.less

@@ -387,4 +387,28 @@ html.sap-desktop .sapMObjStatusActive.sapMObjStatusInverted {
 	background-color: @sapUiIndication8ActiveBackground;
 	border-color: @sapUiIndication8ActiveBorderColor;
 	color: @sapUiIndication8ActiveTextColor;
+}
+
+/*  Second set of inverted indication colors regular state */
+.sapMObjStatusInverted.sapMObjStatusIndication11 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication11 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication12 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication12 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication13 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication13 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication14 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication14 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication15 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication15 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication16 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication16 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication17 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication17 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication18 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication18 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication19 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication19 .sapMObjStatusIcon,
+.sapMObjStatusInverted.sapMObjStatusIndication20 .sapMObjStatusText,
+.sapMObjStatusInverted.sapMObjStatusIndication20 .sapMObjStatusIcon {
+	text-shadow: @sapUiContentTextShadow;
 }

package/src/sap/m/themes/sap_horizon_dark/ProgressIndicator.less

@@ -29,6 +29,10 @@
 	}
 }
 
+.sapMPIValueMax .sapMPIBarRemaining {
+	display: flex;
+}
+
 .sapMPIBarRemaining {
 	position: absolute;
     width: ~'calc(100% - 1.25rem)';

package/src/sap/m/themes/sap_horizon_dark/RangeSlider.less

@@ -11,15 +11,14 @@
 .sapMRangeSlider.sapMSlider .sapMSliderInner {
 	&:not(.sapMSliderInnerDisabled).sapMSliderProgress:hover ~ .sapMSliderHandle,
 	.sapMSliderHandle:hover  {
-		border: 1px @sapContent_FocusStyle @sapUiSliderHoverHandleBorderColor;
+		border: 0.0625rem @sapContent_FocusStyle @sapUiSliderHoverHandleBorderColor;
 		background: @sapUiSliderHoverRangeHandleBackground;
-		box-shadow: @sapUiContentSelectedShadow;
 	}
 
 	&:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {
 		&:not(:focus) {
 			background: transparent;
-			border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+			border: 0.125rem solid @sapUiContentFocusColor;
 			outline: none;
 			box-shadow: none;
 			top: -0.625rem;
@@ -28,7 +27,7 @@
 
 	&:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
 		background: @sapUiSliderActiveRangeHandleBackground;
-		border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+		border: 0.125rem solid @sapUiContentFocusColor;
 		outline: none;
 		box-shadow: none;
 		top: -0.625rem;
@@ -36,7 +35,6 @@
 
 	.sapMSliderHandle {
 		background: @sapUiSliderRangeHandleBackground;
-		box-shadow: @sapUiContentSelectedShadow;
 		top: -0.625rem;
 	}
 
@@ -68,7 +66,7 @@
 	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {
 		&:not(:focus) {
 			background: transparent;
-			border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+			border: @sapUiContentFocusWidth solid @sapUiContentFocusColor;
 			outline: none;
 			box-shadow: none;
 			top: -0.5rem;
@@ -85,7 +83,7 @@
 
 	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
 		background: @sapUiSliderActiveRangeHandleBackground;
-		border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+		border: 0.125rem solid @sapUiContentFocusColor;
 		outline: none;
 		box-shadow: none;
 		top: -0.5rem;

package/src/sap/m/themes/sap_horizon_dark/SearchField.less

@@ -17,6 +17,7 @@
 @_sap_m_SearchField_FocusOffset: 0;
 @_sap_m_SearchField_FocusBorderRadius: inherit;
 @_sap_m_SearchField_PlaceholderFontStyle: italic;
+@_sap_m_SearchField_ActiveBackgroundStyle: @sapUiFieldBackgroundStyle;
 
 .sapMSFF {
 	border-radius: @sapUiFieldBorderCornerRadius;
@@ -27,13 +28,8 @@
 }
 
 .sapMSFB {
-	// don't overlap the bottom line
-	margin-bottom: 1px;
-	height: ~"calc(100% - 1px)";
-
 	border-radius: @sapUiFieldBorderCornerRadius;
 	color: @sapUiFieldTextColor;
-	
 	&:first-of-type {
 		margin-left: 0.25rem;
 	}
@@ -44,6 +40,7 @@
 
 	&:hover {
 		box-shadow: @sapUiFieldHoverShadow;
+		background: @sapUiFieldBackgroundStyle;
 		background-color: @sapUiFieldHoverBackground;
 	}