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

const createClasses = makeStyles<Theme>(theme => ({
  root: {
    ...(theme.components?.MuiTooltip?.styleOverrides?.tooltip as Record<string, unknown>),
    borderRadius: theme.spacing(0.5),
    '& > *': {
      alignSelf: 'flex-start'
    },
    width: 'fit-content'
  },
  title: {
    ...theme.typography.h6,
    color: theme.palette.common.white,
    marginBottom: theme.spacing(0.5)
  },
  subTitle: {
    ...theme.typography.caption1,
    color: theme.palette.common.white,
    marginBottom: theme.spacing(2)
  },
  item: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'baseline'
  },
  square: {
    display: 'inline-block',
    width: theme.spacing(1),
    height: theme.spacing(1),
    marginRight: theme.spacing(1),
    borderRadius: theme.spacing(0.25)
  },
  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;