@mixin make-badge() {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	font-size: var(--font-size-100);
	font-weight: 700;
	border-radius: 4px;

	color: var(--color-light-primary);
	background-color: var(--color-primary-500);
}

$components-colors: (
	'positive': 'positive-500',
	'negative': 'negative-500',
	'dark-cerulean': 'dark-cerulean',
	'bittersweet': 'bittersweet',
	'golden-poppy': 'golden-poppy'
);

.#{$component-prefix}label {
	@include make-badge();

	@each $key, $value in $components-colors {
		&.-#{$key} {
			background-color: var(--color-#{$value});
		}
	}
}