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

export const useStyles = makeStyles((theme) => ({
  textArea: {
    '&.MuiFormControl-marginNormal': {
      marginTop: theme.spacing(0.8),
    },
    marginTop: theme.spacing(0.8),
    marginBottom: theme.spacing(1.6),
  },
  textAreaCap: {
    '&.MuiFormControl-marginNormal': {
      marginTop: theme.spacing(0.8),
    },
    marginTop: theme.spacing(0.8),
    marginBottom: theme.spacing(1.6),
  },
  inputTitle: {
    '&.MuiTypography-body1': {
      fontSize: '0.875rem',
    },
    fontSize: '14px',
    opacity: '0.54',
    color: '#212121',
  },
  selectTitle: {
    fontSize: '1.2rem',
    marginTop: '-10px',
    marginLeft: '-12px',
  },
  optionValue: {
    cursor: 'pointer',
    width: '100%',
    height: '30px',
  },
  deleteModalText: {
    textAlign: 'center',
    marginLeft: theme.spacing(1),
    fontSize: '17px',
  },
  labelStyle: {
    marginBottom: '0px',
  },
  helperText: {
    color: '#FF4842',
  },
  textAreaLast: {
    marginTop: '8px',
    marginBottom: '0px',
  },
  numberCard: {
    width: '260px',
    padding: theme.spacing(1.8),
    boxShadow: '0px 2px 10px 0 rgba(0, 0, 0, 0.08)',
    minHeight: '127px',
  },
  numberheader: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: theme.spacing(0.5),
  },
  value: {
    lineHeight: 1,
    fontWeight: 600,
    fontSize: pxToRem(28),
    paddingTop: theme.spacing(1.0),
  },
  numberHeading: {
    fontSize: pxToRem(16),
    fontFamily: theme.fontFamily.medium,
    fontWeight: 600,
    opacity: 0.96,
  },
  numbers: {
    width: '100%',
    display: 'flex',
    justifyContent: 'flex-start',
    [theme.breakpoints.down('sm')]: {
      justifyContent: 'center',
    },
  },
  popoverContent: {
    padding: theme.spacing(1.5),
    paddingTop: theme.spacing(1.5),
    paddingBottom: theme.spacing(1.5),
    width: '160px',
    fontSize: pxToRem(12),
    backgroundColor: theme.palette.grey[37],
  },
  dashboardTitleBox: {
    display: 'flex',
    alignItems: 'center',
    alignSelf: 'center',
    marginTop: theme.spacing(1.0),
    marginBottom: theme.spacing(4.0),
  },
  goToMainDashboardButton: {
    marginLeft: theme.spacing(2),
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '20%',
  },
  card: {
    // overflowY: 'scroll',
    paddingBottom: theme?.spacing(1.5),
    height: '560px',
    maxWidth: '1200px',
    padding: theme.spacing(2),
    '&:hover': {
      '&::-webkit-scrollbar-thumb': {
        backgroundColor: '#999',
      },
    },
    borderRadius: '8px',
    boxShadow: '0 6px 24px 0 rgba(0, 0, 0, 0.08)',
    // [theme.breakpoints.down('xl')]: {
    //   width: '490px',
    // },
    // [theme.breakpoints.down('md')]: {
    //   width: '370px',
    // },
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  heading: {
    fontFamily: 'Inter-Bold',
    fontWeight: 600,
    fontSize: pxToRem(20),
    color: theme.palette.grey[10],
  },
  jobApplicationsAndManageSubscription: {
    marginTop: theme.spacing(0.5),
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  jobApplicationsTileHeader: {
    display: 'flex',
    justifyContent: 'space-between',
    fontSize: pxToRem(12),
    color: theme.palette.grey[38],
    padding: theme.spacing(1.8),
    fontFamily: 'Inter-Bold',
  },
  jobApplicationsTile: {
    overflow: 'auto',
    height: '435px',
  },
  jobApplicationsTileOuterDiv: {
    display: 'flex',
    justifyContent: 'space-between',
    padding: theme.spacing(2.0),
  },
  jobApplicationsTileOuterDivWithBackgroundColor: {
    backgroundColor: theme.palette.grey[39],
  },
  applicationRecievedDiv: {
    display: 'flex',
    alignItems: 'center',
    fontFamily: 'Inter-Bold',
  },
  jobTitleDiv: {
    fontSize: pxToRem(14),
    fontFamily: 'Inter-Bold',
  },
  jobBodyDiv: {
    fontSize: pxToRem(12),
    color: theme.palette.grey[40],
  },
  planDaysLeft: {
    backgroundColor: theme.palette.grey[30],
    padding: `${theme.spacing(1.5)} ${theme.spacing(2.4)}`,
    marginTop: theme.spacing(2.5),
    display: 'flex',
    border: '1px solid #B6B6B6',
    borderRadius: '6px',
    justifyContent: 'space-between',
  },
  planDetailOuterDiv: {
    backgroundColor: theme.palette.grey[30],
    padding: `${theme.spacing(1.5)} ${theme.spacing(2.4)}`,
    marginTop: theme.spacing(2.5),
    border: '1px solid #B6B6B6',
    borderRadius: '6px',
    height: '285px',
    overflow: 'auto',
  },
  planNameAndPrice: {
    display: 'flex',
  },
  plan: {
    fontFamily: 'Inter-Bold',
    color: theme.palette.grey[10],
  },
  planName: {
    fontSize: pxToRem(14),
  },
  planPrice: {
    fontSize: pxToRem(12),
  },
  daysLeft: {
    fontFamily: 'Inter-SemiBold',
    fontSize: pxToRem(10),
    color: theme.palette.grey[41],
  },
  subscriptionIconOuterDiv: {
    display: 'flex',
    alignItems: 'center',
  },
  subscriptionIconInnerDiv: {
    backgroundColor: theme.palette.grey[0],
    padding: theme.spacing(0.8),
    borderRadius: '6px',
  },
  planOuterDiv: {
    marginLeft: theme.spacing(1.5),
  },
  daysLeftDiv: {
    display: 'flex',
    alignItems: 'center',
    color: theme.palette.primary.main,
    fontFamily: 'Inter-SemiBold',
    textAlign: 'right',
  },
  planDetail: {
    fontFamily: 'Inter-Bold',
    color: theme.palette.grey[10],
  },
  packageIncludes: {
    fontSize: pxToRem(12),
    color: theme.palette.grey[10],
    opacity: 0.7,
    fontFamily: 'Inter-Bold',
    marginTop: theme.spacing(0.6),
    marginBottom: theme.spacing(0.6),
  },
  detailTile: {
    display: 'flex',
    justifyContent: 'space-between',
    fontSize: pxToRem(12),
  },
  detailName: {
    fontSize: pxToRem(12),
    color: theme.palette.grey[10],
    opacity: 0.7,
    fontFamily: 'Inter-Bold',
  },
  detailTileValue: {
    fontFamily: 'Inter-Bold',
  },
  upgradePlanButtonOuterDiv: {
    display: 'flex',
    justifyContent: 'center',
    marginTop: theme.spacing(3.0),
  },
  upgradePlanButton: {
    fontFamily: 'Inter-Light',
    fontSize: pxToRem(14),
    borderRadius: '6px',
    width: '238px',
    height: '42px',
  },
  asPartOfPlan: {
    marginTop: theme.spacing(-10),
    justifyContent: 'end',
    alignItems: 'end',
    [theme.breakpoints.down('xl')]: {
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: theme.spacing(2.0),
    },
  },
  asPartOfPlanContent: {
    padding: theme.spacing(1.5),
    fontSize: pxToRem(16),
    fontFamily: 'Inter-Bold',
    borderRadius: '8px',
  },
  asterisk: {
    color: theme.palette.primary.main,
  },
  noJobPost: {
    height: '485px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  noJobPostText: {
    fontSize: pxToRem(18),
    fontFamily: 'Inter-SemiBold',
    marginTop: theme.spacing(2.0),
    color: theme.palette.grey[10],
  },
  postJobButton: {
    fontFamily: 'Inter-Light',
    fontSize: pxToRem(14),
    marginTop: theme.spacing(4.0),
    width: '131px',
    height: '44px',
    padding: theme.spacing(1.2),
    borderRadius: '8px',
  },
  addIcon: {
    marginRight: theme.spacing(0.6),
  },
  adminCompanies: {
    margin: theme.spacing(0.5),
  },
  adminCompaniesInfoText: {
    fontSize: pxToRem(18),
    fontFamily: 'Inter-Bold',
    textTransform: 'uppercase',
    color: theme.palette.grey[55],
    marginTop: theme.spacing(4.0),
  },
  helperTextAdmin: {
    fontSize: pxToRem(14),
    color: theme.palette.grey[56],
    marginTop: theme.spacing(1.0),
  },
  companies: {
    marginTop: theme.spacing(1.6),
  },
  transactionHistoryText: {
    fontSize: pxToRem(14),
    fontStyle: 'italic',
    color: theme.palette.grey[52],
    cursor: 'pointer',
    textDecoration: 'underline',
    fontFamily: theme.fontFamily.medium,
  },
  requestTopupQueryText: {
    backgroundColor: theme.palette.grey[31],
    borderRadius: '6px',
    padding: `${theme.spacing(1.0)} ${theme.spacing(1.5)}`,
    marginBottom: theme.spacing(2.0),
    fontSize: pxToRem(14),
    fontFamily: theme.fontFamily.medium,
  },
  link: {
    color: theme.palette.grey[53],
  },
}));
