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

export const useStyles = makeStyles((theme) => ({
  recruitmentAnalyticsCard: {
    marginTop: theme.spacing(2),
    width: '100%',
    backgroundColor: theme.palette.common.white,
    padding: theme.spacing(3),
    border: '1px solid',
    borderColor: theme.palette.grey[20],
    borderRadius: theme.shape.borderRadiusComponent,
  },
  recruitmentAnalyticsBox: {
    borderRadius: theme.shape.borderRadiusComponent,
    backgroundColor: theme.palette.primary.highlight,
  },
  recruitmentAnalyticsGridContainer: {
    padding: theme.spacing(2),
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'column',
    alignItems: 'center',
  },
  recruitmentAnalyticsJobTitleGrid: {
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: theme.spacing(1),
  },
  recruitmentAnalyticsJobDetailsGrid: {
    display: 'flex',
    justifyContent: 'space-around',
    paddingTop: theme.spacing(2),
    paddingLeft: theme.spacing(3),
    paddingRight: theme.spacing(3),
    width: '100%',
  },
  recruitmentAnalyticsJobDetailsGridItem: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
  },
  recruitmentAnalyticsTotalJobTitle: {
    fontSize: pxToRem(18),
    fontFamily: theme.fontFamily.bold,
  },
  recruitmentAnalyticsTotalJobCount: {
    fontSize: pxToRem(24),
    fontFamily: theme.fontFamily.bold,
  },
  recruitmentAnalyticsJobDetailsItemTitle: {
    fontSize: pxToRem(14),
    fontFamily: theme.fontFamily.regular,
  },
  totalJobPublishCountColor: {
    color: theme.palette.orange.main,
  },
  totalCompletedJobsCountColor: {
    color: theme.palette.blue.main,
  },
  activeJobsCountColor: {
    color: theme.palette.success.main,
  },
  expiredJobsCountColor: {
    color: theme.palette.primary.main,
  },
  jobsInDraftCountColor: {
    color: theme.palette.grey[43],
  },
}));
