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

export const useStyles = makeStyles((theme) => ({
  generalInfoBox: {
    padding: theme.spacing(2),
  },
  generalInfoLabel: {
    color: theme.palette.grey[40],
    fontSize: pxToRem(14),
    fontFamily: theme.fontFamily.semiBold,
  },
  generalInfoUploaded: {
    fontSize: pxToRem(12),
    color: theme.palette.grey[17],
    fontFamily: theme.fontFamily.regular,
  },
  viewCompanyDashboardButton: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  showIcon: {
    height: '24px',
    width: '24px',
  },
  companyNameGrid: {
    paddingTop: theme.spacing(3),
  },
  companyNameLabel: {
    fontSize: pxToRem(24),
  },
  companyNameSubTitleGrid: {
    display: 'flex',
    justifyContent: 'flex-start',
  },
  companyNameSubTitleLabel: {
    fontSize: pxToRem(14),
    color: theme.palette.grey[17],
    opacity: 0.6,
    fontFamily: theme.fontFamily.regular,
  },
  dividerClass: {
    fontSize: pxToRem(14),
    marginLeft: theme.spacing(1.8),
    marginRight: theme.spacing(1.2),
  },
  companyUserDetails: {
    display: 'flex',
    justifyContent: 'space-between',
    paddingTop: theme.spacing(3),
    marginRight: theme.spacing(5),
  },
  companyUserDetailsTitle: {
    fontSize: pxToRem(18),
  },
  companyUserDetailsSubTitle: {
    fontSize: pxToRem(12),
    color: theme.palette.grey[17],
    opacity: 0.6,
    fontFamily: theme.fontFamily.regular,
  },
  companyDetailsAddressGrid: {
    paddingTop: theme.spacing(3),
  },
}));
