const navItemTheme = {
    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-base font-medium cursor-pointer select-none transition-all duration-150 w-full rounded-[var(--nav-item-radius)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] group",
    icon: "size-4 text-[var(--color-text-secondary)]",
    text: "flex-1 min-w-0 truncate",
    states: {
        default: "text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)]",
        active: "bg-[var(--color-primary)]/10 text-[var(--color-primary)] font-semibold",
        disabled: "opacity-60 cursor-not-allowed pointer-events-none text-[var(--color-text-placeholder)]",
        hover: "hover:bg-[var(--color-background-secondary)]",
    },
    iconStates: {
        default: "text-[var(--color-text-secondary)] group-hover:text-[var(--color-text-primary)]",
        active: "text-[var(--color-primary)]",
        disabled: "opacity-60",
    },
    levels: {
        0: "",
        1: "pl-6",
        2: "pl-10",
    },
    collapsed: {
        container: "!gap-0 justify-center p-2 aspect-square",
        icon: "size-5",
    },
    activeIndicator: "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:h-5 before:w-[3px] before:rounded-full before:bg-[var(--color-primary)]",
    notificationDot: "size-2 rounded-full bg-[var(--color-danger)]",
    notificationBadge: "min-w-[18px] h-[18px] px-1 text-[10px] font-semibold rounded-full bg-[var(--color-danger)] text-[var(--color-danger-contrast)] flex items-center justify-center leading-none",
};

export { navItemTheme };
