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: {
    fontFamily: 'Inter-Regular',
    height: '100vh',
    backgroundImage: `url(${backgroundImage})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'scroll',
    overflowX: 'hidden',
    padding: theme.spacing(2.0),
    // paddingTop: theme.spacing(4),
  },
  card: {
    width: '370px',
    // height: '650px',
    maxHeight: '835px',
    marginTop: 'auto',
    marginBottom: 'auto',
    // overflow: 'auto',
    [theme.breakpoints.up('sm')]: {
      width: '500px',
      // height: '750px',
    },
    [theme.breakpoints.up('md')]: {
      width: '500px',
      // height: '750px',
    },
    [theme.breakpoints.up('lg')]: {
      width: '500px',
      // height: '700px',
    },
    [theme.breakpoints.up('xl')]: {
      width: '500px',
      // height: '650px',
    },
    boxShadow: 'none',
    borderRadius: theme.spacing(3.8),
    opacity: '0.95',
  },
  errorMessage: {
    fontStyle: 'italic',
  },
  emailField: {
    marginBottom: '20px',
  },
  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),
    // opacity: '0.54',
    color: theme.palette.grey[10],
    marginBottom: theme.spacing(0.6),
    marginLeft: theme.spacing(0.6),
  },
  loginButton: {
    fontFamily: 'Inter-Regular',
    fontWeight: 500,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    padding: '15px',
    height: '40px',
    fontSize: pxToRem(13.8),
  },
  defaultLogo: {
    margin: 'auto',
    height: '80px',
    marginTop: theme.spacing(4.1),
    marginBottom: theme.spacing(2.3),
    [theme.breakpoints.up('md')]: {
      height: '80px',
      marginTop: theme.spacing(3.0),
      marginBottom: theme.spacing(0.8),
    },
    [theme.breakpoints.up('lg')]: {
      height: '80px',
      marginTop: theme.spacing(3.0),
      marginBottom: theme.spacing(0.8),
    },
    [theme.breakpoints.up('xl')]: {
      height: '80px',
      marginTop: theme.spacing(3.0),
      marginBottom: theme.spacing(0.8),
    },
  },
  right: {
    textAlign: 'left',
    alignItems: 'center',
    display: 'flex',
    flexDirection: 'column',
    paddingLeft: theme.spacing(0),
    paddingRight: theme.spacing(0),
  },
  form: {
    width: '70%',
    marginTop: '30px',
  },
  formBody: {
    justifyContent: 'center',
    display: 'flex',
    flexDirection: 'column',
    // minHeight: '360px',
    overflow: 'auto',
    marginBottom: '40px',
    [theme.breakpoints.up('md')]: {
      // height: '400px',
    },
    [theme.breakpoints.up('lg')]: {
      // height: '580x',
    },
    [theme.breakpoints.up('xl')]: {
      // height: '250px',
    },

    '& .MuiTextField-root': {
      marginTop: theme.spacing(0),
      // marginTop: theme.spacing(0.8),
      [theme.breakpoints.up('md')]: {
        marginTop: theme.spacing(0),
      },
      [theme.breakpoints.up('lg')]: {
        marginTop: theme.spacing(0),
      },
      [theme.breakpoints.up('xl')]: {
        marginTop: theme.spacing(0),
      },
    },
  },
  gridContainer: {
    marginTop: '30px',
    width: '70%',
    textAlign: 'center',
  },
  loginGridItem: {
    fontWeight: 200,
    color: 'white',
    fontSize: pxToRem(14.4),
    padding: '12px !important',
    backgroundColor: 'black',
    borderTopLeftRadius: '10px',
    borderBottomLeftRadius: '10px',
  },
  signupGridItem: {
    fontWeight: 200,
    color: 'white',
    fontSize: pxToRem(14.4),
    padding: '12px !important',
    backgroundColor: 'grey',
    borderTopRightRadius: '10px',
    borderBottomRightRadius: '10px',
    cursor: 'pointer',
  },
  heading: {
    fontFamily: 'Inter-ExtraBold',
    lineHeight: 1.2,
    // fontWeight: 700,
    fontSize: pxToRem(28),
    [theme.breakpoints.up('md')]: {
      fontSize: pxToRem(28),
    },
    [theme.breakpoints.up('lg')]: {
      fontSize: pxToRem(26),
    },
    [theme.breakpoints.up('xl')]: {
      fontSize: pxToRem(24),
    },
  },
  collageName: {
    fontWeight: 500,
    fontFamily: 'Inter-Medium',
    lineHeight: 1.2,
    fontSize: pxToRem(15),
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    padding: '8px',
    display: '-webkit-box',
    '-webkit-line-clamp': 2,
    '-webkit-box-orient': 'vertical',
    [theme.breakpoints.up('md')]: {
      fontSize: pxToRem(15),
    },
    [theme.breakpoints.up('lg')]: {
      fontSize: pxToRem(18),
    },
    [theme.breakpoints.up('xl')]: {
      fontSize: pxToRem(18),
    },
  },
  passwordCheckListTitle: {
    color: 'grey',
    fontSize: '0.9rem',
    fontStyle: 'italic',
  },
  passwordCheckList: {
    color: 'grey',
    // fontSize: '0.9rem',
    paddingTop: '2px',
    fontStyle: 'italic',
  },
  actions: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: theme.spacing(3.6),
    marginLeft: theme.spacing(0.2),
    marginTop: theme.spacing(1.9),
  },
  btnMainDiv: {
    margin: theme.spacing(0.8),
  },
  dialogScrollingWrapper: {
    overflow: 'scroll',
    overflowX: 'hidden',
  },
  passwordValidationText: {
    fontSize: '0.8rem',
    padding: '1px',
  },
  forgotPasswordButton: {
    color: 'gray',
    textDecoration: 'none',
    textDecorationColor: 'gray',
    fontSize: '0.8rem',
  },
  linkWithLine: {
    content: '',
    display: 'block',
    borderBottom: '1.6px solid #0E2354',
    opacity: 0.4,
    marginTop: '-2px',
  },
}));
