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

const createClasses = makeStyles<Theme>(theme => ({
  third: {
    backgroundColor: theme.palette.secondary[100],
    color: theme.palette.primary[400],
    fill: theme.palette.primary[400],
    '&:focus': {
      backgroundColor: theme.palette.secondary[200],
      color: theme.palette.primary[500]
    },
    '&:hover': {
      backgroundColor: theme.palette.secondary[200],
      color: theme.palette.primary[500]
    },
    '&:focus-visible': {
      backgroundColor: theme.palette.secondary[200],
      color: theme.palette.primary[500]
    },

    '&.Mui-disabled': {
      backgroundColor: theme.palette.secondary[100],
      color: theme.palette.primary[100],
      fill: theme.palette.primary[100]
    }
  },
  active: {
    backgroundColor: theme.palette.secondary[500],
    color: theme.palette.common.white,
    fill: theme.palette.common.white
  },
  icon: {
    width: '16px',
    fontSize: '22px'
  },
  activeIcon: {
    backgroundColor: 'inherit',
    border: `1px solid ${theme.palette.primary[200]}`,
    fill: theme.palette.primary[400],
    '&$third': {
      fill: theme.palette.secondary[500]
    }
  },
  changed: {
    backgroundColor: 'inherit',
    border: `1px solid ${theme.palette.primary[200]}`,
    fill: theme.palette.secondary[500],

    '&:after': {
      content: "''",
      position: 'absolute',
      top: theme.spacing(-0.5),
      right: theme.spacing(-0.5),
      width: theme.spacing(1),
      height: theme.spacing(1),
      backgroundColor: theme.palette.secondary[500],
      borderRadius: '50%'
    }
  },
  mediumText: {
    height: '40px',
    minWidth: '40px',
    padding: '16px',
    '& span': {
      padding: 0
    },
    '& svg': {
      margin: 0
    }
  },
  noClickArea: {
    padding: 0,
    lineHeight: 0,
    height: 'unset'
  },
  btnTitle: {
    ...theme.typography.body2,
    marginBottom: theme.spacing(0.125)
  }
}));

export default createClasses;