import makeStyles from '@mui/styles/makeStyles';
import backgroundImage from '../../assets/images/background/background.jpg';
import { pxToRem } from '../../theme/typography';

export const useStyles = makeStyles((theme) => ({
  root: {
    height: '100vh',
    backgroundImage: `url(${backgroundImage})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  card: {
    width: '370px',
    maxHeight: '835px',
    [theme.breakpoints.up('sm')]: {
      width: '500px',
    },
    [theme.breakpoints.up('md')]: {
      width: '500px',
    },
    [theme.breakpoints.up('lg')]: {
      width: '500px',
    },
    [theme.breakpoints.up('xl')]: {
      width: '500px',
      maxHeight: '735px',
    },
    boxShadow: 'none',
    borderRadius: theme.spacing(3.8),
    opacity: '0.95',
  },
  forgotPasswordHeader: {
    marginTop: theme.spacing(4.5),
  },
  right: {
    textAlign: 'center',
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'column',
  },
  form: {
    width: '65%',
  },
  formBody: {
    justifyContent: 'start',
    display: 'flex',
    flexDirection: 'column',
    [theme.breakpoints.up('md')]: {
      // height: '162.5px',
    },
    [theme.breakpoints.up('lg')]: {
      // height: '234px',
    },
    [theme.breakpoints.up('xl')]: {
      // height: '325px',
    },

    '& .MuiTextField-root': {
      marginTop: theme.spacing(0.8),
      [theme.breakpoints.up('md')]: {
        marginTop: theme.spacing(0.8),
      },
      [theme.breakpoints.up('lg')]: {
        marginTop: theme.spacing(0.8),
      },
      [theme.breakpoints.up('xl')]: {
        marginTop: theme.spacing(4),
      },
    },
  },
  formHeader: {
    marginTop: theme.spacing(1.2),
    marginBottom: theme.spacing(3),
  },
  formFooter: {
    marginBottom: theme.spacing(4.0),
  },
  heading: {
    fontFamily: 'Inter-Bold',
    // width: '70%',
    textAlign: 'center',
    display: 'flex',
    justifyContent: 'flex-start',
    lineHeight: 1.2,
    fontSize: pxToRem(27),
    [theme.breakpoints.up('md')]: {
      fontSize: pxToRem(27),
    },
    [theme.breakpoints.up('lg')]: {
      fontSize: pxToRem(27),
    },
    [theme.breakpoints.up('xl')]: {
      fontSize: pxToRem(27),
    },
  },
  subHeading: {
    lineHeight: 1.1,
    textAlign: 'left',
    fontSize: pxToRem(12),
    marginTop: theme.spacing(0),
    [theme.breakpoints.up('md')]: {
      fontSize: pxToRem(13),
      marginTop: theme.spacing(0),
    },
    [theme.breakpoints.up('lg')]: {
      fontSize: pxToRem(13),
      marginTop: theme.spacing(0),
    },
    [theme.breakpoints.up('xl')]: {
      fontSize: pxToRem(13),
      marginTop: theme.spacing(0),
    },
  },
  labelStyle: {
    marginBottom: '0px',
    fontSize: pxToRem(3.2),
    color: theme.palette.grey[10],
    // paddingBottom: '20px',
  },
  inputTitle: {
    '&.MuiTypography-body1': {
      fontSize: pxToRem(12),
      color: theme.palette.grey[10],
    },
    fontSize: pxToRem(12),
    textAlign: 'left',
    // opacity: '0.54',
    color: theme.palette.grey[10],
    marginBottom: theme.spacing(0.6),
    marginLeft: theme.spacing(0.6),
  },
  icon: {
    cursor: 'pointer',
    paddingLeft: '30px',
    display: 'flex',
    alignItems: 'center',
    width: '50px',
    [theme.breakpoints.up('md')]: {
      width: '50px',
    },
    [theme.breakpoints.up('lg')]: {
      width: '50px',
    },
    [theme.breakpoints.up('xl')]: {
      width: '50px',
    },
  },
  submitButton: {
    fontFamily: 'Inter-Regular',
    fontWeight: 500,
    marginTop: theme.spacing(1.0),
    marginBottom: theme.spacing(3.0),
    fontSize: pxToRem(12.8),
    justifyContent: 'center',
    borderRadius: '6px',
    padding: '20px',
    [theme.breakpoints.up('md')]: {
      padding: '20px',
      fontSize: pxToRem(12.8),
    },
    [theme.breakpoints.up('lg')]: {
      padding: '20px',
      fontSize: pxToRem(12.8),
    },
    [theme.breakpoints.up('xl')]: {
      height: '10px',
      fontSize: pxToRem(12.8),
    },
  },
  sendEmailText: {
    marginTop: theme.spacing(2.0),
    textAlign: 'left',
    fontSize: pxToRem(10.4),
  },
  emailText: {
    lineHeight: 1.1,
    fontSize: pxToRem(12.48),
  },
  emailSentMainDiv: {
    width: '70%',
    paddingTop: theme.spacing(3.4),
    paddingBottom: theme.spacing(7.0),
    fontSize: pxToRem(12.8),
  },
}));
