import { ButtonSelectionGroupItemClass } from '../../../components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
import { getThemeRefs } from '../../../helpers/themeHelpers';
import globals from '../../globals';

const globalRefs = getThemeRefs(globals);

export const vars = ButtonSelectionGroupItemClass.cssVarList;

const buttonSelectionGroupItem = {
  [vars.hostDirection]: 'inherit',
  [vars.backgroundColor]: globalRefs.colors.surface.main,
  [vars.labelTextColor]: globalRefs.colors.surface.contrast,
  [vars.borderColor]: globalRefs.colors.surface.light,
  [vars.borderStyle]: 'solid',
  [vars.borderRadius]: globalRefs.radius.sm,
  [vars.outlineColor]: 'transparent',
  [vars.borderWidth]: globalRefs.border.xs,

  _hover: {
    [vars.backgroundColor]: globalRefs.colors.surface.highlight,
  },

  _focused: {
    [vars.outlineColor]: globalRefs.colors.surface.light,
  },

  _selected: {
    [vars.borderColor]: globalRefs.colors.surface.contrast,
    [vars.backgroundColor]: globalRefs.colors.surface.contrast,
    [vars.labelTextColor]: globalRefs.colors.surface.main,
  },
};

export default buttonSelectionGroupItem;
