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

const createClasses = makeStyles<Theme, { backgroundColor: string | undefined }>(theme => ({
  root: {
    ...(theme.components?.MuiTooltip?.styleOverrides?.tooltip as Record<string, unknown>)
  },
  square: {
    display: 'inline-block',
    width: theme.spacing(1),
    height: theme.spacing(1),
    marginRight: theme.spacing(1),
    borderRadius: theme.spacing(0.25),
    backgroundColor: props => props.backgroundColor
  },
  name: {
    ...theme.typography.caption1,
    color: theme.palette.common.white
  },
  data: {
    ...theme.typography.caption1,
    color: theme.palette.common.white,
    marginLeft: theme.spacing(1)
  }
}));

export default createClasses;