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

export const useStyles = makeStyles({
  navbarWrapper: {
    width: '100%',
    height: 80,
    boxShadow: '0px 0px 20px -5px rgba(0,0,0,0.25)',
    display: 'flex',
    justifyContent: 'space-between',
  },
  navbarMenu: {
    margin: 0,
    height: '100%',
    listStyle: 'none',
    padding: 0,
    display: 'flex',
    alignItems: 'flex-end',
    paddingLeft: 80,
  },
  navbarItem: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: 200,
    height: 40,
    fontSize: 18,
    cursor: 'pointer',
    borderBottom: '2px solid transparent',
    transition: 'border-top 0.2s',
  },
  active: {
    transition: 'border-top 0.2s',
    color: '#4f9aff',
    borderBottom: '2px solid #4f9aff',
  },
  navbarButton: {
    textTransform: 'none',
    fontWeight: 500,
    fontSize: 18,
    width: '100%',
  },
  navbarUser: {
    fontSize: 16,
    fontWeight: 500,
    marginTop: 10,
    marginRight: 50,
    textAlign: 'right',
    display: 'flex',
    alignItems: 'center',
  },
});
