import makeStyles from '@mui/styles/makeStyles';

export const useStyles = makeStyles((theme) => ({
  title: {
    textAlign: 'center',
  },
  body: {
    textAlign: 'center',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    marginTop: theme.spacing(1),
  },
  bodyContent: {
    width: '80%',
    display: 'inline-block',
    verticalAlign: 'top',
    whiteSpace: 'normal',
    textAlign: 'center',
  },
  confirmationLine: {
    textAlign: 'center',
    marginTop: theme.spacing(2),
    fontFamily: theme.fontFamily.bold,
  },
  leftButton: {
    width: '200px',
    height: '48px',
    marginRight: theme.spacing(1),
    border: 'none',
    borderRadius: '12px',
    cursor: 'pointer',
    color: theme.palette.grey[600],
    fontWeight: 600,
    fontSize: theme.typography.pxToRem(16),
    textTransform: 'none',
  },
  rightButton: {
    width: '200px',
    height: '48px',
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
    fontSize: theme.typography.pxToRem(16),
    fontWeight: 600,
    border: 'none',
    borderRadius: '12px',
    cursor: 'pointer',
    justifyContent: 'center',
  },
  actionWrapper: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(1),
  },
}));
