import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../../@styles/theme-provider';

const createClasses = makeStyles<Theme, { rootWidth: string }>(theme => ({
  root: props => {
    const { rootWidth } = props;
    return {
      width: rootWidth,
      padding: theme.spacing(2),
      borderRadius: theme.spacing(0.5),
      boxShadow: 'none',
      '& ul': {
        marginBlockStart: 0,
        marginBlockEnd: 0,
        paddingInlineStart: 0
      }
    };
  },
  infoIcon: {
    fill: theme.palette.primary[200],
    marginLeft: theme.spacing(1),
    '& > div': {
      display: 'flex'
    }
  },
  subtitle: {
    ...theme.typography.body2,
    color: theme.palette.primary[400]
  },
  topLink: {
    color: theme.palette.secondary[500],
    textDecoration: 'none'
  },
  divider: {
    backgroundImage: theme.palette.background.verticalDivider,
    backgroundColor: 'inherit',
    height: '100%',
    width: theme.spacing(0.125),
    border: 'none'
  },
  textValue: {
    fontSize: theme.spacing(3.5),
    textAlign: 'center',
    fontWeight: theme.typography.fontWeightMedium as number,
    color: theme.palette.primary[500]
  },
  middleTextValue: {
    fontSize: theme.spacing(4.5)
  },
  centerText: {
    textAlign: 'center'
  },
  centeredErrorMsg: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  marginTop: {
    marginTop: theme.spacing(0.5)
  },
  marginBottom: {
    marginBottom: theme.spacing(0.5)
  },
  titleContainer: {
    color: theme.palette.primary[500]
  },
  expandWrapper: {
    '& > button': {
      padding: 0
    }
  },
  titleText: {
    color: theme.palette.primary[500]
  }
}));

export default createClasses;