@mixin make-badge() {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-size: var(--font-size-100);
	border-radius: 999px;

	color: var(--color-text-invert-100);
	background-color: var(--color-primary-500);
}

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

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

	&.-primary {
		@include make-badge();
		background-color: var(--color-primary-500);
	}

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