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

:host(:not([hidden])) {
	display: inline-block;
}

:host {
	min-width: var(--_ui5_button_base_min_width);
	height: var(--_ui5_button_base_height);
	line-height: normal;
	font-family: var(--_ui5_button_fontFamily);
	font-size: var(--sapFontSize);
	text-shadow: var(--_ui5_button_text_shadow);
	border-radius: var(--_ui5_button_border_radius);
	cursor: pointer;
	background-color: var(--sapButton_Background);
	border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
	color: var(--sapButton_TextColor);
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-tap-highlight-color: transparent;
}

.ui5-button-root {
	min-width: inherit;
	cursor: inherit;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	outline: none;
	padding: 0 var(--_ui5_button_base_padding);
	position: relative;
	background: transparent;
	border: none;
	color: inherit;
	text-shadow: inherit;
	font: inherit;
	white-space: inherit;
	overflow: inherit;
	text-overflow: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	line-height: inherit;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

:host(:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
:host(:not([hidden]):not([disabled]).ui5_hovered) {
	background: var(--sapButton_Hover_Background);
	border: 1px solid var(--sapButton_Hover_BorderColor);
	color: var(--sapButton_Hover_TextColor);
}

.ui5-button-icon,
.ui5-button-end-icon {
	color: inherit;
	flex-shrink: 0;
}

.ui5-button-end-icon {
	margin-inline-start: var(--_ui5_button_base_icon_margin);
}

:host([icon-only]:not([has-end-icon])) .ui5-button-root {
	min-width: auto;
	padding: 0;
}

:host([icon-only]) .ui5-button-text {
	display: none;
}

.ui5-button-text {
	outline: none;
	position: relative;
	white-space: inherit;
	overflow: inherit;
	text-overflow: inherit;
}

:host([has-icon]:not(:empty)) .ui5-button-text {
	margin-inline-start: var(--_ui5_button_base_icon_margin);
}

:host([has-end-icon]:not([has-icon]):empty) .ui5-button-end-icon {
	margin-inline-start: 0;
}

:host([disabled]) {
	opacity: var(--sapContent_DisabledOpacity);
	pointer-events: unset;
	cursor: default;
}

:host([has-icon]:not([icon-only]):not([has-end-icon])) .ui5-button-text{
	/* calculating the minimum width by removing the icon size  */
	min-width: calc(var(--_ui5_button_base_min_width) - var(--_ui5_button_base_icon_margin) - 1rem);
}
:host([disabled]:active) {
	pointer-events: none;
}

:host([desktop]:not([loading])) .ui5-button-root:focus-within:after,
:host(:not([active])) .ui5-button-root:focus-visible:after,
:host([desktop][active][design="Emphasized"]) .ui5-button-root:focus-within:after,
:host([active][design="Emphasized"]) .ui5-button-root:focus-visible:after,
:host([desktop][active]) .ui5-button-root:focus-within:before,
:host([active]) .ui5-button-root:focus-visible:before {
	content: "";
	position: absolute;
	box-sizing: border-box;
	pointer-events: none;
	left: 0.0625rem;
	top: 0.0625rem;
	right: 0.0625rem;
	bottom: 0.0625rem;
	border: var(--_ui5_button_focused_border);
	border-radius: var(--_ui5_button_focused_border_radius);
}

:host([desktop][active]) .ui5-button-root:focus-within:before,
:host([active]) .ui5-button-root:focus-visible:before {
	border-color: var(--_ui5_button_pressed_focused_border_color);
}

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

:host([design="Emphasized"][desktop]) .ui5-button-root:focus-within:before,
:host([design="Emphasized"]) .ui5-button-root:focus-visible:before {
	content: "";
	position: absolute;
	box-sizing: border-box;
	left: 0.0625rem;
	top: 0.0625rem;
	right: 0.0625rem;
	bottom: 0.0625rem;
	border: var(--_ui5_button_emphasized_focused_border_before);
	border-radius: var(--_ui5_button_focused_border_radius);
}

.ui5-button-root::-moz-focus-inner {
	border: 0;
}

bdi {
	display: block;
	white-space: inherit;
	overflow: inherit;
	text-overflow: inherit;
}

:host([ui5-button][active]:not([disabled]):not([non-interactive])) {
	background-image: none;
	background-color: var(--sapButton_Active_Background);
	border-color: var(--sapButton_Active_BorderColor);
	color: var(--sapButton_Active_TextColor);
}

:host([design="Positive"]) {
	background-color: var(--sapButton_Accept_Background);
	border-color: var(--sapButton_Accept_BorderColor);
	color: var(--sapButton_Accept_TextColor);
}

/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
:host([design="Positive"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
:host([design="Positive"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
	background-color: var(--sapButton_Accept_Hover_Background);
	border-color: var(--sapButton_Accept_Hover_BorderColor);
	color: var(--sapButton_Accept_Hover_TextColor);
}

:host([ui5-button][design="Positive"][active]:not([non-interactive])) {
	background-color: var(--sapButton_Accept_Active_Background);
	border-color: var(--sapButton_Accept_Active_BorderColor);
	color: var(--sapButton_Accept_Active_TextColor);
}

:host([design="Negative"]) {
	background-color: var(--sapButton_Reject_Background);
	border-color: var(--sapButton_Reject_BorderColor);
	color: var(--sapButton_Reject_TextColor);
}

/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
:host([design="Negative"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
:host([design="Negative"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
	background-color: var(--sapButton_Reject_Hover_Background);
	border-color: var(--sapButton_Reject_Hover_BorderColor);
	color: var(--sapButton_Reject_Hover_TextColor);
}

:host([ui5-button][design="Negative"][active]:not([non-interactive])) {
	background-color: var(--sapButton_Reject_Active_Background);
	border-color: var(--sapButton_Reject_Active_BorderColor);
	color: var(--sapButton_Reject_Active_TextColor);
}

:host([design="Attention"]) {
	background-color: var(--sapButton_Attention_Background);
	border-color: var(--sapButton_Attention_BorderColor);
	color: var(--sapButton_Attention_TextColor);
}

/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
:host([design="Attention"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
:host([design="Attention"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
	background-color: var(--sapButton_Attention_Hover_Background);
	border-color: var(--sapButton_Attention_Hover_BorderColor);
	color: var(--sapButton_Attention_Hover_TextColor);
}

:host([ui5-button][design="Attention"][active]:not([non-interactive])) {
	background-color: var(--sapButton_Attention_Active_Background);
	border-color: var(--sapButton_Attention_Active_BorderColor);
	color: var(--sapButton_Attention_Active_TextColor);
}

:host([design="Emphasized"]) {
	background-color: var(--sapButton_Emphasized_Background);
	border-color: var(--sapButton_Emphasized_BorderColor);
	border-width: var(--_ui5_button_emphasized_border_width);
	color: var(--sapButton_Emphasized_TextColor);
	font-family: var(--sapButton_Emphasized_FontFamily);
}

/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
:host([design="Emphasized"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
:host([design="Emphasized"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
	background-color: var(--sapButton_Emphasized_Hover_Background);
	border-color: var(--sapButton_Emphasized_Hover_BorderColor);
	border-width: var(--_ui5_button_emphasized_border_width);
	color: var(--sapButton_Emphasized_Hover_TextColor);
}

:host([ui5-button][design="Empasized"][active]:not([non-interactive])) {
	background-color: var(--sapButton_Emphasized_Active_Background);
	border-color: var(--sapButton_Emphasized_Active_BorderColor);
	color: var(--sapButton_Emphasized_Active_TextColor);
}

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

/* Belize related */
:host([design="Emphasized"][desktop][active]:not([non-interactive])) .ui5-button-root:focus-within:after,
:host([design="Emphasized"][active]:not([non-interactive])) .ui5-button-root:focus-visible:after  {
	border-color: var(--_ui5_button_emphasized_focused_active_border_color);
}

:host([design="Transparent"]) {
	background-color: var(--sapButton_Lite_Background);
	color: var(--sapButton_Lite_TextColor);
	border-color: var(--sapButton_Lite_BorderColor);
}

/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
:host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
:host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
	background-color: var(--sapButton_Lite_Hover_Background);
	border-color: var(--sapButton_Lite_Hover_BorderColor);
	color: var(--sapButton_Lite_Hover_TextColor);
}

:host([ui5-button][design="Transparent"][active]:not([non-interactive])) {
	background-color: var(--sapButton_Lite_Active_Background);
	border-color: var(--sapButton_Lite_Active_BorderColor);
	color: var(--sapButton_Active_TextColor);
}

/* SegmentedButton and ToggleButton */
:host([ui5-segmented-button-item][active][desktop]) .ui5-button-root:focus-within:after,
:host([ui5-segmented-button-item][active]) .ui5-button-root:focus-visible:after,
:host([pressed][desktop]) .ui5-button-root:focus-within:after,
:host([pressed]) .ui5-button-root:focus-visible:after {
	border-color: var(--_ui5_button_pressed_focused_border_color);
	outline: none;
}

:host([ui5-segmented-button-item][desktop]:not(:last-child)) .ui5-button-root:focus-within:after,
:host([ui5-segmented-button-item]:not(:last-child)) .ui5-button-root:focus-visible:after  {
	border-top-right-radius: var(--_ui5_button_focused_inner_border_radius);
	border-bottom-right-radius: var(--_ui5_button_focused_inner_border_radius);
}

:host([ui5-segmented-button-item][desktop]:not(:first-child)) .ui5-button-root:focus-within:after,
:host([ui5-segmented-button-item]:not(:first-child)) .ui5-button-root:focus-visible:after {
	border-top-left-radius: var(--_ui5_button_focused_inner_border_radius);
	border-bottom-left-radius: var(--_ui5_button_focused_inner_border_radius);
}


/* Button with badge */
::slotted([slot="badge"][design="InlineText"]) {
	pointer-events: initial;
	font-family: var(--sapButton_FontFamily);
	font-size: var(--sapFontSmallSize);
	padding-inline-start: 0.25rem;
	--_ui5-tag-height: 0.625rem;
}

::slotted([slot="badge"][design="OverlayText"]) {
	pointer-events: initial;
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	margin: -0.5rem;
	z-index: 1;
	font-family: var(--sapButton_FontFamily);
	font-size: var(--sapFontSmallSize);
	--_ui5-tag-height: 0.625rem;
}

::slotted([slot="badge"][design="AttentionDot"]) {
	pointer-events: initial;
	content: "";
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	margin: -0.25rem;
	z-index: 1;
}

:host(:state(has-overlay-badge)) {
	overflow: visible;
	margin-inline-end: 0.3125rem;
}

:host([loading]){
	position: relative;
	pointer-events: unset;
}

:host([loading]) .ui5-button-root {
	opacity: var(--sapContent_DisabledOpacity);
}

:host([loading][design="Emphasized"]) {
	background-color: inherit;
	border: inherit;
}

:host([design="Emphasized"][loading]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
:host([design="Emphasized"][loading]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
	background-color: inherit;
	border: inherit;
}

:host([design="Emphasized"][loading]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover) .ui5-button-root,
:host([design="Emphasized"][loading]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) .ui5-button-root {
	background-color: var(--sapButton_Emphasized_Hover_Background);
}

:host([loading][design="Emphasized"]) .ui5-button-root {
	background-color: var(--sapButton_Emphasized_Background);
	border-color: var(--sapButton_Emphasized_BorderColor);
}

.ui5-button-busy-indicator {
	position: absolute;
	height: 100%;
	width: 100%;
	top:0;
}

:host([has-end-icon]:not([icon])) .ui5-button-root {
	justify-content: flex-start;
}

:host([icon-only]) .ui5-button-root {
	justify-content: center;
}

:host([has-end-icon]:not([icon]):not(:empty)) .ui5-button-end-icon {
	padding-inline-start: var(--_ui5_button_base_icon_margin);
	margin-inline-start: auto;
}