import * as CSS from 'csstype'

import { ChoiceButtonStyles } from './choice-button'

export type MultiChoiceButtonType = {
  multiChoiceButton: CSS.Properties
  multiChoiceButtonCheckboxCheckmark: CSS.Properties
  multiChoiceButtonSelected: CSS.Properties
  multiChoiceButtonActive?: CSS.Properties
}

export const MultiChoiceButtonStyles: MultiChoiceButtonType = {
  multiChoiceButton: {
    ...ChoiceButtonStyles.choiceButton,
    background: '#F6F6F6',
  },
  multiChoiceButtonCheckboxCheckmark: {
    border: 'none',
    backgroundColor: '#4B46EC',
    borderRadius: '2px',
    borderColor: 'inherit',
  },
  multiChoiceButtonSelected: {
    ...ChoiceButtonStyles.choiceButtonSelected,
    border: '1px solid #4b46ec',
    background: '#f0f0ff',
    color: '#202B47',
  },
  multiChoiceButtonActive: {
    boxShadow: 'rgb(145 156 248 / 50%) 0px 0px 0px 0.2rem',
  },
}
