@import "./FormComponents.css";
@import "./InvisibleTextStyles.css";

:host(:not([hidden])) {
	display: inline-flex;
	height: var(--_ui5_button_base_height);
	border-radius: var(--_ui5_button_border_radius);
	background-color: var(--sapButton_Background);
	box-shadow: var(--_ui5_split_button_host_default_box_shadow);
}

:host([active-arrow-button][design="Negative"]) .ui5-split-arrow-button,
:host([design="Negative"]) .ui5-split-arrow-button[active] {
	background-color: var(--sapButton_Reject_Selected_Background);
	border: 0.0625rem solid var(--sapButton_Reject_Active_BorderColor);
	color: var(--sapButton_Reject_Active_TextColor);
}

:host([active-arrow-button][design="Positive"]) .ui5-split-arrow-button,
:host([design="Positive"]) .ui5-split-arrow-button[active] {
	background-color: var(--sapButton_Accept_Selected_Background);
	border: 0.0625rem solid var(--sapButton_Accept_Active_BorderColor);
	color: var(--sapButton_Accept_Active_TextColor);
}

:host([active-arrow-button][design="Attention"]) .ui5-split-arrow-button,
:host([design="Attention"]) .ui5-split-arrow-button[active] {
	background-color: var(--sapButton_Attention_Selected_Background);
	border: 0.0625rem solid var(--sapButton_Attention_Active_BorderColor);
	color: var(--sapButton_Attention_Active_TextColor);
}

:host([active-arrow-button][design="Emphasized"]) .ui5-split-arrow-button,
:host([design="Emphasized"]) .ui5-split-arrow-button[active] {
	background-color: var(--sapButton_Emphasized_Active_Background);
	border: 0.0625rem solid var(--sapButton_Emphasized_Active_BorderColor);
}

:host([active-arrow-button][design="Transparent"]) .ui5-split-arrow-button,
:host([active-arrow-button]) .ui5-split-arrow-button,
:host([design="Transparent"]) .ui5-split-arrow-button[active],
:host([design="Default"]) .ui5-split-arrow-button[active],
.ui5-split-arrow-button[active], .ui5-split-arrow-button[active]:hover {
	background-color: var(--sapButton_Active_Background);
	border: 0.0625rem solid var(--sapButton_Lite_Active_BorderColor);
	color: var(--sapButton_Active_TextColor);
}

:host([disabled]:not([hidden])) {
	pointer-events: none;
	opacity: var(--sapContent_DisabledOpacity);
}

:host([design="Positive"]:not([hidden])) {
	background-color: var(--sapButton_Accept_Background);
	box-shadow: var(--_ui5_split_button_host_positive_box_shadow);
}

:host([design="Negative"]:not([hidden])) {
	background-color: var(--sapButton_Reject_Background);
	box-shadow: var(--_ui5_split_button_host_negative_box_shadow);
}

:host([design="Attention"]:not([hidden])) {
	background-color: var(--sapButton_Attention_Background);
	box-shadow: var(--_ui5_split_button_host_attention_box_shadow);
}

:host([design="Emphasized"]:not([hidden])) {
	background-color: var(--sapButton_Emphasized_Background);
	box-shadow: var(--_ui5_split_button_host_emphasized_box_shadow);
}

:host([design="Transparent"]:not([hidden])) {
	background-color: var(--sapButton_Lite_Background);
	box-shadow: var(--_ui5_split_button_host_transparent_box_shadow);
}

:host([design="Transparent"][disabled]:not([hidden])) {
	background-color: var(--_ui5_split_button_transparent_disabled_background);
}

:host([design="Transparent"]:not([hidden]):not([disabled]):hover) {
	background-color: var(--_ui5_split_button_host_transparent_hover_background);
	box-shadow: var(--_ui5_split_button_host_transparent_hover_box_shadow);
}

:host([design="Transparent"]:not([hidden]):not([disabled]):hover) .ui5-split-arrow-button:not(:hover),
:host([design="Transparent"]:not([hidden]):not([disabled]):hover) .ui5-split-text-button:not(:hover) {
	color: var(--_ui5_split_button_transparent_hover_color);
}

:host([desktop]) .ui5-split-button-root:focus-within,
.ui5-split-button-root:focus-visible {
	outline: 0;
}

:host([desktop]) .ui5-split-button-root:focus-within:after,
.ui5-split-button-root:focus-visible:after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	inset: 0.125rem;
	border: var(--_ui5_split_button_focused_border);
	pointer-events: none;
	border-radius: var(--_ui5_split_button_focused_border_radius);
}

:host([design="Emphasized"][desktop]) .ui5-split-button-root:focus-within:after,
:host([design="Emphasized"]) .ui5-split-button-root:focus-visible:after  {
	border-color: var(--sapContent_ContrastFocusColor);
}

:host([design="Emphasized"][desktop]) .ui5-split-button-root:focus-within .ui5-split-text-button[active]::part(button):after,
:host([design="Emphasized"]) .ui5-split-button-root:focus-visible .ui5-split-text-button[active]::part(button):after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	left: 0.0625rem;
	top: 0.0625rem;
	right: 0.0625rem;
	bottom: 0.0625rem;
	border: var(--_ui5_split_button_focused_border);
	border-radius: var(--_ui5_split_button_focused_border_radius);
}

:host([design="Emphasized"][desktop]) .ui5-split-button-root:has(.ui5-split-text-button[active]):after,
:host([design="Emphasized"]) .ui5-split-button-root:has(.ui5-split-text-button[active]):after {
	border-color: transparent;
}

.ui5-split-button-root {
	display: inline-flex;
	position: relative;
	width: inherit;
	height: 100%;
}

.ui5-split-button-root:focus,
.ui5-split-text-button:focus,
.ui5-split-arrow-button:focus {
	outline: 0;
}

.ui5-split-text-button {
	border-start-end-radius: var(--sapButton_Segment_BorderCornerRadius);
	border-end-end-radius: var(--sapButton_Segment_BorderCornerRadius);
	border-width: 0.0625rem;
	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;
	flex-grow: 1;
}

.ui5-split-text-button:hover {
	border-start-end-radius: var(--sapButton_Segment_BorderCornerRadius);
	border-end-end-radius: var(--sapButton_Segment_BorderCornerRadius);
	background-color: var(--sapButton_Hover_Background);
	box-shadow: none;
	border: var(--_ui5_split_text_button_hover_border);
	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);
	border-width: var(--_ui5_split_text_button_emphasized_border_width);
}
.ui5-split-text-button[design="Emphasized"]:hover {
	background-color: var(--sapButton_Emphasized_Hover_Background);
}
.ui5-split-text-button[design="Positive"]:hover {
	background-color: var(--sapButton_Accept_Hover_Background);
	border: var(--_ui5_split_text_button_positive_hover_border);
	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-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-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-inline-end: var(--_ui5_split_text_button_transparent_hover_border_right);
}

.ui5-split-text-button[active][design="Emphasized"] {
	background-color: var(--sapButton_Selected_Background);
	color: var(--sapButton_Emphasized_Active_TextColor);
	border-color: var(--sapButton_Emphasized_Active_BorderColor);
}
.ui5-split-text-button[active][design="Negative"] {
	background-color: var(--sapButton_Reject_Selected_Background);
	color: var(--sapButton_Reject_Active_TextColor);
	border-color: var(--sapButton_Reject_Active_BorderColor);
}
.ui5-split-text-button[active][design="Positive"] {
	background-color: var(--sapButton_Accept_Selected_Background);
	color: var(--sapButton_Accept_Active_TextColor);
	border-color: var(--sapButton_Accept_Active_BorderColor);
}
.ui5-split-text-button[active][design="Attention"] {
	background-color: var(--sapButton_Attention_Selected_Background);
	color: var(--sapButton_Attention_Active_TextColor);
	border-color: var(--sapButton_Attention_Active_BorderColor);
}
.ui5-split-text-button[active][design="Default"] {
	background-color: var(--sapButton_Active_Background);
	color: var(--sapButton_Active_TextColor);
	border-color: var(--sapButton_Active_BorderColor);
}
.ui5-split-text-button[active][design="Transparent"] {
	background-color: var(--sapButton_Active_Background);
	color: var(--sapButton_Active_TextColor);
	border-color: var(--sapButton_Active_BorderColor);
}

.ui5-split-text-button[active] {
	outline: 0;
}

.ui5-split-arrow-button {
	border-start-start-radius: var(--sapButton_Segment_BorderCornerRadius);
	border-end-start-radius: var(--sapButton_Segment_BorderCornerRadius);
	border-color: var(--_ui5_split_text_button_border_color);
	background-color: var(--_ui5_split_text_button_background_color);
	position: relative;
	border-width: 0.0625rem;
	overflow: visible;
}

.ui5-split-arrow-button:hover {
	border-start-start-radius: var(--sapButton_Segment_BorderCornerRadius);
	border-end-start-radius: var(--sapButton_Segment_BorderCornerRadius);
	background-color: var(--sapButton_Hover_Background);
	box-shadow: none;
	border: var(--_ui5_split_arrow_button_hover_border);
}

.ui5-split-arrow-button[design="Emphasized"]:hover {
	background-color: var(--sapButton_Emphasized_Hover_Background);
	border: var(--_ui5_split_arrow_button_emphasized_hover_border);
	box-shadow: var(--_ui5_split_arrow_button_emphasized_hover_box_shadow, none)
}
: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 {
	background-color: var(--sapButton_Accept_Hover_Background);
	border: var(--_ui5_split_arrow_button_positive_hover_border);
}

.ui5-split-arrow-button[design="Negative"]:hover {
	background-color: var(--sapButton_Reject_Hover_Background);
	border: var(--_ui5_split_arrow_button_negative_hover_border);
}

.ui5-split-arrow-button[design="Attention"]:hover {
	background-color: var(--sapButton_Attention_Hover_Background);
	border: var(--_ui5_split_arrow_button_attention_hover_border);
}

.ui5-split-arrow-button[design="Transparent"]:hover {
	background-color: var(--_ui5_split_button_transparent_hover_background);
	border: var(--_ui5_split_arrow_button_transparent_hover_border);
}

.ui5-split-arrow-button:before {
	content: "";
	position: absolute;
	box-sizing: border-box;
	pointer-events: none;
	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);
}

.ui5-split-arrow-button[design="Emphasized"]::before {
	content: "";
	position: absolute;
	box-sizing: border-box;
	pointer-events: none;
	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);
	width: 0.0625rem;
}

.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);
}

.ui5-split-arrow-button[design="Emphasized"]:hover:before {
	display: var(--_ui5_split_button_middle_separator_hover_display_emphasized);
}

/* separator colors */
.ui5-split-arrow-button[design="Transparent"]::before {
	background-color: var(--sapButton_Lite_TextColor);
}

.ui5-split-arrow-button[design="Emphasized"]::before {
	background-color: var(--sapButton_Emphasized_TextColor);
}

.ui5-split-arrow-button[design="Positive"]::before {
	background-color: var(--sapButton_Accept_TextColor);
}

.ui5-split-arrow-button[design="Negative"]::before {
	background-color: var(--sapButton_Reject_TextColor);
}

.ui5-split-arrow-button[design="Attention"]::before {
	background-color: var(--_ui5_split_button_attention_separator_color_default);
}


.ui5-split-arrow-button[desktop]::part(button):focus-within::after,
.ui5-split-arrow-button::part(button):focus-visible::after {
	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-arrow-button[desktop]::part(button):focus-within::after,
.ui5-split-text-button::part(button):focus-visible::after {
	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"] {
	color: var(--sapButton_Emphasized_Active_TextColor);
	background-color: var(--sapButton_Emphasized_Active_Background);
}

:host([design="Emphasized"][active-arrow-button]) .ui5-split-arrow-button,
.ui5-split-arrow-button[active][design="Emphasized"] {
	background-color: var(--sapButton_Selected_Background);
	color: var(--sapButton_Emphasized_Active_TextColor);
	border: var(--_ui5_split_arrow_button_emphasized_hover_border);
}

:host([design="Transparent"][active-arrow-button]:not([hidden]):not([disabled]):hover) .ui5-split-arrow-button {
	color: var(--sapButton_Active_TextColor);
}


:host([active-arrow-button]) .ui5-split-arrow-button {
	border: 0.0625rem solid var(--sapButton_Lite_Active_BorderColor);
}

:host([active-arrow-button]) .ui5-split-arrow-button::before,
.ui5-split-arrow-button[active]::before,
.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::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::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::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::before {
	background-color: var(--_ui5_split_button_attention_separator_color);
}

.ui5-split-text-button::part(button) {
    justify-content: flex-start;
	padding: 0 var(--_ui5_button_base_padding);
}