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

const createClasses = makeStyles<Theme>(theme => ({
  root: {
    background: theme.palette.common.white,
    border: `1px solid ${theme.palette.primary[200]}`,
    borderRadius: theme.spacing(0.5),
    boxShadow: 'none',
    height: '100%',
    '& a, & a:hover': {
      color: theme.palette.secondary[500],
      textDecoration: 'none'
    }
  },
  mainIcon: {
    color: theme.palette.primary[400]
  },
  title: {
    ...theme.typography.h4,
    color: theme.palette.primary[500],
    width: '100%'
  },
  titleWithAvatar: {
    paddingLeft: theme.spacing(1.5)
  },
  cardItems: {
    margin: `${theme.spacing(2)} 0 0`,
    padding: 0
  },
  cardItem: {
    alignItems: 'center',
    minHeight: theme.spacing(4)
  },
  key: {
    ...theme.typography.subtitle1,
    color: theme.palette.primary[400],
    marginRight: theme.spacing(1),
    maxWidth: '66.67%'
  },
  value: {
    ...theme.typography.h6,
    color: theme.palette.primary[500],
    whiteSpace: 'nowrap'
  }
}));

export default createClasses;