// ==============================|| OVERRIDES - CHECKBOX ||============================== //

import { CONTAINED_PRIMARY_BLUE } from '../colorConst';

export default function Checkbox(theme) {
  
  const checkboxSize = "2rem"

  return {
    MuiCheckbox: {
      defaultProps: {
        disableRipple: true
      },
      styleOverrides: {
        root: {
          color: theme.palette.secondary[300],
          '&:hover': {
            backgroundColor: 'transparent'
          },
          '&:active': {
            backgroundColor: 'transparent'
          },
          '&.Mui-checked': {
            color: CONTAINED_PRIMARY_BLUE
          },
          '&.Mui-focusVisible': {
            boxShadow: `0 0 0 3px ${CONTAINED_PRIMARY_BLUE}`
          },
          svg: {
            width: checkboxSize,
            height: checkboxSize,
          }
        }
      }
    }
  };
}
