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

const createClasses = makeStyles<Theme>(theme => ({
  button: {
    color: theme.palette.primary[500],
    '&:hover': {
      color: theme.palette.secondary[500]
    }
  },
  selectedButton: {
    zIndex: 1,
    color: theme.palette.common.white,
    backgroundColor: theme.palette.secondary[500],
    borderColor: `${theme.palette.secondary[500]} !important`,
    borderTopLeftRadius: `${theme.spacing(0.5)} !important`,
    borderTopRightRadius: `${theme.spacing(0.5)} !important`,
    borderBottomLeftRadius: `${theme.spacing(0.5)} !important`,
    borderBottomRightRadius: `${theme.spacing(0.5)} !important`,
    pointerEvents: 'none',
    '&:hover': {
      color: theme.palette.common.white,
      backgroundColor: theme.palette.secondary[500]
    }
  },
  beforeSelected: {
    '&:after': {
      content: "''",
      position: 'absolute',
      width: '4px',
      height: '32px',
      borderTop: `1px solid ${theme.palette.primary[200]}`,
      borderBottom: `1px solid ${theme.palette.primary[200]}`,
      right: '-4px',
      backgroundColor: theme.palette.common.white
    }
  },
  afterSelected: {
    borderLeft: 'none',
    '&:before': {
      content: "''",
      position: 'absolute',
      width: '4px',
      height: '32px',
      borderTop: `1px solid ${theme.palette.primary[200]}`,
      borderBottom: `1px solid ${theme.palette.primary[200]}`,
      left: '-4px',
      backgroundColor: theme.palette.common.white
    }
  }
}));

export default createClasses;