import makeStyles from '@material-ui/core/styles/makeStyles';

export const useStyles = makeStyles({
  sidebarWrapper: {
    height: '100vh',
    width: 200,
    backgroundColor: '#4f9aff',
    '& ul': {
      paddingLeft: 0,
      minHeight: '50vh',
    },
    zIndex: 20,
    boxShadow: '2px 2px 10px rgba(0,0,0,0.25)',
  },
  logoContainer: {
    height: '14vh',
    fontSize: 75,
    fontWeight: 500,
    color: '#fff',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  sidebarItem: {
    height: 80,
    width: 'calc(100% - 32px)',
    color: '#fff',
    margin: 'auto',
    display: 'flex',
    alignItems: 'center',
    paddingLeft: 30,
    '& span': {
      marginLeft: 15,
      fontSize: 18,
      fontWeight: 500,
    },
    '& svg': {
      fontSize: '2.5rem',
    },
    '&:hover': {
      backgroundColor: 'rgba(255,255,255,0.95)',
      color: '#4f9aff',
      cursor: 'pointer',
    },
  },
  activeItem: {
    backgroundColor: '#fff',
    color: '#4f9aff',
    cursor: 'pointer',
  },
});
