.badge--base {
	background-color: hsl(var(--base) / 0.15);
	border: 1px solid hsl(var(--base));
	color: hsl(var(--base));
}
.badge--primary {
	background-color: hsl(var(--primary));
	border: 1px solid hsl(var(--primary));
	color: hsl(var(--white));
}
.badge--three {
	background-color: hsl(var(--accent));
	border: 1px solid hsl(var(--accent));
	color: hsl(var(--white));
}

.badge--secondary {
	background-color: hsl(var(--secondary) / 0.15);
	border: 1px solid hsl(var(--secondary));
	color: hsl(var(--secondary));
}
.badge--success {
	background-color: hsl(var(--success) / 0.15);
	border: 1px solid hsl(var(--success));
	color: hsl(var(--success));
}
.badge--danger {
	background-color: #ff3333;
	border: 1px solid #ff3333;
	color: hsl(var(--white));
}
.badge--warning {
	background-color: hsl(var(--warning) / 0.15);
	border: 1px solid hsl(var(--warning));
	color: hsl(var(--warning));
}
.badge--info {
	background-color: hsl(var(--info) / 0.15);
	border: 1px solid hsl(var(--info));
	color: hsl(var(--info));
}
.badge--dark {
	background-color: hsl(var(--dark) / 0.15);
	border: 1px solid hsl(var(--dark));
	color: hsl(var(--dark));
}

.badge {
	border-radius: 18px;
	padding: 12px 30px;
	border-radius: 10px;
	font-weight: 400;
	font-size: 16px;
	&.active {
		background-color: #B1B1B1;
		border-color: #B1B1B1;
		color: #755858 !important;
	}
	&.badge--icon {
		padding: 5px;
		border-radius: 5px;
	}
	&.badge--lg {
		padding: 6px 16px;
	}
	&.badge--md {
		padding: 4px 12px;
	}
	&.badge--sm {
		padding: 3px 10px;
	}
}

// Badge Fill
$colors: "primary" hsl(var(--primary)), "secondary" hsl(var(--secondary)), "success" hsl(var(--success)), "danger" hsl(var(--danger)), "warning" hsl(var(--warning)), "info" hsl(var(--info)), "light" hsl(var(--light)), "dark" hsl(var(--dark)),
	"base" hsl(var(--base));

@each $name, $color in $colors {
	.badge--fill-#{$name} {
		background-color: $color;
		border: 1px solid $color;
		color: hsl(var(--white));
		&:hover {
			color: hsl(var(--white));
		}
	}
}