:host {
	display: inline-block;
	position: relative;
	top: .2em;
	padding: .2em .3em;
	border-radius: .6em;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	width: 100%;
}
:host[hidden] {
	display: none;
}
:host[status = "failed"],
:host[status = "suspended"],
:host[status = "denied"] {
	background-color: rgb(var(--smoothly-danger-color));
	color: rgb(var(--smoothly-danger-contrast));
}
:host[status = "active"],
:host[status = "ordered"] {
	background-color: rgb(var(--smoothly-success-color));
	color: rgb(var(--smoothly-success-contrast));
}
:host[status = "inactive"],
:host[status = "cancelled"],
:host[status = "refunded"] {
	background-color: rgb(var(--smoothly-medium-color));
	color: rgb(var(--smoothly-medium-contrast));
}
:host[status="authorized"],
:host[status="created"],
:host[status="deferred"],
:host[status="pending"] {
	background-color: rgb(var(--smoothly-warning-color));
	color: rgb(var(--smoothly-warning-contrast));
}
:host[status = "charged"],
:host[status = "paid"] {
	background-color: rgb(var(--smoothly-tertiary-tint));
	color: rgb(var(--smoothly-success-contrast));
}
:host[status = "settled"] {
	background-color: rgb(var(--smoothly-tertiary-color));
	color: rgb(var(--smoothly-tertiary-contrast));
}
