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',
    padding: theme.spacing(2),
    height: '100%',
    cursor: 'pointer',
    '& $avatar': {
      color: theme.palette.secondary[500]
    },
    '&:hover': {
      boxShadow: theme.shadows[6]
    },
    '&:active, &:focus': {
      background: theme.palette.secondary[100],
      borderColor: theme.palette.secondary[500],
      '& $avatar': {
        color: theme.palette.common.white,
        backgroundColor: theme.palette.secondary[500]
      }
    },
    '& a, & a:hover': {
      color: theme.palette.secondary[500],
      textDecoration: 'none'
    }
  },
  activ: {
    background: theme.palette.secondary[100],
    borderColor: theme.palette.secondary[500],
    '& $avatar': {
      color: theme.palette.common.white,
      backgroundColor: theme.palette.secondary[500]
    }
  },
  avatarContainer: {
    marginRight: theme.spacing(2)
  },
  avatar: {
    ...theme.typography.body2,
    backgroundColor: theme.palette.common.white,
    border: `${theme.spacing(0.1875)} solid ${theme.palette.secondary[500]}`,
    width: theme.spacing(6),
    height: theme.spacing(6),
    '& > div': {
      width: theme.spacing(2),
      height: theme.spacing(2)
    }
  },
  title: {
    ...theme.typography.h4,
    color: theme.palette.primary[500]
  },
  subtitle: {
    ...theme.typography.body2,
    color: theme.palette.primary[400]
  }
}));

export default createClasses;