import { makeStyles } from '@mui/styles';
import { pxToRem } from '../../theme/typography';

export const useStyles = makeStyles((theme) => ({
  main: {
    marginTop: '15px',
    width: '42vw',
    [theme.breakpoints.up('md')]: {
      width: '100%',
    },
    [theme.breakpoints.down('sm')]: {
      width: '100%',
    },
  },
  chipOuter: {
    display: 'flex',
    flexWrap: 'wrap',
    flexDirection: 'row',
    width: '100%',
  },
  chip: {
    minWidth: '170px',
    height: '42px',
    padding: theme.spacing(1.5),
    margin: theme.spacing(1),
    marginRight: theme.spacing(1.5),
    justifyContent: 'space-between',
    borderRadius: '24px',
    fontSize: pxToRem(14),
  },
  dropDownArrow: {
    color: theme.palette.grey[3],
    transition: 'transform 0.1s ease-in-out',
  },
  rotate180Deg: {
    transform: 'rotate(180deg)',
  },
  rotate0Deg: {
    transform: 'rotate(0deg)',
  },
  hoverPointer: {
    '&:hover': {
      cursor: 'pointer',
    },
  },
  selectAndSearchField: {
    display: 'flex',
    gap: '0.7rem',
    flexDirection: 'column',
    justifyContent: 'center',
    [theme.breakpoints.up('md')]: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'center',
    },
    [theme.breakpoints.down('sm')]: {
      flexDirection: 'column',
    },
  },
  autoComplete: {
    width: '90%',
    [theme.breakpoints.up('md')]: {
      flex: 1.1,
    },
  },
  autoCompleteText: {
    [theme.breakpoints.up('md')]: {
      flex: 1,
    },
  },
}));
