import { formsBaseTheme } from '../forms.theme.js';

/**
 * Default theme for InputOTP component - Clean & Organized
 * Uses flat structure with design tokens following library patterns
 */
const inputOTPTheme = {
    // Base container styles
    wrapperStyle: formsBaseTheme.wrapperStyle,
    // OTP input container
    containerStyle: 'flex items-center gap-3',
    // Individual input field styles with design tokens
    inputStyle: 'text-center text-xl text-[var(--color-text-primary)] h-full !p-0',
    // Input group wrapper for grouped inputs (overrides default Input styling)
    inputGroupStyle: 'w-10 min-w-10 h-10 min-h-10 sm:w-12 sm:min-w-12 sm:h-12 sm:min-h-12',
    // Separator between input groups
    separatorStyle: 'text-[var(--color-text-muted)] font-medium select-none',
    // Helper text with state handling (reuses form base)
    helperText: formsBaseTheme.helperText,
};

export { inputOTPTheme };
