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

const createClasses = makeStyles<Theme>(theme => ({
  rootV: {
    flexDirection: 'column'
  },
  addMarginRight: {
    marginRight: theme.spacing(0.5)
  },
  square: {
    display: 'inline-block',
    width: theme.spacing(1),
    height: theme.spacing(1),
    borderRadius: theme.spacing(0.25)
  },
  squareRight: {
    marginRight: theme.spacing(0.5)
  },
  name: {
    ...theme.typography.caption1,
    color: theme.palette.primary[500]
  },
  value: {
    marginLeft: theme.spacing(2)
  },
  item: {
    marginRight: theme.spacing(2)
  },
  itemA: {
    marginRight: theme.spacing(3),
    '& > span > div.MuiGrid-root': {
      borderRadius: theme.spacing(0.25)
    },
    '& > span.MuiFormControlLabel-label': {
      padding: theme.spacing(0.5, 0)
    }
  },
  itemV: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'baseline'
  },
  checkbox: {
    padding: theme.spacing(0.5)
  }
}));

export default createClasses;