import makeStyles from '@mui/styles/makeStyles';

const createClasses = makeStyles(theme => ({
  root: {
    ...(theme.components?.MuiTooltip?.styleOverrides?.tooltip as Record<string, unknown>),
    borderRadius: theme.spacing(0.5),
    '& > *': {
      alignSelf: 'flex-start',
      flexWrap: 'nowrap'
    },
    width: 'fit-content'
  },
  title: {
    ...theme.typography.caption2,
    color: theme.palette.common.white,
    marginBottom: theme.spacing(1)
  },
  item: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'baseline',
    whiteSpace: 'nowrap'
  },
  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),
    '&:last-child': {
      display: 'inline-block',
      width: theme.spacing(2),
      textAlign: 'end'
    }
  },
  itemContainer: {
    marginRight: '24px',
    '&:last-child': {
      marginRight: '0'
    }
  }
}));

export default createClasses;