import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../../@styles/theme-provider';

const createClasses = makeStyles<Theme>(theme => {
  const paginationHover = {
    borderColor: theme.palette.primary[200]
  };
  const paginationSelected = {
    borderColor: `${theme.palette.secondary[500]} !important`
  };
  return {
    root: {
      display: 'flex',
      justifyContent: 'center'
    },
    ul: {
      margin: 0,
      padding: 0,
      display: 'flex',
      alignItems: 'center',
      listStyle: 'none'
    },
    paginationButton: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      color: theme.palette.primary[400],
      background: theme.palette.common.white,
      border: '1px solid transparent',
      borderRadius: theme.spacing(0.5),
      padding: 0,
      minWidth: '24px',
      height: '24px',
      cursor: 'pointer',
      '&:hover': paginationHover,
      transition: 'background-color .2s, color .2s'
    },
    paginationButtonSelected: paginationSelected,
    pageNumberButton: {
      padding: '7px 4px',
      minWidth: '32px',
      height: '32px'
    },
    pageEllipsisButton: {
      borderColor: 'transparent!important',
      pointerEvents: 'none'
    },
    displayNone: {
      display: 'none'
    },
    marginRight2: {
      marginRight: theme.spacing(0.25)
    },
    marginLeft2: {
      marginLeft: theme.spacing(0.25)
    },
    largeButton: {
      padding: theme.spacing(0, 0.5),
      width: 'auto'
    },
    toolbar: {
      padding: 0,
      minHeight: 0,
      '& .MuiTablePagination-actions': {
        marginLeft: theme.spacing(2)
      }
    },
    caption: {
      ...theme.typography.caption1,
      color: theme.palette.primary[400]
    }
  };
});

export default createClasses;