import yellow from '@material-ui/core/colors/yellow';
import { fade } from '@material-ui/core/styles/colorManipulator';
export const styles = theme => ({
    root: {
        width: '100%',
      },
      toolbar:{
        position: "fixed",
        width: "100%",
        top: 0,
        zIndex: 1000,
        backgroundColor: '#FAAF03',
        height: '70px !important',
        padding: "8px 24px",
        borderBottom: "1px solid rgb(223, 223, 223)"
      },
      grow: {
        flexGrow: 1,
      },
      menuButton: {
        // color: '#0336ff !important',
        marginLeft: -12,
        marginRight: 20,
      },
      title: {
        color: '#0336ff !important',
        display: 'none',
        [theme.breakpoints.up('sm')]: {
          display: 'block',
        },
      },
      search: {
        color: '#9E9E9E !important',
        position: 'relative',
        borderRadius: theme.shape.borderRadius,
        backgroundColor: fade(theme.palette.common.white, 0.50),
        '&:hover': {
          backgroundColor: fade(theme.palette.common.white, 0.60),
        },
        marginRight: theme.spacing.unit * 2,
        marginLeft: 0,
        width: '100%',
        [theme.breakpoints.up('sm')]: {
          marginLeft: theme.spacing.unit * 3,
          width: 'auto',
        },
      },
      searchIcon: {
        color: '#9E9E9E !important',
        width: theme.spacing.unit * 9,
        height: '100%',
        position: 'absolute',
        pointerEvents: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      },
      inputRoot: {
        color: 'inherit',
        width: '100%',
      },
      inputInput: {
        paddingTop: theme.spacing.unit,
        paddingRight: theme.spacing.unit,
        paddingBottom: theme.spacing.unit,
        paddingLeft: theme.spacing.unit * 10,
        transition: theme.transitions.create('width'),
        width: '100%',
        [theme.breakpoints.up('md')]: {
          width: 200,
        },
      },
      sectionDesktop: {
        color: '#0336ff !important',
        display: 'none',
        [theme.breakpoints.up('md')]: {
          display: 'flex',
        },
      },
      sectionMobile: {
        color: '#424770 !important',
        display: 'flex',
        [theme.breakpoints.up('md')]: {
          display: 'none',
        },
      },
      list: {
        width: 250,
      },
      backgroundLogo:{
        padding:"15px 20px",
        backgroundColor: yellow['500'],
      },
      fullList: {
        width: 'auto',
      },
});
