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

export const useStyles = makeStyles((theme) => ({
  outerBox: {
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    fontFamily: theme.fontFamily.regular,
  },
  allContentBox: {
    marginRight: pxToRem(5),
  },
  heading: {
    padding: theme.spacing(3),
    justifyContent: 'space-between',
  },
  headingTitle: {
    fontSize: pxToRem(24),
    fontFamily: theme.fontFamily.medium,
  },

  contentBox: {
    fontSize: pxToRem(16),
    overflowY: 'auto',
    flexGrow: '1',
    margin: theme.spacing(3),
    marginTop: theme.spacing(1),
    marginRight: theme.spacing(0),
  },
  textBox: {
    marginRight: theme.spacing(4),
  },

  subHeadingTitle: {
    fontSize: pxToRem(18),
    textTransform: 'uppercase',
    paddingTop: theme.spacing(3),
    fontFamily: theme.fontFamily.semiBold,
  },
  subHeadingText: {
    fontSize: pxToRem(16),
    paddingTop: theme.spacing(1),
  },
  TermsAndConditionCloseIcon: {
    display: 'flex',
    justifyContent: 'center',
  },
  paragraphSpacing: {
    marginTop: theme.spacing(2),
  },
  listTitle: {
    fontFamily: theme.fontFamily.bold,
    marginLeft: theme.spacing(1),
    fontSize: pxToRem(18),
  },

  listTitleText: {
    marginLeft: theme.spacing(1),
  },
  outerList: {
    fontFamily: theme.fontFamily.bold,
    marginLeft: theme.spacing(3),
    display: 'flex',
    justifyContent: 'flex-start',
    flexDirection: 'column',
    gap: pxToRem(10),
    marginTop: pxToRem(20),
  },
  subList: {
    marginLeft: theme.spacing(3),
    display: 'flex',
    justifyContent: 'flex-start',
    flexDirection: 'column',
    gap: pxToRem(10),
    marginTop: pxToRem(10),
    fontSize: pxToRem(16),
    fontFamily: theme.fontFamily.regular,
  },
  listAdditionalText: {
    fontSize: pxToRem(16),
    paddingTop: theme.spacing(1),
    fontFamily: theme.fontFamily.regular,
  },
}));
