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

const createClasses = makeStyles<Theme>(theme => ({
  button: {
    color: theme.palette.primary[400],
    '&:hover': {
      boxShadow: `${theme.shadows[0]} !important`,
      color: theme.palette.primary[500]
    },
    '&:active': {
      color: theme.palette.secondary[500]
    },
    '&.Mui-disabled': {
      color: theme.palette.primary[100],
      '&:not(:last-child)': {
        borderRight: 'none'
      }
    },
    '& .MuiTypography-root': {
      display: 'flex'
    }
  },
  selectedButton: {
    color: `${theme.palette.secondary[500]} !important`
  },
  dotsIcon: {
    minWidth: theme.spacing(2)
  },
  menuRoot: {
    '& ul': {
      'padding-inline-start': 0
    }
  }
}));

export default createClasses;