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

export const useStyles = makeStyles((theme) => ({
  pdfAndDocPreviewBox: {
    minHeight: '450px',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
  },
  pdfAndDocPreviewDownloadButton: {
    marginTop: theme.spacing(2),
    fontFamily: theme?.fontFamily?.regular,
  },
  transFormImageBox: {
    minHeight: '65vh',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  customTransFormWrapper: {
    overflow: 'visible',
  },
  iconSize: {
    fontSize: pxToRem(28),
  },
  controlButtons: {
    marginTop: theme.spacing(1),
  },
  controlButton: {
    color: theme.palette.common.white,
    cursor: 'pointer',
    border: 'none',
    borderRadius: theme.spacing(0),
    padding: theme.spacing(1.2),
    '&:hover': {
      backgroundColor: 'rgba(0,0,0,0.9)',
      color: theme.palette.common.white,
    },
  },
  zoomOutButton: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderTopLeftRadius: theme.spacing(0.8),
    borderBottomLeftRadius: theme.spacing(0.8),
  },
  zoomResetButton: {
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  zoomInButton: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderTopRightRadius: theme.spacing(0.8),
    borderBottomRightRadius: theme.spacing(0.8),
  },
}));
