// material-ui
import { alpha } from '@mui/material/styles';
import { CONTAINED_PRIMARY_BLUE, VALIDATION_ERROR_COLOR } from '../colorConst';

// ==============================|| OVERRIDES - OUTLINED INPUT ||============================== //

export default function OutlinedInput(theme) {
  return {
    MuiOutlinedInput: {
      styleOverrides: {
        input: {
          padding: '10.5px 14px 10.5px 12px'
        },
        notchedOutline: {
          borderColor: theme.palette.grey[300]
        },
        root: {
          fontSize: '1.2rem',
          fontWeight: 600,
          lineHeight: 1.57,
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: theme.palette.grey[400]
          },
          '&.Mui-focused:not(.Mui-error)': {
            boxShadow: `0 0 0 2px ${alpha(CONTAINED_PRIMARY_BLUE, 0.2)}`,
            '& .MuiOutlinedInput-notchedOutline': {
              border: `1px solid ${CONTAINED_PRIMARY_BLUE}`
            }
          },
          '&.Mui-error .MuiOutlinedInput-notchedOutline': {
            borderColor: VALIDATION_ERROR_COLOR
          },
          '&.Mui-error': {
            '&:hover .MuiOutlinedInput-notchedOutline': {
              borderColor: VALIDATION_ERROR_COLOR
            },
            '&.Mui-focused': {
              boxShadow: `0 0 0 2px ${alpha(VALIDATION_ERROR_COLOR, 0.2)}`,
              '& .MuiOutlinedInput-notchedOutline': {
                border: `3px solid ${VALIDATION_ERROR_COLOR}`
              }
            }
          }
        },
        inputSizeSmall: {
          padding: '7.5px 8px 7.5px 12px'
        },
        inputMultiline: {
          padding: 0
        }
      }
    }
  };
}
