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

const createClasses = makeStyles<Theme>(theme => ({
  title: {
    padding: theme.spacing(2),
    color: theme.palette.primary[600],
    ...theme.typography.h4
  },
  listItem: {
    display: 'flex',
    justifyContent: 'space-between',
    color: theme.palette.primary[500],
    '&:hover': {
      backgroundColor: theme.palette.secondary[100]
    }
  },
  listItemSelected: {
    color: `${theme.palette.secondary[500]} !important`,
    background: theme.palette.secondary[100],
    '&:hover': {
      background: theme.palette.secondary[200]
    }
  },
  listItemText: {
    ...theme.typography.subtitle1
  },
  list: {
    paddingBottom: theme.spacing(2)
  }
}));

export default createClasses;