text: import { makeStyles } from '@material-ui/core/styles';
  
  const useStyles = makeStyles((theme) => ({
      appBar: {
          top: 'auto',
          bottom: 0,
      },
      appBarContainer: {
          display: 'flex',
          justifyContent: 'space-between',
          '& button': {
              '& span': {
                  display: 'flex',
                  flexWrap: 'wrap',
                  maxWidth: 48,
              },
          },
      },
      logo: {
          marginTop: 60,
          height: 44,
          '& img': {
              display: 'block',
              margin: 'auto',
          },
      },
      search: {
          border: '1px solid #ececec',
          position: 'relative',
          borderRadius: theme.shape.borderRadius,
          backgroundColor: theme.palette.common.white,
          '&:hover': {
              backgroundColor: theme.palette.common.white,
          },
          margin: '30px auto auto auto',
          width: '80%',
          [theme.breakpoints.up('sm')]: {
              marginLeft: theme.spacing(3),
              width: 'auto',
          },
      },
      searchIcon: {
          padding: theme.spacing(0, 2),
          height: '100%',
          position: 'absolute',
          pointerEvents: 'none',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
      },
      inputRoot: {
          color: 'inherit',
      },
      inputInput: {
          height: 50,
          padding: theme.spacing(1, 1, 1, 0),
          // vertical padding + font size from searchIcon
          paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
          transition: theme.transitions.create('width'),
          width: '100%',
          [theme.breakpoints.up('md')]: {
              width: '20ch',
          },
      },
  }));
  
  export default useStyles;
  