import { createUseStyles } from 'react-jss'

import { ThemeProps } from '../../themes'

export const useStyles = createUseStyles(({ multiChoiceButton }: ThemeProps) => {
  const { borderRadius, backgroundColor } = multiChoiceButton.multiChoiceButtonCheckboxCheckmark

  return {
    checkboxContainer: {
      position: 'relative',
      width: '24px',
      cursor: 'pointer',
      marginRight: '16px',

      '& input': {
        /*  Hide the browser's default checkbox  */
        position: 'absolute',
        opacity: 0,
        cursor: 'pointer',
        height: 0,
        width: 0,
        /* Show the checkmark when checked */
        '&:checked': {
          '& ~ $checkboxCheckmark': {
            backgroundColor,

            '&:after': {
              display: 'block',
            },
          },
        },
      },

      '& $checkboxCheckmark': {
        '&:after': {
          left: '9px',
          top: '5px',
          width: '5px',
          height: '10px',
          border: 'solid white',
          borderWidth: '0 2px 2px 0',
          transform: 'rotate(45deg)',
        },
      },
    },

    checkboxCheckmark: {
      position: 'absolute',
      top: '-12px',
      left: 0,
      height: '24px',
      width: '24px',
      border: '1px solid',
      borderRadius,
      borderColor: backgroundColor,
      backgroundColor: '#fff',
      '&:after': {
        content: '""',
        position: 'absolute',
        display: 'none',
      },
    },
  }
})
