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

/**
 * Default theme for the InputAddress component
 */
const inputAddressTheme = {
    container: 'w-full',
    fieldsetStyles: 'w-full',
    countryWrapperStyles: 'grid grid-cols-1',
    postalCodeWrapperStyles: '',
    // 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 both inputs
    countryInput: {
        ...inputTheme,
    },
    postalCodeInput: {
        ...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
 */
({
    ...inputAddressTheme,
});

export { inputAddressTheme };
