/**
 * Badges. The visible label is required. Color is not the only signal.
 */

.mavi-badge {
	align-items: center;
	border: 1px solid var(--mavi-color-border);
	border-radius: var(--mavi-radius-pill);
	display: inline-flex;
	font-size: var(--mavi-font-size-small);
	font-weight: var(--mavi-font-weight-semibold);
	gap: var(--mavi-space-xs);
	line-height: 1.2;
	padding: 0.2rem 0.6rem;
}

.mavi-badge--sale {
	background: var(--mavi-color-error);
	border-color: var(--mavi-color-error);
	color: var(--mavi-color-on-accent);
}

.mavi-badge--new {
	background: var(--mavi-color-success-bg);
	border-color: var(--mavi-color-success);
	color: var(--mavi-color-success);
}

.mavi-badge--featured {
	background: var(--mavi-color-text);
	border-color: var(--mavi-color-text);
	color: var(--mavi-color-on-accent);
}

.mavi-badge--out-of-stock {
	background: var(--mavi-color-bg);
	border-style: dashed;
	border-color: var(--mavi-color-muted);
	color: var(--mavi-color-muted);
}

.mavi-badge--info {
	background: var(--mavi-color-surface);
	border-color: var(--mavi-color-border);
	color: var(--mavi-color-text);
}