From 38861c872e211af637ff90441f1ca52aa06fc0f9 Mon Sep 17 00:00:00 2001
From: Stoyan <88034608+hinzzx@users.noreply.github.com>
Date: Wed, 17 Jan 2024 11:32:05 +0200
Subject: [PATCH] fix(ui5-split-button): fix split button when in wrapper
 (#8037)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When our <ui5-split-button> is wrapped and a width is set to the wrapper, our <ui5-split-button> is not correctly displayed.
With this change, we fix that issue and we also adopt the usage of CSS Logical Props, removing redunancies and reducing our CSS codе significantly.
---
 packages/main/src/SplitButton.hbs             |   8 +-
 packages/main/src/themes/SplitButton.css      | 224 +++++-------------
 .../themes/base/SplitButton-parameters.css    |  27 +--
 .../main/src/themes/base/rtl-parameters.css   |  14 --
 .../main/src/themes/base/sizes-parameters.css |   3 +-
 .../SplitButton-parameters.css                |  21 +-
 .../SplitButton-parameters.css                |  20 +-
 .../sap_horizon/SplitButton-parameters.css    |  15 +-
 .../SplitButton-parameters.css                |  16 +-
 .../SplitButton-parameters.css                |  15 --
 .../SplitButton-parameters.css                |  15 --
 .../SplitButton-parameters.css                |  20 +-
 .../SplitButton-parameters.css                |  20 +-
 .../SplitButton-parameters.css                |  20 +-
 .../SplitButton-parameters.css                |  20 +-
 packages/main/test/pages/SplitButton.html     |  16 +-
 16 files changed, 143 insertions(+), 331 deletions(-)

diff --git a/packages/main/src/SplitButton.hbs b/packages/main/src/SplitButton.hbs
index fdda448627c9..be74198b224d 100644
--- a/packages/main/src/SplitButton.hbs
+++ b/packages/main/src/SplitButton.hbs
@@ -28,12 +28,8 @@
 			<slot></slot>
 		{{/if}}
 	</ui5-button>
-
-	<div
-		class="ui5-split-arrow-button-wrapper"
-		dir={{effectiveDir}}
-	>
 		<ui5-button
+			dir={{effectiveDir}}
 			class="ui5-split-arrow-button"
 			design="{{design}}"
 			icon="slim-arrow-down"
@@ -49,8 +45,6 @@
 			@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
 		>
 		</ui5-button>
-	</div>
-
 	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accessibilityInfo.description}} {{accessibilityInfo.keyboardHint}} {{accessibleName}}</span>
 	<span id="{{_id}}-invisibleTextDefault" class="ui5-hidden-text">{{textButtonAccText}}</span>
 
diff --git a/packages/main/src/themes/SplitButton.css b/packages/main/src/themes/SplitButton.css
index 6062ec00e7d6..5dd13334d576 100644
--- a/packages/main/src/themes/SplitButton.css
+++ b/packages/main/src/themes/SplitButton.css
@@ -2,7 +2,7 @@
 @import "./InvisibleTextStyles.css";
 
 :host(:not([hidden])) {
-	display: inline-block;
+	display: inline-flex;
 	height: 100%;
 	border-radius: var(--_ui5_button_border_radius);
 	background-color: var(--sapButton_Background);
@@ -97,10 +97,7 @@
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
-	left: 0.125rem;
-	top: 0.125rem;
-	right: 0.125rem;
-	bottom: 0.125rem;
+	inset: 0.125rem;
 	border: var(--_ui5_split_button_focused_border);
 	pointer-events: none;
 	border-radius: var(--_ui5_split_button_focused_border_radius);
@@ -111,7 +108,7 @@
 }
 
 .ui5-split-button-root {
-	display: inline-block;
+	display: inline-flex;
 	position: relative;
 	width: inherit;
 }
@@ -123,25 +120,23 @@
 }
 
 .ui5-split-text-button {
-	border-top-right-radius: var(--_ui5_split_button_hover_border_radius);
-	border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius);
+	border-start-end-radius: var(--_ui5_split_button_hover_border_radius);
+	border-end-end-radius: var(--_ui5_split_button_hover_border_radius);
 	border-width: 0.0625rem;
-	border-right-width: var(--_ui5_split_button_text_button_right_border_width);
-	margin-right: var(--_ui5_split_button_text_button_width);
+	border-inline-end-width: var(--_ui5_split_button_text_button_right_border_width);
 	border-color: var(--_ui5_split_text_button_border_color);
 	background-color: var(--_ui5_split_text_button_background_color);
 	vertical-align: top;
-	width: inherit;
+	flex-grow: 1;
 }
 
 .ui5-split-text-button:hover {
-	border-top-right-radius: var(--_ui5_split_button_hover_border_radius);
-	border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius);
+	border-start-end-radius: var(--_ui5_split_button_hover_border_radius);
+	border-end-end-radius: var(--_ui5_split_button_hover_border_radius);
 	background-color: var(--sapButton_Hover_Background);
 	box-shadow: none;
 	border: var(--_ui5_split_text_button_hover_border);
-	border-right: var(--_ui5_split_text_button_hover_border_right);
-	border-left: var(--_ui5_split_text_button_hover_border_left);
+	border-inline-end: var(--_ui5_split_text_button_hover_border_right);
 }
 .ui5-split-text-button[design="Emphasized"] {
 	border: var(--_ui5_split_text_button_emphasized_border);
@@ -149,33 +144,26 @@
 }
 .ui5-split-text-button[design="Emphasized"]:hover {
 	background-color: var(--sapButton_Emphasized_Hover_Background);
-	border: var(--_ui5_split_text_button_emphasized_hover_border);
-	border-right: var(--_ui5_split_text_button_emphasized_hover_border_right);
-	border-left: var(--_ui5_split_text_button_emphasized_hover_border_left);
 }
 .ui5-split-text-button[design="Positive"]:hover {
 	background-color: var(--sapButton_Accept_Hover_Background);
 	border: var(--_ui5_split_text_button_positive_hover_border);
-	border-right: var(--_ui5_split_text_button_positive_hover_border_right);
-	border-left: var(--_ui5_split_text_button_positive_hover_border_left);
+	border-inline-end: var(--_ui5_split_text_button_positive_hover_border_right);
 }
 .ui5-split-text-button[design="Negative"]:hover {
 	background-color: var(--sapButton_Reject_Hover_Background);
 	border: var(--_ui5_split_text_button_negative_hover_border);
-	border-right: var(--_ui5_split_text_button_negative_hover_border_right);
-	border-left: var(--_ui5_split_text_button_negative_hover_border_left);
+	border-inline-end: var(--_ui5_split_text_button_negative_hover_border_right);
 }
 .ui5-split-text-button[design="Attention"]:hover {
 	background-color: var(--sapButton_Attention_Hover_Background);
 	border: var(--_ui5_split_text_button_attention_hover_border);
-	border-right: var(--_ui5_split_text_button_attention_hover_border_right);
-	border-left: var(--_ui5_split_text_button_attention_hover_border_left);
+	border-inline-end: var(--_ui5_split_text_button_attention_hover_border_right);
 }
 .ui5-split-text-button[design="Transparent"]:hover {
 	background-color: var(--_ui5_split_button_transparent_hover_background);
 	border: var(--_ui5_split_text_button_transparent_hover_border);
-	border-right: var(--_ui5_split_text_button_transparent_hover_border_right);
-	border-left: var(--_ui5_split_text_button_transparent_hover_border_left);
+	border-inline-end: var(--_ui5_split_text_button_transparent_hover_border_right);
 }
 
 .ui5-split-text-button[active][design="Emphasized"] {
@@ -213,60 +201,20 @@
 	outline: 0;
 }
 
-.ui5-split-arrow-button-wrapper {
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-
 .ui5-split-arrow-button {
-	border-top-left-radius: var(--_ui5_split_button_hover_border_radius);
-	border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius);
+	border-start-start-radius: var(--_ui5_split_button_hover_border_radius);
+	border-end-start-radius: var(--_ui5_split_button_hover_border_radius);
 	width: 2.25rem;
 	border-color: var(--_ui5_split_text_button_border_color);
 	background-color: var(--_ui5_split_text_button_background_color);
-}
-
-.ui5-split-text-button[dir="rtl"]:hover {
-	border-top-left-radius: var(--_ui5_split_button_hover_border_radius);
-	border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius);
-	border-left: var(--_ui5_split_text_button_hover_border_left_rtl);
-	border-right: var(--_ui5_split_text_button_hover_border_right_rtl);
-}
-
-.ui5-split-text-button[design="Emphasized"][dir="rtl"]:hover {
-	border-left: var(--_ui5_split_text_button_emphasized_hover_border_left_rtl);
-	border-right: var(--_ui5_split_text_button_emphasized_hover_border_right_rtl);
-}
-
-.ui5-split-text-button[design="Positive"][dir="rtl"]:hover {
-	border-left: var(--_ui5_split_text_button_positive_hover_border_left_rtl);
-	border-right: var(--_ui5_split_text_button_positive_hover_border_right_rtl);
-}
-
-.ui5-split-text-button[design="Negative"][dir="rtl"]:hover {
-	border-left: var(--_ui5_split_text_button_negative_hover_border_left_rtl);
-	border-right: var(--_ui5_split_text_button_negative_hover_border_right_rtl);
-}
-
-.ui5-split-text-button[design="Attention"][dir="rtl"]:hover {
-	border-left: var(--_ui5_split_text_button_attention_hover_border_left_rtl);
-	border-right: var(--_ui5_split_text_button_attention_hover_border_right_rtl);
-}
-
-.ui5-split-text-button[design="Transparent"][dir="rtl"]:hover {
-	border-left: var(--_ui5_split_text_button_transparent_hover_border_left_rtl);
-	border-right: var(--_ui5_split_text_button_transparent_hover_border_right_rtl);
-}
-
-[dir="rtl"] .ui5-split-arrow-button:hover {
-	border-top-right-radius: var(--_ui5_split_button_hover_border_radius);
-	border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius);
+	position: relative;
+	border-width: 0.0625rem;
+	overflow: visible;
 }
 
 .ui5-split-arrow-button:hover {
-	border-top-left-radius: var(--_ui5_split_button_hover_border_radius);
-	border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius);
+	border-start-start-radius: var(--_ui5_split_button_hover_border_radius);
+	border-end-start-radius: var(--_ui5_split_button_hover_border_radius);
 	background-color: var(--sapButton_Hover_Background);
 	box-shadow: none;
 	border: var(--_ui5_split_arrow_button_hover_border);
@@ -275,12 +223,10 @@
 .ui5-split-arrow-button[design="Emphasized"]:hover {
 	background-color: var(--sapButton_Emphasized_Hover_Background);
 	border: var(--_ui5_split_arrow_button_emphasized_hover_border);
-	border-left-width: var(--sapButton_BorderWidth);
+	box-shadow: var(--_ui5_split_arrow_button_emphasized_hover_box_shadow, none)
 }
-
-.ui5-split-arrow-button-wrapper[dir="rtl"] .ui5-split-arrow-button[design="Emphasized"]:hover {
-	border-left-width: var(--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl);
-	border-right-width: var(--sapButton_BorderWidth);
+[dir="rtl"].ui5-split-arrow-button[design="Emphasized"]:hover {
+	box-shadow: var(--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl, none);
 }
 
 .ui5-split-arrow-button[design="Positive"]:hover {
@@ -308,111 +254,65 @@
 	position: absolute;
 	box-sizing: border-box;
 	pointer-events: none;
-	left: var(--_ui5_split_button_middle_separator_left);
-	top: var(--_ui5_split_button_middle_separator_top);
-	right: 0;
+	width: 0.0625rem;
+	background-color: var(--sapButton_TextColor);
+	inset-inline-start: var(--_ui5_split_button_middle_separator_left);
+	inset-block-start: var(--_ui5_split_button_middle_separator_top);
 	height: var(--_ui5_split_button_middle_separator_height);
-	border: 0 solid var(--sapButton_TextColor);
-	border-left-width: 0.0625rem;
 }
 
-.ui5-split-arrow-button[design="Emphasized"]:before {
+.ui5-split-arrow-button[design="Emphasized"]::before {
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
 	pointer-events: none;
-	left: var(--_ui5_split_button_middle_separator_left);
-	top: var(--_ui5_split_button_middle_separator_top);
-	right: 0;
+	inset-inline-start: var(--_ui5_split_button_middle_separator_left);
+	inset-block-start: var(--_ui5_split_button_middle_separator_top);
+	inset-inline-end: 0;
 	height: var(--_ui5_split_button_middle_separator_height);
-	border: 0 solid var(--sapButton_TextColor);
-	border-left-width: 0.0625rem;
+	width: 0.0625rem;
 }
 
-[dir="rtl"] .ui5-split-arrow-button:before {
-	content: "";
-	position: absolute;
-	box-sizing: border-box;
-	pointer-events: none;
-	right: var(--_ui5_split_button_middle_separator_left);
-	top: var(--_ui5_split_button_middle_separator_top);
-	left: 0;
-	height: var(--_ui5_split_button_middle_separator_height);
-	border: 0 solid var(--sapButton_TextColor);
-	border-right-width: 0.0625rem;
-	border-left-width: 0;
-}
-
-.ui5-split-text-button:hover + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button:before,
+.ui5-split-text-button:hover + .ui5-split-arrow-button:before,
 .ui5-split-arrow-button:hover:before {
 	display: var(--_ui5_split_button_middle_separator_hover_display);
 }
 
-/* separator colors */
-.ui5-split-arrow-button[design="Transparent"]:before {
-	border-color: var(--sapButton_Lite_TextColor);
-}
-
-.ui5-split-arrow-button[design="Emphasized"]:before {
-	border-color: var(--sapButton_Emphasized_TextColor);
+.ui5-split-arrow-button[design="Emphasized"]:hover:before {
+	display: var(--_ui5_split_button_middle_separator_hover_display_emphasized);
 }
 
-.ui5-split-arrow-button[design="Positive"]:before {
-	border-color: var(--sapButton_Accept_TextColor);
-}
-
-.ui5-split-arrow-button[design="Negative"]:before {
-	border-color: var(--sapButton_Reject_TextColor);
-}
-
-.ui5-split-arrow-button[design="Attention"]:before {
-	border-color: var(--_ui5_split_button_attention_separator_color_default);
+/* separator colors */
+.ui5-split-arrow-button[design="Transparent"]::before {
+	background-color: var(--sapButton_Lite_TextColor);
 }
 
-.ui5-split-text-button[dir="rtl"] {
-	border-radius: 0 var(--_ui5_button_border_radius) var(--_ui5_button_border_radius) 0;
-	border-width: var(--sapButton_BorderWidth);
-	margin-right: 0;
-	margin-left: var(--_ui5_split_button_text_button_width);
+.ui5-split-arrow-button[design="Emphasized"]::before {
+	background-color: var(--sapButton_Emphasized_TextColor);
 }
 
-.ui5-split-text-button[design="Emphasized"][dir="rtl"] {
-	border-width: var(--_ui5_split_text_button_emphasized_border_width_rtl);
+.ui5-split-arrow-button[design="Positive"]::before {
+	background-color: var(--sapButton_Accept_TextColor);
 }
 
-.ui5-split-arrow-button-wrapper[dir="rtl"] {
-	left: 0;
-	right: auto;
+.ui5-split-arrow-button[design="Negative"]::before {
+	background-color: var(--sapButton_Reject_TextColor);
 }
 
-[dir="rtl"] .ui5-split-arrow-button {
-	border-radius: var(--_ui5_button_border_radius) 0 0 var(--_ui5_button_border_radius);
+.ui5-split-arrow-button[design="Attention"]::before {
+	background-color: var(--_ui5_split_button_attention_separator_color_default);
 }
 
 
 
 .ui5-split-arrow-button[focused]::part(button)::after {
-	border-top-left-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
-	border-bottom-left-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
+	border-start-start-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
+	border-end-start-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
 }
 
 .ui5-split-text-button[focused]::part(button)::after {
-	border-top-right-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
-	border-bottom-right-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
-}
-
-[dir="rtl"] .ui5-split-arrow-button[focused]::part(button)::after {
-	border-top-left-radius: var(--_ui5_split_button_inner_focused_border_radius_outer);
-	border-bottom-left-radius: var(--_ui5_split_button_inner_focused_border_radius_outer);
-	border-top-right-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
-	border-bottom-right-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
-}
-
-.ui5-split-text-button[dir="rtl"][focused]::part(button)::after {
-	border-top-left-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
-	border-bottom-left-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
-	border-top-right-radius: var(--_ui5_split_button_inner_focused_border_radius_outer);
-	border-bottom-right-radius: var(--_ui5_split_button_inner_focused_border_radius_outer);
+	border-start-end-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
+	border-end-end-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
 }
 
 .ui5-split-text-button[active][design="Emphasized"] {
@@ -438,30 +338,30 @@
 
 :host([active-arrow-button]) .ui5-split-arrow-button::before,
 .ui5-split-arrow-button[active]::before,
-.ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
-	border-color: transparent;
+.ui5-split-text-button[active] + .ui5-split-arrow-button::before {
+	background-color: var(--sapButton_TextColor);
 }
 
 :host([design="Emphasized"][active-arrow-button]) .ui5-split-arrow-button::before,
 :host([design="Emphasized"]) .ui5-split-arrow-button[active]::before,
-:host([design="Emphasized"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
-	border-color: var(--_ui5_split_button_emphasized_separator_color);
+:host([design="Emphasized"]) .ui5-split-text-button[active] + .ui5-split-arrow-button::before {
+	background-color: var(--_ui5_split_button_emphasized_separator_color);
 }
 
 :host([design="Positive"][active-arrow-button]) .ui5-split-arrow-button::before,
 :host([design="Positive"]) .ui5-split-arrow-button[active]::before,
-:host([design="Positive"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
-	border-color: var(--_ui5_split_button_positive_separator_color);
+:host([design="Positive"]) .ui5-split-text-button[active] + .ui5-split-arrow-button::before {
+	background-color: var(--_ui5_split_button_positive_separator_color);
 }
 
 :host([design="Negative"][active-arrow-button]) .ui5-split-arrow-button::before,
 :host([design="Negative"]) .ui5-split-arrow-button[active]::before,
-:host([design="Negative"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
-	border-color: var(--_ui5_split_button_negative_separator_color);
+:host([design="Negative"]) .ui5-split-text-button[active] + .ui5-split-arrow-button::before {
+	background-color: var(--_ui5_split_button_negative_separator_color);
 }
 
 :host([design="Attention"][active-arrow-button]) .ui5-split-arrow-button::before,
 :host([design="Attention"]) .ui5-split-arrow-button[active]::before,
-:host([design="Attention"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
-	border-color: var(--_ui5_split_button_attention_separator_color);
-}
\ No newline at end of file
+:host([design="Attention"]) .ui5-split-text-button[active] + .ui5-split-arrow-button::before {
+	background-color: var(--_ui5_split_button_attention_separator_color);
+}
diff --git a/packages/main/src/themes/base/SplitButton-parameters.css b/packages/main/src/themes/base/SplitButton-parameters.css
index 17a2f5c11ab4..91decf73e176 100644
--- a/packages/main/src/themes/base/SplitButton-parameters.css
+++ b/packages/main/src/themes/base/SplitButton-parameters.css
@@ -4,7 +4,7 @@
 	--_ui5_split_button_hover_border_radius: 0;
 	--_ui5_split_button_hover_border_radius: 0;
 	--_ui5_split_button_middle_separator_width: 0;
-	--_ui5_split_button_middle_separator_left: 0;
+	--_ui5_split_button_middle_separator_left: -0.0625rem;
 	--_ui5_split_button_middle_separator_hover_display: block;
 	--_ui5_split_button_text_button_width: 2.25rem;
 	--_ui5_split_button_text_button_right_border_width: 0;
@@ -39,7 +39,7 @@
 	--_ui5_split_text_button_emphasized_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
 
 
-	--_ui5_split_text_button_emphasized_border_width: 0.0625rem 0 0.0625rem 0.0625rem;
+	--_ui5_split_text_button_emphasized_border_width: 0.0625rem;
 
 
 	--_ui5_split_text_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
@@ -50,11 +50,6 @@
 	--_ui5_split_text_button_transparent_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 
 
-	--_--_ui5_split_button_text_button_border_width_rtl: 0.0625rem 0.0625rem 0.0625rem 0;
-
-	--_ui5_split_text_button_emphasized_border_width_rtl: 0.0625rem;
-
-
 	--_ui5_split_arrow_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 	--_ui5_split_arrow_button_emphasized_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
@@ -77,21 +72,5 @@
 	--_ui5_split_text_button_attention_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
 	--_ui5_split_text_button_transparent_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 
-	/* RTL */
-
-	--_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent;
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent;
-	--_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent;
-	--_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent;
-	--_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent;
-	--_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent;
-
-	--_ui5_split_text_button_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: var(--sapButton_BorderWidth);
+	--_ui5_split_button_middle_separator_hover_display_emphasized: block;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css
index c00ddb146c57..00a8636e237d 100644
--- a/packages/main/src/themes/base/rtl-parameters.css
+++ b/packages/main/src/themes/base/rtl-parameters.css
@@ -44,18 +44,4 @@
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0px;
 	--_ui5-shellbar-notification-btn-count-offset: auto;
-
-	--_ui5_split_text_button_hover_border_left: none;
-	--_ui5_split_text_button_emphasized_hover_border_left: none;
-	--_ui5_split_text_button_positive_hover_border_left: none;
-	--_ui5_split_text_button_negative_hover_border_left: none;
-	--_ui5_split_text_button_attention_hover_border_left: none;
-	--_ui5_split_text_button_transparent_hover_border_left: none;
-
-	--_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
index 9087ead0e133..bc4a3d38e7c8 100644
--- a/packages/main/src/themes/base/sizes-parameters.css
+++ b/packages/main/src/themes/base/sizes-parameters.css
@@ -132,7 +132,7 @@
 	--_ui5_timeline_tli_indicator_before_without_icon_right: -1.9375rem;
 
 	/* SplitButton */
-	--_ui5_split_button_middle_separator_top: 0;
+	--_ui5_split_button_middle_separator_top: -0.0625rem;
 	--_ui5_split_button_middle_separator_height: 2.25rem;
 
 	/* Toolbar */
@@ -304,7 +304,6 @@
 	--_ui5_slider_outer_height: 1.3125rem;
 
 	/* SplitButton */
-	--_ui5_split_button_middle_separator_top: 0;
 	--_ui5_split_button_middle_separator_height: 1.625rem;
 
 	/* StepInput */
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css
index ef1956216ede..d4fda362ffa3 100644
--- a/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css
@@ -20,15 +20,14 @@
 	--_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	
-	--_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth);
-
-	/* RTL */
-	
-	--_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem;
-
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-
-	--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem;
+	--_ui5_split_arrow_button_emphasized_hover_border: 0.0625rem solid var(--sapButton_Emphasized_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_border_left: 0.0625rem;
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css
index 5e220ca5ff8b..e096ee78344e 100644
--- a/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css
@@ -20,15 +20,15 @@
 	--_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	
-	--_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_border: 0.0625rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth);
-
-	/* RTL */
-	
-	--_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem;
-
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-
-	--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem;
+	--_ui5_split_button_middle_separator_hover_display_emphasized: none;
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon/SplitButton-parameters.css
index 4596e032b102..36f15169b535 100644
--- a/packages/main/src/themes/sap_horizon/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon/SplitButton-parameters.css
@@ -29,18 +29,5 @@
 	--_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
 	--_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 
-	/* RTL */
-
-	--_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
+	--_ui5_split_button_middle_separator_hover_display_emphasized: none;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css
index 4596e032b102..b6a9df81bc1a 100644
--- a/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css
@@ -28,19 +28,5 @@
 	--_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
 	--_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
 	--_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	/* RTL */
-
-	--_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
+	--_ui5_split_button_middle_separator_hover_display_emphasized: none;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css
index 4596e032b102..26856f6acb4d 100644
--- a/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css
@@ -28,19 +28,4 @@
 	--_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
 	--_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
 	--_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	/* RTL */
-
-	--_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css
index 4596e032b102..26856f6acb4d 100644
--- a/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css
@@ -28,19 +28,4 @@
 	--_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
 	--_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
 	--_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	/* RTL */
-
-	--_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
-	--_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
-	--_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
-	--_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css
index ef1956216ede..3c6f65e1667b 100644
--- a/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css
@@ -20,15 +20,15 @@
 	--_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	
-	--_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_border: 0.0625rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth);
-
-	/* RTL */
-	
-	--_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem;
-
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-
-	--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem;
+	--_ui5_split_button_middle_separator_hover_display_emphasized: none;
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css
index ef1956216ede..3c6f65e1667b 100644
--- a/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css
@@ -20,15 +20,15 @@
 	--_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	
-	--_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_border: 0.0625rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth);
-
-	/* RTL */
-	
-	--_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem;
-
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-
-	--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem;
+	--_ui5_split_button_middle_separator_hover_display_emphasized: none;
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css
index ef1956216ede..3c6f65e1667b 100644
--- a/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css
@@ -20,15 +20,15 @@
 	--_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	
-	--_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_border: 0.0625rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth);
-
-	/* RTL */
-	
-	--_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem;
-
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-
-	--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem;
+	--_ui5_split_button_middle_separator_hover_display_emphasized: none;
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css
index ef1956216ede..917386d59c1e 100644
--- a/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css
@@ -20,15 +20,15 @@
 	--_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
 	
-	--_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_border: 0.0625rem solid var(--sapButton_Emphasized_BorderColor);
 	--_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth);
-
-	/* RTL */
-	
-	--_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem;
-
-	--_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-	--_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor);
-
-	--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem;
+	--_ui5_split_button_middle_separator_hover_display_emphasized: none;
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow:
+		inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+		inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+		inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+	--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+	inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+	inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+	inset 0 0.0625rem 0 var(--sapButton_BorderColor);
 }
diff --git a/packages/main/test/pages/SplitButton.html b/packages/main/test/pages/SplitButton.html
index b3427816ab02..1ee7acd66e8f 100644
--- a/packages/main/test/pages/SplitButton.html
+++ b/packages/main/test/pages/SplitButton.html
@@ -14,11 +14,23 @@
 <link rel="stylesheet" type="text/css" href="./styles/SplitButton.css">
 </head>
 
-<body>
+<body style="background-color: var(--sapBackgroundColor);">
 	<header class="header">
-		<h1 class="header-title">ui5-split-button</h1>
+		<h3 class="header-title">Wrapped Split Buttons</h3>
 	</header>
 
+	<div style="border: 1px solid red; display: inline-block; width: 80px">
+		<ui5-split-button style="width: 100%" icon="picture">Random Text</ui5-split-button>
+	</div>
+
+	<div style="border: 1px solid red; display: inline-block; width: 120px">
+		<ui5-split-button style="width: 100%" icon="picture">Random Text</ui5-split-button>
+	</div>
+
+	<div style="border: 1px solid red; display: inline-block; width: 160px">
+		<ui5-split-button style="width: 100%" icon="picture">Random Text</ui5-split-button>
+	</div>
+
 	<header class="header">
 		<h3 class="header-title">Button Types</h3>
 	</header>