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

const createClasses = makeStyles<Theme>(theme => ({
  listItem: {
    ...theme.typography.interactive2,
    background: 'none',
    borderRadius: theme.spacing(0.25),
    color: theme.palette.primary[400],
    cursor: 'pointer',
    minHeight: 40,
    paddingRight: theme.spacing(2),
    paddingLeft: theme.spacing(1.5),
    marginBottom: theme.spacing(0.5),
    lineHeight: 0,
    '& *': {
      color: 'inherit'
    },
    '& path': {
      fill: 'currentColor'
    },
    '&:hover': {
      background: theme.palette.secondary[100],
      color: theme.palette.secondary[500],
      '& $listItemArrow': {
        visibility: 'visible !important',
        color: theme.palette.primary[400]
      }
    }
  },
  listItemIcon: {
    width: theme.spacing(3),
    paddingRight: theme.spacing(1)
  },
  listItemArrow: {
    width: theme.spacing(2),
    height: theme.spacing(2),
    transform: 'rotate(-90deg)',
    visibility: 'hidden'
  }
}));

export default createClasses;