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

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