import { createTheme } from '@mui/material/styles';
export const textFieldTheme = (outerTheme, { hasLabel = true } = {}) => createTheme({
    ...outerTheme,
    components: {
        MuiTextField: {
            styleOverrides: {
                root: {
                    backgroundColor: 'white',
                    padding: '0px',
                    border: '1px solid #EAEAEB',
                    borderRadius: '4px',
                    '& .MuiInputBase-root': {
                        padding: '0px!important',
                        backgroundColor: 'white',
                        borderBottomLeftRadius: '4px',
                        borderBottomRightRadius: '4px',
                    },
                    '& .MuiFilledInput-root::before': {
                        content: 'none',
                    },
                    '& .MuiFilledInput-root::after': {
                        content: 'none',
                    },
                    '& .MuiInputLabel-root': {
                        paddingLeft: '4px',
                        color: '#000000',
                        textTransform: 'uppercase',
                        // helper-medium-1
                        fontSize: '12px',
                        fontWeight: '400',
                        lineHeight: '100%',
                        letterSpacing: '0.16px',
                        fontFamily: 'Work Sans, sans-serif',
                    },
                    '& .MuiInputAdornment-root': {
                        height: '100%',
                        maxHeight: '100%',
                    },
                    '& .MuiInputAdornment-positionStart': {
                        margin: '0px!important',
                        padding: '0px!important',
                    },
                    '& .MuiInputAdornment-positionEnd': {
                        margin: hasLabel
                            ? '0px 16px auto!important'
                            : '0px 16px!important',
                    },
                    '& .MuiInputBase-input': {
                        padding: hasLabel ? '0px 16px' : '10px 16px',
                        height: hasLabel ? '48px' : 'auto',
                        // label-medium-1
                        fontSize: '16px',
                        fontWeight: '400',
                        lineHeight: '120%',
                        letterSpacing: '0px',
                        fontFamily: 'Work Sans, sans-serif',
                        '&::placeholder': {
                            color: '#707276',
                        },
                        '&:-webkit-autofill': {
                            WebkitBoxShadow: '0 0 0px 1000px transparent inset !important',
                            WebkitTextFillColor: '#000 !important',
                            transition: 'background-color 5000s ease-in-out 0s', // Prevents flashing
                        },
                    },
                },
            },
        },
    },
});
