const menuItemTheme = {
    // Base item styling with hover, focus, and disabled states
    baseStyle: "relative flex items-center gap-2 px-3 py-1.5 text-base font-[500] text-[var(--color-text-primary)] cursor-pointer outline-none select-none rounded-[var(--radius-base)] transition-colors duration-300 " +
        "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] " +
        "data-[focused=true]:bg-[var(--color-background-secondary)] " +
        "data-[selected=true]:bg-[var(--color-primary)]/5 data-[selected=true]:text-[var(--color-primary)] " +
        "mb-px last-of-type:mb-0 " +
        "data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none " +
        // Dark mode
        " " +
        " " +
        "dark:data-[focused=true]:bg-[var(--color-background-secondary)] " +
        "dark:hover:bg-[var(--color-neutral-700)] " +
        "dark:data-[selected=true]:bg-[var(--color-neutral-600)]/50 dark:data-[selected=true]:text-[var(--color-text-primary)]",
    // Danger item styling (e.g., Delete actions)
    dangerStyle: "text-[var(--color-danger)] hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)] " +
        "dark:text-[var(--color-danger-400)] dark:hover:bg-[var(--color-danger-600)] dark:hover:text-[var(--color-danger-contrast)]",
    // Focus visible styling for keyboard navigation
    focusStyle: "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
        "dark:focus-visible:ring-[var(--color-primary-400)] dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
    // Description text below the label
    subtitleStyle: "text-sm text-[var(--color-text-muted)] mt-0.5 truncate",
};

export { menuItemTheme };
