Badge

.pds-badge {
	--badge-bg: var(--pds-color-badge-brand-muted-background);
	--badge-fg: var(--pds-color-badge-brand-muted-foreground);
	/* Default size, equivalent to .pds-badge--s — a fallback for markup built
	   without the React component (e.g. static HTML) that omits a size class. */
	--badge-font-size: var(--pds-typography-size-xs);
	--badge-height: var(--pds-spacing-xl);
	--badge-icon-gap: var(--pds-spacing-3xs);
	--badge-padding-inline: var(--pds-spacing-2xs);

	align-items: center;
	background-color: var(--badge-bg);
	border-radius: var(--pds-border-radius-default);
	color: var(--badge-fg);
	display: inline-flex;
	flex-shrink: 0;
	font-size: var(--badge-font-size);
	font-weight: var(--pds-typography-fw-medium);
	/* Only takes effect when there's an icon alongside the label */
	gap: var(--badge-icon-gap);
	height: var(--badge-height);
	inline-size: fit-content;
	line-height: 1;
	padding-inline: var(--badge-padding-inline);
	white-space: nowrap;
}

.pds-badge__icon {
	flex-shrink: 0;
}

/* Sizes */
.pds-badge--xs {
	--badge-font-size: var(--pds-typography-size-2xs);
	--badge-height: var(--pds-spacing-l);
	--badge-padding-inline: var(--pds-spacing-3xs);
}

.pds-badge--s {
	--badge-font-size: var(--pds-typography-size-xs);
	--badge-height: var(--pds-spacing-xl);
	--badge-padding-inline: var(--pds-spacing-2xs);
}

.pds-badge--m {
	--badge-font-size: var(--pds-typography-size-s);
	--badge-height: 1.875rem;
	--badge-icon-gap: var(--pds-spacing-2xs);
	--badge-padding-inline: var(--pds-spacing-s);
}

/* Color variants — solid */
.pds-badge--brand {
	--badge-bg: var(--pds-color-badge-brand-background);
	--badge-fg: var(--pds-color-badge-brand-foreground);
}

.pds-badge--critical {
	--badge-bg: var(--pds-color-badge-critical-background);
	--badge-fg: var(--pds-color-badge-critical-foreground);
}

.pds-badge--discovery {
	--badge-bg: var(--pds-color-badge-discovery-background);
	--badge-fg: var(--pds-color-badge-discovery-foreground);
}

.pds-badge--gold {
	--badge-bg: var(--pds-color-badge-gold-background);
	--badge-fg: var(--pds-color-badge-gold-foreground);
}

.pds-badge--indigo {
	--badge-bg: var(--pds-color-badge-indigo-background);
	--badge-fg: var(--pds-color-badge-indigo-foreground);
}

.pds-badge--info {
	--badge-bg: var(--pds-color-badge-info-background);
	--badge-fg: var(--pds-color-badge-info-foreground);
}

.pds-badge--ink {
	--badge-bg: var(--pds-color-badge-ink-background);
	--badge-fg: var(--pds-color-badge-ink-foreground);
}

.pds-badge--lime {
	--badge-bg: var(--pds-color-badge-lime-background);
	--badge-fg: var(--pds-color-badge-lime-foreground);
}

.pds-badge--orange {
	--badge-bg: var(--pds-color-badge-orange-background);
	--badge-fg: var(--pds-color-badge-orange-foreground);
}

.pds-badge--rose {
	--badge-bg: var(--pds-color-badge-rose-background);
	--badge-fg: var(--pds-color-badge-rose-foreground);
}

.pds-badge--silver {
	--badge-bg: var(--pds-color-badge-silver-background);
	--badge-fg: var(--pds-color-badge-silver-foreground);
}

.pds-badge--sky {
	--badge-bg: var(--pds-color-badge-sky-background);
	--badge-fg: var(--pds-color-badge-sky-foreground);
}

.pds-badge--slate {
	--badge-bg: var(--pds-color-badge-slate-background);
	--badge-fg: var(--pds-color-badge-slate-foreground);
}

.pds-badge--stone {
	--badge-bg: var(--pds-color-badge-stone-background);
	--badge-fg: var(--pds-color-badge-stone-foreground);
}

.pds-badge--success {
	--badge-bg: var(--pds-color-badge-success-background);
	--badge-fg: var(--pds-color-badge-success-foreground);
}

.pds-badge--warning {
	--badge-bg: var(--pds-color-badge-warning-background);
	--badge-fg: var(--pds-color-badge-warning-foreground);
}

/* Color variants — muted */

.pds-badge--brand-muted {
	--badge-bg: var(--pds-color-badge-brand-muted-background);
	--badge-fg: var(--pds-color-badge-brand-muted-foreground);
}

.pds-badge--critical-muted {
	--badge-bg: var(--pds-color-badge-critical-muted-background);
	--badge-fg: var(--pds-color-badge-critical-muted-foreground);
}

.pds-badge--discovery-muted {
	--badge-bg: var(--pds-color-badge-discovery-muted-background);
	--badge-fg: var(--pds-color-badge-discovery-muted-foreground);
}

.pds-badge--gold-muted {
	--badge-bg: var(--pds-color-badge-gold-muted-background);
	--badge-fg: var(--pds-color-badge-gold-muted-foreground);
}

.pds-badge--indigo-muted {
	--badge-bg: var(--pds-color-badge-indigo-muted-background);
	--badge-fg: var(--pds-color-badge-indigo-muted-foreground);
}

.pds-badge--info-muted {
	--badge-bg: var(--pds-color-badge-info-muted-background);
	--badge-fg: var(--pds-color-badge-info-muted-foreground);
}

.pds-badge--ink-muted {
	--badge-bg: var(--pds-color-badge-ink-muted-background);
	--badge-fg: var(--pds-color-badge-ink-muted-foreground);
}

.pds-badge--lime-muted {
	--badge-bg: var(--pds-color-badge-lime-muted-background);
	--badge-fg: var(--pds-color-badge-lime-muted-foreground);
}

.pds-badge--orange-muted {
	--badge-bg: var(--pds-color-badge-orange-muted-background);
	--badge-fg: var(--pds-color-badge-orange-muted-foreground);
}

.pds-badge--rose-muted {
	--badge-bg: var(--pds-color-badge-rose-muted-background);
	--badge-fg: var(--pds-color-badge-rose-muted-foreground);
}

.pds-badge--silver-muted {
	--badge-bg: var(--pds-color-badge-silver-muted-background);
	--badge-fg: var(--pds-color-badge-silver-muted-foreground);
}

.pds-badge--sky-muted {
	--badge-bg: var(--pds-color-badge-sky-muted-background);
	--badge-fg: var(--pds-color-badge-sky-muted-foreground);
}

.pds-badge--slate-muted {
	--badge-bg: var(--pds-color-badge-slate-muted-background);
	--badge-fg: var(--pds-color-badge-slate-muted-foreground);
}

.pds-badge--stone-muted {
	--badge-bg: var(--pds-color-badge-stone-muted-background);
	--badge-fg: var(--pds-color-badge-stone-muted-foreground);
}

.pds-badge--success-muted {
	--badge-bg: var(--pds-color-badge-success-muted-background);
	--badge-fg: var(--pds-color-badge-success-muted-foreground);
}

.pds-badge--warning-muted {
	--badge-bg: var(--pds-color-badge-warning-muted-background);
	--badge-fg: var(--pds-color-badge-warning-muted-foreground);
}

/* Animated gradient fill signaling AI activity. See core.css for the
   shared temporary tokens. */
.pds-badge--ai-active {
	--badge-fg: #fff;

	background: var(--pds-gradient-ai-active-badge);
	background-size: 300% 300%;
}

@media (prefers-reduced-motion: no-preference) {
	.pds-badge--ai-active {
		animation: pds-ai-gradient-shift
			var(--pds-animation-duration-ai-active-badge) linear infinite;
	}
}

/* Agentic filled: the AI gradient as the fill. The text takes the reverse
   foreground (white in light mode, dark in dark mode). */
.pds-badge--agentic-filled {
	--badge-fg: var(--pds-color-foreground-reverse);

	background: var(--pds-gradient-ai-active);
}