/**
 * Default theme for Pill component
 *
 * Simple outline style for filter chips and tags.
 * For colorful semantic variations, use Badge instead.
 */
const pillTheme = {
    /**
     * Base pill style - structure and default colors (no hover)
     */
    baseStyle: "inline-flex items-center justify-center font-medium rounded-full select-none whitespace-nowrap " +
        "ring-1 bg-white transition-all duration-300 " +
        "text-[var(--color-text-primary)] ring-[var(--color-border)] " +
        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] " +
        "dark:bg-[var(--color-background-secondary)]",
    /**
     * Hover state - applied only when interactive and NOT selected
     */
    hoverStyle: "hover:bg-[var(--color-neutral-100)] hover:ring-[var(--color-neutral-300)] " +
        "dark:hover:bg-[var(--color-neutral-800)] dark:hover:ring-[var(--color-neutral-500)]",
    /**
     * Selected state - applied when selected
     */
    selectedStyle: "bg-[var(--color-primary)]/5 ring-[var(--color-primary)] text-[var(--color-primary)] " +
        "dark:bg-[var(--color-primary)]/20 dark:text-[var(--color-primary-300)] ",
    /**
     * Size variants
     */
    sizes: {
        sm: "text-sm px-2 py-0.5 gap-0.5",
        md: "text-base px-2 py-0.5 gap-1",
        lg: "text-base px-3 py-1 gap-1.5",
    },
    /**
     * Icon sizes for iconStart and CheckIcon
     */
    iconSizes: {
        sm: "size-3",
        md: "size-3.5",
        lg: "size-4",
    },
};

export { pillTheme };
