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

const createClasses = makeStyles<Theme>(theme => ({
  itemsContainer: {
    '& > button': {
      marginBottom: theme.spacing(1)
    },
    '& > :not(:nth-of-type(5)):not(:nth-of-type(10))': {
      marginRight: theme.spacing(2)
    }
  },
  item: {
    width: '40px',
    height: '40px',
    background: theme.palette.common.white,
    color: theme.palette.primary[600],
    '&:hover': {
      background: theme.palette.secondary[100]
    }
  },
  itemText: {
    ...theme.typography.subtitle1
  },
  selectedItem: {
    background: theme.palette.secondary[500],
    color: `${theme.palette.common.white} !important`,
    '&:hover': {
      background: `${theme.palette.secondary[500]} !important`
    }
  },
  disabledItem: {
    color: `${theme.palette.primary[100]} !important`,
    background: `${theme.palette.common.white} !important`,
    '&:hover': {
      background: theme.palette.common.white
    }
  },
  disabledSelectedItem: {
    color: `${theme.palette.common.white} !important`,
    background: `${theme.palette.secondary[500]} !important`
  },
  monthButtonText: {
    ...theme.typography.h5,
    paddingBottom: theme.spacing(2),
    color: theme.palette.primary[500],
    '&:hover': {
      color: theme.palette.primary[500]
    }
  },
  arrow: {
    transform: 'rotate(180deg)',
    width: '16px !important',
    fill: theme.palette.primary[400],
    '& > div': {
      display: 'flex',
      width: '16px'
    }
  }
}));

export default createClasses;