import makeStyles from '@mui/styles/makeStyles';
import { pxToRem } from '../../theme/typography';

export const useStyles = makeStyles((theme) => ({
  nextButton: {
    '&.MuiButtonBase-root': {
      padding: `${theme.spacing(2.1)} ${theme.spacing(1.6)}`,
      backgroundColor: theme?.palette?.primary?.colors,
      color: theme?.palette?.common?.white,
      display: 'flex',
      fontSize: pxToRem(14),
      fontFamily: theme?.fontFamily?.semiBold,
      width: 'auto',
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: theme.spacing(0.8),
      [theme.breakpoints.down('md')]: {
        marginTop: theme.spacing(2),
        width: '100%',
      },
    },
  },
  checkBoxIconForNextButton: {
    fontSize: pxToRem(20),
    marginRight: theme.spacing(0.3),
  },
  alert: {
    backgroundColor: theme?.palette?.grey[51],
    color: theme?.palette?.grey[52],
    borderColor: theme?.palette?.grey[52],
    borderRadius: theme.spacing(0.8),
    padding: `${theme.spacing(0.2)} ${theme.spacing(1.6)}`,
  },
  allElementOuterDiv: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    margin: theme.spacing(3),
    [theme.breakpoints.down('md')]: {
      flexDirection: 'column',
    },
  },
  alertDivWithButton: {
    flex: 0.98,
    width: '100%',
  },
  alertDivWithoutButton: {
    flex: 1,
  },
  nextButtonDiv: {
    [theme.breakpoints.down('md')]: {
      width: '100%',
    },
  },
}));
