:host {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	outline: none;
	border: 0.0625rem solid;
	background: var(--sapButton_Emphasized_Background);
	border-color: var(--sapButton_Emphasized_BorderColor);
	color: var(--sapButton_Emphasized_TextColor);
}

:host([invalid]) {
	display: none;
}

:host([state="Positive"]) {
	background: var(--sapSuccessBackground);
	border-color: var(--sapSuccessBorderColor);
	color: var(--sapPositiveTextColor);
}

:host([state="Critical"]) {
	background: var(--sapWarningBackground);
	border-color: var(--sapWarningBorderColor);
	color: var(--sapCriticalTextColor);
}

:host([state="Negative"]) {
	background: var(--sapErrorBackground);
	border-color: var(--sapErrorBorderColor);
	color: var(--sapNegativeTextColor);
}

:host([state="Information"]) {
	background: var(--sapInformationBackground);
	border-color: var(--sapInformationBorderColor);
	color: var(--sapInformativeTextColor);
}

.ui5-avatar-badge-icon {
	width: var(--_ui5-avatar-badge-icon-size);
	height: var(--_ui5-avatar-badge-icon-size);
	color: inherit;
}