import globals from '../globals';
import {
  UserAttributeClass,
  componentName,
} from '../../components/descope-user-attribute/UserAttributeClass';
import { createHelperVars, getThemeRefs, useVar } from '../../helpers/themeHelpers';

const globalRefs = getThemeRefs(globals);
export const vars = UserAttributeClass.cssVarList;

const userAttribute = {
  [vars.labelMinWidth]: '150px',
  [vars.hostDirection]: globalRefs.direction,
  [vars.contentMinWidth]: `calc(100% - ${useVar(vars.labelMinWidth)} - ${useVar(vars.itemsGap)})`,
  [vars.badgeMaxWidth]: '85px',
  [vars.itemsGap]: '4px',
  [vars.hostMinWidth]: '310px',
  [vars.hostWidth]: '530px',
  [vars.hostMaxWidth]: '100%',
  [vars.iconColor]: 'currentcolor',

  _fullWidth: {
    [vars.hostWidth]: '100%',
  },
};

export default userAttribute;
