:host {
	display: inline-block;
}

:host([disabled]) {
	pointer-events: none;
}

.ui5-ai-button-text {
	display: inline-block;
}

:host([icon-only]) .ui5-ai-button-text {
	min-width: 0;
	margin-inline-start: 0;
}

.ui5-ai-button-hidden {
	position: absolute;
	top: -10000px;
	left: -10000px;
	visibility: hidden;
	display: block;
	width: fit-content;
}

:host .ui5-ai-button-inner {
	width: 100%;
}

/* Animated parts */

:host {
	width: auto;
	position: relative;
	transition: width 0.18s cubic-bezier(0.67, 1, 0.95, 1.3) 0.12s;
}

:host(.ui5-ai-button-menu-to-button) .ui5-ai-button-inner::part(button),
:host(.ui5-ai-button-fade-out:not([icon-only])) .ui5-ai-button-inner::part(button) {
	justify-content: flex-start;
}

:host([icon-only]) .ui5-ai-button-inner[_end-icon=""]::part(textButton),
:host(.ui5-ai-button-menu-to-button[icon-only]) .ui5-ai-button-inner::part(textButton) {
	min-width: var(--_ui5_button_base_min_width) !important;
	max-width: var(--_ui5_button_base_min_width) !important;
}

:host(.ui5-ai-button-menu-to-button) .ui5-ai-button-inner::part(button),
:host(.ui5-ai-button-fade-out:not([icon-only])) .ui5-ai-button-inner::part(button) {
	justify-content: flex-start;
}

:host([icon-only]) .ui5-ai-button-inner[_end-icon]:not([_end-icon=""])::part(button),
:host([icon-only]) .ui5-ai-button-inner[_hide-arrow-button]::part(button) {
	justify-content: flex-start;
	padding-inline-start: var(--_ui5_button_base_padding);
}

:host(.ui5-ai-button-fade-in[icon-only]) .ui5-ai-button-inner[_end-icon=""]::part(button) {
	max-width: var(--_ui5_button_base_min_width);
}

:host([icon-only]) .ui5-ai-button-inner[_end-icon=""]::part(textButton),
:host(.ui5-ai-button-menu-to-button[icon-only]) .ui5-ai-button-inner::part(textButton) {
	min-width: var(--_ui5_button_base_min_width);
	max-width: var(--_ui5_button_base_min_width);
}

:host(:not(.ui5-ai-button-fade-out):not(.ui5-ai-button-fade-mid):not(.ui5-ai-button-fade-in)) .ui5-ai-button-text,
:host(:not(.ui5-ai-button-fade-out):not(.ui5-ai-button-fade-mid):not(.ui5-ai-button-fade-in)) ::part(endIcon),
:host(:not(.ui5-ai-button-fade-out):not(.ui5-ai-button-fade-mid):not(.ui5-ai-button-fade-in)) ::part(arrowButton) {
	opacity: 1;
	transform: translateY(0);
}

:host(.ui5-ai-button-button-to-menu) .ui5-ai-button-inner::part(endIcon),
:host(.ui5-ai-button-button-to-menu) .ui5-ai-button-inner::part(arrowButton) {
	display: none;
	transform: translateY(0);
	opacity: 0;
}

:host(.ui5-ai-button-button-to-menu) .ui5-ai-button-inner::part(endIcon),
:host(.ui5-ai-button-button-to-menu) .ui5-ai-button-inner::part(arrowButton) {
	display: none;
	transform: translateY(0);
	opacity: 0;
}

/* Fade out phase */

:host(.ui5-ai-button-fade-out) .ui5-ai-button-text {
	opacity: 0;
	transform: translateY(-1rem);
	transition: opacity 0.06s ease-in-out 0.12s, transform 0.08s ease-in-out 0.12s;
}

:host(.ui5-ai-button-fade-out) ::part(icon)
{
	opacity: 0;
	transform: translateY(-1rem);
	transition: opacity 0.05s ease-in-out 0.025s, transform 0.10s ease-in-out 0s;
}

:host(.ui5-ai-button-fade-out) ::part(endIcon) {
	opacity: 0;
	transform: translateY(-1rem);
	transition: opacity 0.06s ease-in-out 0.12s, transform 0.08s ease-in-out 0.12s;
}

/* Fade middle phase */

:host(.ui5-ai-button-fade-mid) .ui5-ai-button-text,
:host(.ui5-ai-button-fade-mid) ::part(icon),
:host(.ui5-ai-button-fade-mid) ::part(endIcon),
:host(.ui5-ai-button-fade-mid) ::part(arrowButton) {
	opacity: 0;
	transform: translateY(1rem);
	transition: none;
}

/* Fade in phase */

:host(.ui5-ai-button-fade-in) .ui5-ai-button-text {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.06s ease-in-out 0.12s, transform 0.08s ease-in-out 0.12s;
}

:host(.ui5-ai-button-fade-in) ::part(icon) {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.05s ease-in-out 0.025s, transform 0.10s ease-in-out 0s;
}

:host(.ui5-ai-button-fade-in) ::part(endIcon) {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.06s ease-in-out 0.12s, transform 0.08s ease-in-out 0.12s;
}