@utility badge {
	@apply rounded-selector inline-flex items-center justify-center gap-2 align-middle;
	color: var(--badge-fg);
	border: var(--border) solid var(--badge-color, var(--color-base-200));
	font-size: 0.875rem;
	width: fit-content;
	background-size: auto, calc(var(--noise) * 100%);
	background-image: none, var(--fx-noise);
	background-color: var(--badge-bg);
	--badge-bg: var(--badge-color, var(--color-base-100));
	--badge-fg: var(--color-base-content);
	--size: calc(var(--size-selector, 0.25rem) * 6);
	height: var(--size);
	padding-inline: calc(var(--size) / 2 - var(--border));
}

@utility badge-outline {
	color: var(--badge-color);
	--badge-bg: #0000;
	background-image: none;
	border-color: currentColor;
}

@utility badge-dash {
	color: var(--badge-color);
	--badge-bg: #0000;
	background-image: none;
	border-color: currentColor;
	border-style: dashed;
}

@utility badge-soft {
	color: var(--badge-color, var(--color-base-content));
	background-color: color-mix(
		in oklab,
		var(--badge-color, var(--color-base-content)) 8%,
		var(--color-base-100)
	);
	border-color: color-mix(
		in oklab,
		var(--badge-color, var(--color-base-content)) 10%,
		var(--color-base-100)
	);
	background-image: none;
}

@utility badge-primary {
	--badge-color: var(--color-primary);
	--badge-fg: var(--color-primary-content);
}

@utility badge-secondary {
	--badge-color: var(--color-secondary);
	--badge-fg: var(--color-secondary-content);
}
@utility badge-accent {
	--badge-color: var(--color-accent);
	--badge-fg: var(--color-accent-content);
}
@utility badge-neutral {
	--badge-color: var(--color-neutral);
	--badge-fg: var(--color-neutral-content);
}
@utility badge-info {
	--badge-color: var(--color-info);
	--badge-fg: var(--color-info-content);
}
@utility badge-success {
	--badge-color: var(--color-success);
	--badge-fg: var(--color-success-content);
}
@utility badge-warning {
	--badge-color: var(--color-warning);
	--badge-fg: var(--color-warning-content);
}
@utility badge-error {
	--badge-color: var(--color-error);
	--badge-fg: var(--color-error-content);
}
@utility badge-notice {
	--badge-color: var(--color-error);
	--badge-fg: var(--color-error-content);
}
@utility badge-alert {
	--badge-color: var(--color-error);
	--badge-fg: var(--color-error-content);
}
@utility badge-ghost {
	@apply border-base-200 bg-base-200 text-base-content;
	background-image: none;
}
@utility badge-xs {
	--size: calc(var(--size-selector, 0.25rem) * 4);
	font-size: 0.625rem;
}

@utility badge-sm {
	--size: calc(var(--size-selector, 0.25rem) * 5);
	font-size: 0.75rem;
}

@utility badge-md {
	--size: calc(var(--size-selector, 0.25rem) * 6);
	font-size: 0.875rem;
}

@utility badge-lg {
	--size: calc(var(--size-selector, 0.25rem) * 7);
	font-size: 1rem;
}

@utility badge-xl {
	--size: calc(var(--size-selector, 0.25rem) * 8);
	font-size: 1.125rem;
}