.badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--xs);
}

.badge {
	--bg-col: var(--col-contrast);
	background-color: var(--bg-col);
	padding: var(--xxxs) var(--sm);
	border-radius: var(--xs);
	font-weight: var(--text-medium);
	
	&[href] {
		transition: var(--transition);
		&:hover {
			scale: 110%;
			color: var(--col-interactive);
			background-color: color-mix(in srgb, var(--col-interactive) 20%, var(--col-white));
		}
	}
}
.badge--white {
	--bg-col: var(--col-white);
}
.badge--gray {
	--bg-col: color-mix(in srgb, var(--col-gray) 33%, transparent);
}
.badge--sm {
	font-size: var(--text-sm);
	font-weight: var(--text-normal);
	padding-inline: var(--xs);
}