@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-text-invert-100);
	background-color: var(--color-primary-500);
}

$components-colors: (
	'positive': 'positive-200',
	'negative': 'negative-200',
);

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

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