/* Tailwind Elements: badges.css */

@layer components {
	.badge {
		/* Core */
		@apply inline-flex justify-center items-center space-x-2 whitespace-nowrap;
		/* Text */
		@apply font-semibold text-xs;
		/* Padding */
		@apply px-2 py-1;
		/* Theme: Rounded */
		@apply rounded-token;
	}

	.badge-icon {
		/* Core */
		@apply w-5 h-5 flex justify-center items-center rounded-full;
		/* Text */
		@apply font-semibold text-xs;
		/* Shadow */
		@apply shadow;
	}

	/* === Variants === */

	/* Glass */
	.badge-glass {
		@apply bg-surface-500/20 dark:bg-surface-500/20 backdrop-blur-lg;
		@apply ring-[1px] ring-neutral-900/5 dark:ring-neutral-50/5 ring-inset;
	}
}