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

export const useStyles = makeStyles((theme) => ({
  header: {
    marginTop: theme.spacing(1.4),
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    [theme.breakpoints.up('md')]: {
      marginTop: theme.spacing(0),
    },
  },
  detailPageHeader: {
    minHeight: theme.spacing(3.2),
    // margin: theme.spacing(0.5),
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    // flexWrap: 'wrap',
  },
  title: {
    width: 'max-content',
    marginLeft: theme.spacing(1),
  },
  globalIcon: {
    width: '24px',
    height: '24px',
    marginLeft: theme?.spacing(1),
    marginTop: theme?.spacing(1.5),
  },
  headerActions: {
    width: '100%',
    display: 'flex',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  detailHeaderActions: {
    display: 'flex',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  gobackIcon: {
    fontSize: pxToRem(24),
    marginRight: theme.spacing(0.4),
    cursor: 'pointer',
  },
  headerTitle: {
    display: 'flex',
    justifyContent: 'center',
    maxWidth: '100%',
    alignItems: 'center',
  },
  asyncDropdownContainer: {
    height: '42px',
    width: '251px',
    marginRight: theme?.spacing(1.6),
  },
  subHeading: {
    marginLeft: theme.spacing(4),
    fontFamily: 'Inter-Regular',
  },
}));
