import { buttonBaseClasses } from '@mui/material/ButtonBase';
import { formLabelClasses } from '@mui/material/FormLabel';
import { inputBaseClasses } from '@mui/material/InputBase';
import { svgIconClassnames } from '../../SvgIcon';
import { tagClassnames } from '../../Tag';
export const MuiTextField = {
    styleOverrides: {
        root({ theme }) {
            return {
                [`& .${inputBaseClasses.adornedStart}`]: {
                    paddingLeft: theme.spacing(3),
                    [`& .${svgIconClassnames.root}:not(.${tagClassnames.root} .${svgIconClassnames.root})`]: {
                        width: 20,
                        height: 20,
                        [`${theme.breakpoints.down('sm')}`]: {
                            width: 24,
                            height: 24,
                        },
                    },
                    [`& .${buttonBaseClasses.root}:not(.${tagClassnames.root} > .${buttonBaseClasses.root})`]: {
                        width: 20,
                        height: 20,
                        padding: 0,
                        borderRadius: theme.shape.small,
                        [`${theme.breakpoints.down('sm')}`]: {
                            width: 24,
                            height: 24,
                        },
                    },
                },
                [`& .${inputBaseClasses.adornedEnd}`]: {
                    paddingRight: theme.spacing(3),
                    [`& .${svgIconClassnames.root}:not(.${tagClassnames.root} .${svgIconClassnames.root})`]: {
                        width: 20,
                        height: 20,
                        [`${theme.breakpoints.down('sm')}`]: {
                            width: 24,
                            height: 24,
                        },
                    },
                    [`& .${buttonBaseClasses.root}:not(.${tagClassnames.root} > .${buttonBaseClasses.root})`]: {
                        width: 20,
                        height: 20,
                        padding: 0,
                        borderRadius: theme.shape.small,
                        [`${theme.breakpoints.down('sm')}`]: {
                            width: 24,
                            height: 24,
                        },
                    },
                },
                [`& .${formLabelClasses.root}`]: {
                    marginBottom: theme.spacing(1),
                    color: theme.palette.grey[800],
                    '&.Mui-disabled': {
                        color: theme.palette.grey[500],
                    },
                    '&.Mui-focused': {
                        color: theme.palette.grey[800],
                    },
                    '&.Mui-error': {
                        color: theme.palette.grey[800],
                    },
                },
                '&.Mui-disabled': {
                    [`${inputBaseClasses.input}::placeholder`]: {
                        color: theme.palette.grey[900],
                    },
                },
            };
        },
    },
};
