.badge{
	display:inline-flex;
	padding:var(--spacing-1) var(--spacing-2);
	justify-content:center;
	align-items:center;
	border-radius:var(--radius-xs);
	font:var(--body-xs-medium);
	letter-spacing:var(--letter-spacing-xs);
	color:var(--text-body-09);
	background:var(--bg-surface-02);
	white-space:nowrap;
    transition: background-color .3s, color .3s, border-color .3s;
}

.badge svg,
.badge svg use{
	width:12px;
	height:12px;
	fill:currentColor
}

.badge.filled{
	background:var(--primary-default);
	color:var(--text-body-white)
}

.badge.outlined{
	border:1px solid var(--border-light);
	background:transparent;
    color:var(--text-body-09)
}

[data-theme="dark"] .badge.outlined {
    background: var(--bg-surface-01);
}

.badge.success{
	background:var(--success-bg);
    color:var(--text-body-white)
}
.badge.success.ghost{
	background:var(--success-ghost-bg);
	color:var(--success-text)
}
[data-theme="dark"] .badge.success.ghost {
    background: var(--bg-surface-02);
    color: var(--text-light-success);
}

.badge.warning{
	background:var(--warning-bg);
    color:var(--neutral-900)
}
.badge.warning.ghost{
	background:var(--warning-ghost-bg);
	color:var(--warning-text)
}
[data-theme="dark"] .badge.warning.ghost {
    background: var(--bg-surface-02);
    color: var(--text-light-warning);
}

.badge.error{
	background:var(--error-bg);
    color:var(--text-body-white)
}
.badge.error.ghost{
	background:var(--error-ghost-bg);
	color:var(--error-text)
}
[data-theme="dark"] .badge.error.ghost {
    background: var(--bg-surface-02);
    color: var(--text-light-error);
}

.badge.large{
	padding:var(--spacing-2) var(--spacing-3);
	font:var(--body-s-medium)
}