import { inputTheme } from '../Input/Input.theme.js';

/**
 * Default theme for the InputCreditCard component
 */
const inputCreditCardTheme = {
    container: 'w-full',
    fieldsetStyles: 'w-full',
    expiryDateWrapperStyles: 'grid grid-cols-1',
    cvcWrapperStyles: '',
    // Only keeping border radius positioning styles
    baseInputGroupStyle: '',
    // Specific styles for various positions
    topInputGroupStyle: 'rounded-t-md rounded-b-none',
    middleInputGroupStyle: 'rounded-none',
    bottomLeftInputGroupStyle: 'rounded-bl-md rounded-br-none sm:border-r-0',
    bottomRightInputGroupStyle: 'rounded-br-md rounded-bl-none',
    bottomFullInputGroupStyle: 'rounded-b-md rounded-t-none',
    // Using default input theme for all inputs
    cardNumberInput: {
        ...inputTheme,
    },
    expiryDateInput: {
        ...inputTheme,
    },
    cvcInput: {
        ...inputTheme,
    },
    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-[var(--color-text-muted)] sm:size-4',
};
/**
 * Styled theme matching the reference design
 */
({
    ...inputCreditCardTheme,
});
/**
 * Export InputCreditCardTheme for use in component
 */
const InputCreditCardTheme = inputCreditCardTheme;

export { InputCreditCardTheme, inputCreditCardTheme };
