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

export const useStyles = makeStyles((theme) => ({
  upgradePlanBox: {
    width: '100%',
    backgroundColor: theme.palette.primary.highlight,
    bottom: 0,
    zIndex: 1000,
    padding: theme.spacing(1.5),
    position: 'fixed',
    transition: 'transform 1.0s ease-in-out',
  },
  upgradePlanBoxHidden: {
    transform: 'translateY(100%)',
  },
  upgradePlanGrid: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingLeft: theme.spacing(10.0),
    paddingRight: theme.spacing(10.0),
  },
  logoGrid: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '70px',
    width: '70px',
  },
  textGrid: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    padding: theme.spacing(1),
  },
  updatePlanText: {
    fontSize: pxToRem(24),
    fontFamily: theme.fontFamily.bold,
  },
  updatePlanSubText: {
    fontSize: pxToRem(14),
    fontFamily: theme.fontFamily.semibold,
  },
  buttonGrid: {
    alignSelf: 'center',
    width: '150px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  upgradePlanDownArrowGrid: {
    position: 'absolute',
    top: 10,
    right: 10,
    cursor: 'pointer',
  },
  expandArrow: {
    fontSize: pxToRem(32),
    color: theme.palette.grey[17],
  },
}));
