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: 'center',
    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.4),
      [theme.breakpoints.up('md')]: {
        marginTop: theme.spacing(0.4),
      },
      [theme.breakpoints.up('lg')]: {
        marginTop: theme.spacing(0.4),
      },
      [theme.breakpoints.up('xl')]: {
        marginTop: theme.spacing(0.4),
      },
    },
  },
  formHeader: {
    marginTop: theme.spacing(1.2),
    marginBottom: theme.spacing(3),
  },
  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),
    },
  },
  successIcon: {
    display: 'flex',
    justifyContent: 'center',
    marginTop: theme.spacing(1.1),
  },
  resetPasswordheading: {
    // width: '70%',
    display: 'flex',
    fontFamily: 'Inter-Bold',
    justifyContent: 'center',
    marginTop: theme.spacing(3.8),
    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: {
    width: '90%',
    lineHeight: 1.1,
    textAlign: 'left',
    fontSize: pxToRem(12),
    marginTop: theme.spacing(0),
    marginBottom: theme.spacing(1.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),
    },
  },
  resetPasswordTextField: {
    marginTop: '0px',
  },
  confirmResetBox: {
    marginTop: theme.spacing(1.2),
  },
  passwordCheckListTitle: {
    color: 'grey',
    fontSize: pxToRem(14.4),
    fontStyle: 'italic',
    textAlign: 'left',
    marginBottom: theme.spacing(0.4),
  },
  passwordCheckList: {
    color: 'grey',
    fontSize: pxToRem(14.4),
    paddingTop: '2px',
    fontStyle: 'italic',
  },
  labelStyle: {
    marginBottom: '0px',
    fontSize: pxToRem(3.2),
    textAlign: 'left',
    color: theme.palette.grey[10],
    // paddingBottom: '20px',
  },
  inputTitle: {
    '&.MuiTypography-body1': {
      fontSize: pxToRem(12),
      color: theme.palette.grey[10],
    },
    fontSize: pxToRem(12),
    // opacity: '0.54',
    color: theme.palette.grey[10],
    marginBottom: theme.spacing(0.6),
    marginLeft: theme.spacing(0.6),
  },
  submitButton: {
    fontFamily: 'Inter-Regular',
    fontWeight: 500,
    marginTop: theme.spacing(2.2),
    marginBottom: theme.spacing(4.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),
    },
  },
  resetPasswordSuccessIcon: {
    width: '17%',
  },
  sendEmailText: {
    marginTop: theme.spacing(2.0),
    textAlign: 'center',
    fontSize: pxToRem(10.4),
  },
  emailText: {
    lineHeight: 1.1,
    fontSize: pxToRem(12.48),
  },
}));
