import makeStyles from '@mui/styles/makeStyles';
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',
    // height: '650px',
    maxHeight: '635px',
    overflowY: 'scroll',
    [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',
      maxHeight: '635px',
    },
    boxShadow: 'none',
    borderRadius: theme.spacing(1.8),
    opacity: '0.95',
  },
  thankYouTitle: {
    width: '100%',
    textAlign: 'center',
    // padding: theme.spacing(2.2),
  },
  thankYouImg: {
    width: '90%',
    margin: 'auto',
  },
  descriptionDiv: {
    marginTop: theme.spacing(2.0),
  },
  description: {
    fontSize: pxToRem(12.8),
    marginBottom: theme.spacing(0.6),
  },
  faqButton: {
    display: 'flex',
    justifyContent: 'center',
    marginTop: theme.spacing(2.0),
    margin: 'auto',
    height: '38px',
    fontSize: pxToRem(12.8),
    borderRadius: '8px',
    width: '30%',
  },
  faqHeaderDiv: {
    marginBottom: theme.spacing(2.0),
  },
  faqTitle: {
    display: 'flex',
    justifyContent: 'flex-start',
  },
  goBackicon: {
    paddingTop: theme.spacing(0.2),
    paddingBottom: theme.spacing(0.2),
    cursor: 'pointer',
    color: 'grey',
    // width: '30px',
  },
  goBackDiv: {
    display: 'flex',
    justifyContent: 'flex-start',
    // paddingTop: theme.spacing(0.6),
    alignItems: 'center',
  },
  question: {
    fontSize: pxToRem(15.2),
    paddingTop: theme.spacing(2.0),
    paddingBottom: theme.spacing(2.0),
  },
  answer: {
    color: 'grey',
    fontSize: pxToRem(14.4),
    lineHeight: 1.1,
  },
  faqMainDiv: {
    maxHeight: '550px',
    fontFamily: 'Gilroy-Bold',
    padding: theme.spacing(1.0),
  },
}));
