const selectableCardTheme = {
    group: "flex flex-col gap-3",
    card: 
    // Base layout
    "relative flex items-center justify-between gap-4 rounded-[var(--radius-base)] p-4 cursor-pointer transition-[border-color,background-color,box-shadow,outline] duration-200 " +
        // Default state - light
        "border border-[var(--color-border)] bg-[var(--color-surface)] " +
        // Default state - dark
        "dark:bg-[var(--color-background)] " +
        // Hover state - light
        "hover:border-[var(--color-border-secondary)] " +
        // Hover state - dark
        "  " +
        // Focus visible - light
        "focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-[var(--color-primary)] " +
        // Focus visible - dark
        "dark:focus-visible:outline-[var(--color-primary)]/50",
    selectedCard: 
    // Selected border & ring - light
    "border-[var(--color-primary)] ring-2 ring-[var(--color-primary)]/10  " +
        // Selected border & ring - dark
        "dark:border-[var(--color-primary)] dark:ring-[var(--color-primary)]/20  " +
        // Selected background gradient - light
        "bg-[var(--color-primary-50)] " +
        // Selected background gradient - dark
        "dark:bg-[var(--color-background-secondary)] " +
        // Selected hover - light
        "hover:border-[var(--color-primary)] " +
        // Selected hover - dark
        "dark:hover:border-[var(--color-primary)] ",
    disabledCard: 
    // Disabled state
    "opacity-50 cursor-not-allowed pointer-events-none",
    contentWrapper: "flex-1 min-w-0",
    indicator: "flex-shrink-0",
};

export { selectableCardTheme };
