import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../../@styles/theme-provider';

const createClasses = makeStyles<Theme>(theme => {
  return {
    button: {
      padding: 0
    },
    clearIcon: {
      color: theme.palette.primary[200],
      '&:hover': {
        color: theme.palette.primary[300]
      }
    },
    searchIcon: {
      color: theme.palette.primary[400]
    },
    error: {
      '& .MuiInputBase-root fieldset': {
        borderColor: `${theme.palette.error[500]} !important`,
        boxShadow: 'none'
      },
      '& p.MuiFormHelperText-root': {
        color: theme.palette.error[500],
        margin: theme.spacing(0.5, 1.75, 0, 0)
      },
      '& .MuiInputBase-root': {
        '&:hover': {
          boxShadow: 'none',
          '& fieldset': {
            borderColor: `${theme.palette.error[600]} !important`
          }
        }
      }
    },
    smallTextField: {
      margin: theme.spacing(1, 0, 0.5, 0),
      '& .MuiInputBase-root': {
        height: theme.spacing(4)
      }
    }
  };
});

export default createClasses;