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

export const useStyles = makeStyles((theme) => ({
  stepperMain: {
    '& .MuiStepLabel-root': {
      flexDirection: 'column',
      alignItems: 'center',
    },
    '& .MuiStep-root': {
      paddingLeft: theme.spacing(0),
      paddingRight: theme.spacing(0),
    },
    '& .MuiStepLabel-iconContainer': {
      paddingRight: theme.spacing(0),
      paddingBottom: theme.spacing(0),
    },
    '& .MuiStepLabel-label': {
      fontFamily: theme.fontFamily.regular,
      fontSize: pxToRem(12),
    },
    marginLeft: theme.spacing(1),
    marginTop: theme.spacing(1),
    display: 'flex',
    width: '70%',
    justifyContent: 'center',
    marginBottom: theme.spacing(1.4),
    [theme.breakpoints.down('sm')]: {
      width: '80%',
      margin: 'auto',
      marginTop: theme.spacing(1),
      marginBottom: theme.spacing(1.4),
    },
    [theme.breakpoints.up('xs')]: {
      zIndex: 1,
    },
  },
  stepperBox: {
    width: '35%',
    marginLeft: theme.spacing(2),
    marginTop: theme.spacing(0.2),
    justifyContent: 'center',
    [theme.breakpoints.down('md')]: {
      width: '60%',
    },
    [theme.breakpoints.down('sm')]: {
      margin: 'auto',
      width: '90%',
    },
  },
  stepLabel: {
    display: 'flex',
    // justifyContent: 'center',
    textAlign: 'center',
    color: theme.palette.grey[29],
    [theme.breakpoints.down('md')]: {
      width: '100%',
    },
    [theme.breakpoints.down('sm')]: {
      width: '100%',
    },
  },
  stepIconRoot: {
    backgroundColor: theme.palette.grey[29],
    color: theme.info,
    width: 30,
    height: 30,
    display: 'flex',
    borderRadius: '50%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  stack: {
    backgroundColor: theme.palette.grey[30],
    borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(0)} ${theme.spacing(0)}`,
  },
  activeStepLabel: {
    color: theme.palette.common.black,
  },
  icons: {
    fontSize: pxToRem(18),
  },
}));
