import globals from '../globals';
import { MappingsFieldClass } from '../../components/mapping-fields/descope-mappings-field/MappingsFieldClass';
import { getThemeRefs } from '../../helpers/themeHelpers';
import { refs } from './inputWrapper';

const globalRefs = getThemeRefs(globals);

const vars = MappingsFieldClass.cssVarList;

export const mappingsField = {
  [vars.hostWidth]: refs.width,
  [vars.hostDirection]: refs.direction,
  [vars.fontSize]: refs.fontSize,
  [vars.fontFamily]: refs.fontFamily,
  [vars.separatorFontSize]: '14px',
  [vars.labelsFontSize]: '14px',
  [vars.labelsLineHeight]: '1',
  [vars.labelsMarginBottom]: '6px',
  [vars.labelTextColor]: refs.labelTextColor,
  [vars.itemMarginBottom]: '1em',
  // To be positioned correctly, the min width has to match the text field min width
  [vars.valueLabelMinWidth]: refs.minWidth,
  // To be positioned correctly, the min width has to match the combo box field min width
  [vars.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
  [vars.separatorWidth]: '70px',
  [vars.removeButtonWidth]: '60px',
};

export default mappingsField;
export { vars };
