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

export const useStyles = makeStyles((theme) => ({
  chipClass: {
    height: 'fit-content',
    minHeight: '30px',
    padding: '2px',
    alignItems: 'center',
  },
  statusColor: {
    color: theme.palette.primary.main,
    fontSize: pxToRem(10),
  },
  tabsBox: {
    display: 'flex',
    justifyContent: ' space-around',
    // width: '55%',
    marginTop: theme.spacing(0.5),
    marginRight: theme.spacing(5.0),
    alignItems: 'center',
  },
  secondaryButton: {
    width: '200px',
    height: '46px',
    borderRadius: '8px',
    justifyContent: 'space-evenly',
    fontSize: pxToRem(16),
  },
  tableActionIcons: {
    marginRight: theme.spacing(1.4),
    width: '15px',
  },
  companyNameTableColumn: {
    display: 'flex',
    alignItems: 'center',
  },
  companyName: {
    marginLeft: theme.spacing(1),
    fontSize: pxToRem(14),
    objectFit: 'contain',
    width: '260px',
  },
  companyNameLink: {
    textDecoration: 'none',
    color: theme.palette.grey[10],
    '&:hover': {
      color: theme.palette.info.main,
      textDecoration: 'underline',
    },
  },
  companyWebsiteLabel: {
    fontSize: pxToRem(12),
  },
  companyNameLogo: {
    height: '40px',
    width: '40px',
    borderRadius: theme.shape.borderRadiusComponent,
    objectFit: 'contain',
  },
  sendEmailStatus: {
    fontSize: pxToRem(14),
    color: theme.palette.primary.main,
  },
  sendEmailLastSentMailDate: {
    fontSize: pxToRem(12),
  },
  addDiscountCodeLink: {
    fontSize: pxToRem(12),
    color: theme.palette.primary.main,
  },
  addDiscountCodeLabel: {
    fontSize: pxToRem(14),
    backgroundColor: theme.palette.common.white,
    color: theme.palette.common.black,
  },
  customModel: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
  },
  customModelBox: {
    paddingLeft: theme.spacing(5),
    paddingRight: theme.spacing(5),
    textAlign: 'center',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    // height: '100%',
    border: 'none',
  },
  newPlanTitleText: {
    fontSize: pxToRem(28),
    fontFamily: theme.fontFamily.bold,
  },
  newPlanSubTitleText: {
    fontSize: pxToRem(18),
    padding: theme.spacing(1),
  },
  addPlanSuccessIcon: {
    padding: theme.spacing(2),
    paddingTop: theme.spacing(1),
  },
  planAddedText: {
    fontSize: pxToRem(12),
    color: theme.palette.grey[54],
    display: 'flex',
    alignItems: 'center',
    alignSelf: 'center',
  },
  verifyIcon: {
    marginLeft: theme.spacing(0.3),
    fontSize: pxToRem(12),
    color: theme.palette.grey[54],
  },
}));
