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

const createClasses = makeStyles<Theme>(theme => ({
  root: {
    '& > div:not(:first-of-type)': {
      marginTop: theme.spacing(5)
    }
  },
  divider: {
    backgroundColor: 'inherit',
    backgroundImage: theme.palette.background.verticalDivider,
    width: theme.spacing(0.125),
    border: 'none'
  },
  iconInfoItems: {
    justifyContent: 'space-between',
    paddingLeft: theme.spacing(2),
    paddingRight: theme.spacing(0.5),
    '& .MuiGrid-container > .MuiGrid-container > div': {
      display: 'inline-flex'
    }
  },
  iconInfoItemsCompact: {
    display: 'inline-flex',
    flexWrap: 'nowrap',
    justifyContent: 'normal',
    width: 'auto',
    '& $divider': {
      margin: theme.spacing(0, 2)
    }
  }
}));

export default createClasses;