const tagTheme = {
    baseStyle: "inline-flex items-center gap-1 font-medium rounded-full " +
        "bg-[var(--color-background-surface)] dark:bg-[var(--color-background-secondary)] border border-[var(--color-border)] " +
        "text-[var(--color-text-primary)]",
    sizes: {
        sm: "text-sm px-2.5 py-0.5",
        md: "text-base px-2.5 py-0.5",
    },
    avatarSizes: {
        sm: "size-4 ml-0.5",
        md: "size-5 ml-1",
    },
    startContentSizes: {
        sm: "ml-0.5",
        md: "ml-1",
    },
    disabledStyle: "opacity-50 cursor-not-allowed",
    removeButtonStyle: "inline-flex items-center justify-center rounded-full p-1 " +
        "hover:bg-[var(--color-background-quaternary)] " +
        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] " +
        "transition-all duration-300 cursor-pointer focus:outline-none " +
        "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
    removeIconSizes: {
        sm: "size-3",
        md: "size-3.5",
    },
};

export { tagTheme };
