import { pxToRem } from '../typography';

export default function Input(theme) {
  return {
    MuiFormLabel: {
      styleOverrides: {
        root: {
          marginLeft: 0,
          fontFamily: theme.fontFamily.medium,
          opacity: 1,
        },
      },
    },
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          marginLeft: 0,
          fontStyle: 'italic',
        },
      },
    },
    MuiInput: {
      styleOverrides: {
        root: {
          fontFamily: theme.fontFamily.medium,
          fontSize: pxToRem(10),
          [theme.breakpoints.up('md')]: {
            fontSize: pxToRem(10),
          },
          [theme.breakpoints.up('lg')]: {
            fontSize: pxToRem(13),
          },
          [theme.breakpoints.up('xl')]: {
            fontSize: pxToRem(21),
          },
          input: { textAlign: 'center' },
          '& input::placeholder': {
            opacity: 0.37,
            fontFamily: theme.fontFamily.medium,
            fontSize: pxToRem(10),
            [theme.breakpoints.up('md')]: {
              fontSize: pxToRem(10),
            },
            [theme.breakpoints.up('lg')]: {
              fontSize: pxToRem(13),
            },
            [theme.breakpoints.up('xl')]: {
              fontSize: pxToRem(21),
            },
          },
        },
      },
    },
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          border: 'solid',
          borderWidth: 0,
          borderColor: theme.palette.grey[5],
          '& .MuiOutlinedInput-input': {
            padding: theme.shape.outlinedInputPadding,
          },
          '&:hover': {
            border: 'solid',
            borderWidth: 0,
            borderColor: theme.palette.grey[5],
          },
          '& .Mui-disabled': {
            backgroundColor: theme.palette.grey[23],
            borderWidth: 0,
          },
        },
        multiline: {
          padding: 0,
        },
      },
    },
    MuiInputLabel: {
      styleOverrides: {
        root: {
          color: theme.palette.grey[4],
          fontFamily: theme.fontFamily.regular,
          fontSize: pxToRem(14),
          fontWeight: 400,
          marginBottom: theme.spacing(1.3),
          opacity: 0.7,
          fontStretch: 'normal',
          fontStyle: 'normal',
          lineHeight: 'normal',
          letterSpacing: 'normal',
        },
      },
    },
  };
}
