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

export const useStyles = makeStyles((theme) => ({
  topUpPlanBox: {
    width: '70%',
    marginTop: theme.spacing(3),
  },
  lastPlanBox: {
    width: '70%',
    marginTop: theme.spacing(1),
  },
  planHistoryBox: {
    marginTop: theme.spacing(1),
  },
  topUpPlanHeadingBox: {
    display: 'flex',
    alignItems: 'center',
    alignSelf: 'center',
    flexDirection: 'row',
    marginBottom: theme.spacing(1),
  },
  topUpPlanHeading: {
    paddingLeft: theme.spacing(0),
    textTransform: 'uppercase',
    fontSize: pxToRem(14),
    fontWeight: '600',
  },
  lastPlanHeading: {
    paddingLeft: theme.spacing(0),
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(1.5),
  },
  topUpPlanPaymentStatusChip: {
    marginLeft: theme.spacing(1),
    color: theme.palette.orange.main,
  },
  dotIcon: {
    fontSize: pxToRem(8),
    color: 'inherit',
    marginRight: theme.spacing(0.8),
  },
  topUpButtonBox: {
    marginTop: theme.spacing(1),
    display: 'flex',
    alignItem: 'center',
    justifyContent: 'left',
    width: '50%',
  },
  topUpButtonClass: {
    display: 'flex',
    alignItem: 'center',
    justifyContent: 'center',
  },
  reactivateButtonClass: {
    width: '50%',
    display: 'flex',
    alignItem: 'center',
    justifyContent: 'center',
  },
  warning: {
    color: theme.palette.primary.main,
  },
  success: {
    color: theme.palette.success.main,
  },
}));
