import { RadioButtonClass } from '../../../components/descope-radio-group/RadioButtonClass';
import { getThemeRefs } from '../../../helpers/themeHelpers';
import globals from '../../globals';
import { refs } from '../inputWrapper';

const vars = RadioButtonClass.cssVarList;
const globalRefs = getThemeRefs(globals);

export const radioButton = {
  [vars.fontFamily]: refs.fontFamily,
  [vars.radioSize]: 'calc(1em + 6px)',
  [vars.radioMargin]: 'auto 4px',
  [vars.radioCheckedSize]: `calc(var(${vars.radioSize})/5)`,
  [vars.radioCheckedColor]: globalRefs.colors.surface.light,
  [vars.radioBackgroundColor]: globalRefs.colors.surface.light,
  [vars.radioBorderColor]: 'none',
  [vars.radioBorderWidth]: 0,

  _checked: {
    [vars.radioBackgroundColor]: globalRefs.colors.surface.contrast,
  },

  _hover: {
    cursor: 'pointer',
  },

  size: {
    xs: {
      [vars.fontSize]: '12px',
    },
    sm: {
      [vars.fontSize]: '14px',
    },
    md: {
      [vars.fontSize]: '16px',
    },
    lg: {
      [vars.fontSize]: '18px',
    },
  },
};

export default radioButton;
export { vars };
