/**
 * Default theme configuration for the Radio component
 */
const radioTheme = {
    baseStyle: "relative flex items-start gap-3",
    inputContainerStyle: "relative flex-shrink-0 flex items-center justify-center",
    // Input styles with light and dark mode variants
    inputStyle: "col-start-1 row-start-1 appearance-none rounded-full border-2 transition-all duration-400 " +
        // Default state - light
        "border-[var(--color-border)] bg-[var(--color-surface)] " +
        // Default state - dark
        "dark:bg-[var(--color-background-tertiary)] " +
        // Checked state - light
        "checked:border-[var(--color-primary)]  " +
        // Checked state - dark
        "checked:bg-[var(--color-neutral-200)] " +
        // Checked outline - light
        "checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 " +
        // Checked outline - dark
        "dark:checked:outline-[var(--color-primary-900)] " +
        // Focus visible - light
        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] " +
        // Focus visible - dark
        "dark:focus-visible:outline-[var(--color-primary-500)] " +
        // Disabled state - light
        "disabled:bg-[var(--color-background-disabled)] disabled:checked:outline-0 " +
        "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
        // Disabled state - dark
        "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
    dotStyle: "absolute inset-0 m-auto pointer-events-none rounded-full bg-[var(--color-primary)]",
    descriptionStyle: "text-base text-[var(--color-text-secondary)]/80 mt-0.5",
    sizes: {
        sm: "size-5 mt-0.25",
        md: "size-6",
    },
    // Group styles
    groupStyle: "flex flex-col gap-1.5",
    groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
    groupDescriptionStyle: "text-base text-[var(--color-text-secondary)]/80 -mt-0.5 mb-1",
    groupErrorStyle: "text-base text-[var(--color-danger)] mt-1.5",
    groupItemsStyle: "flex flex-col gap-3",
};

export { radioTheme };
