import Dialog from '@material-hu/mui/Dialog';
import { styled } from '@material-hu/mui/styles';

export const DialogFilePreview = styled(Dialog)({
  '& .annotationLayer a:hover': {
    background: 'transparent !important',
    boxShadow: 'none !important',
  },
  borderRadius: 0,
  '& .pg-viewer-wrapper': {
    overflow: 'hidden',
  },
  '& .MuiDialog-container': {
    overflow: 'hidden',
    '&::-webkit-scrollbar-track': {
      background: 'transparent',
    },
    '&::-webkit-scrollbar-thumb': {
      background: 'rgba(0, 0, 0, 0.5)',
    },
  },
  '& .MuiPaper-root': {
    width: '100%',
    backgroundColor: 'transparent',
    boxShadow: 'none',
    borderRadius: 0,
    maxHeight: 'none !important',
    maxWidth: 'none !important',
    marginLeft: '2px !important',
    marginRight: '2px !important',
    overflowX: 'hidden',
    '&::-webkit-scrollbar': {
      width: '8px',
      borderRadius: '10px',
    },
    '&::-webkit-scrollbar-track': {
      background: 'transparent',
    },
    '&::-webkit-scrollbar-thumb': {
      background: '#4c4c4c',
      borderRadius: '100px',
      width: '8px',
      borderColor: 'transparent',
      borderStyle: 'solid',
    },
  },
  '& .has-margin-top-15': {
    marginTop: '0px !important',
  },
  '& .MuiModal-backdrop': {
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
  },
  '& .react-pdf__Document': {
    maxHeight: '86vh',
  },
  '& .react-pdf__Page': {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  '& .document-container': {
    height: '90vh',
    overflow: 'auto',
  },
});

export default DialogFilePreview;