/**
 * Badges and tags (design-system.md §8).
 *
 * A badge is never the only carrier of meaning, and only the category badge is
 * interactive. Everything else here is a label that happens to have a
 * background.
 */

.ait-badge {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 2px 10px;
	border-radius: var(--r-full);
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 600;
	line-height: var(--lh-tight);
	text-decoration: none;
	white-space: nowrap;
}

/* The one interactive badge: it links to the cluster hub. */
.ait-badge--category {
	background: var(--c-success);
	color: var(--c-ink);
}

.ait-badge--category:hover {
	background: var(--c-success);
	color: var(--c-ink);
	text-decoration: underline;
}

.ait-badge--free {
	border-radius: var(--r-sm);
	background: var(--c-accent);
	color: var(--c-accent-ink);
}

.ait-badge--new {
	background: var(--c-primary);
	color: var(--c-bg);
}

.ait-badge--updated {
	border: 1.5px solid var(--c-primary-light);
	color: var(--c-ink);
}