import { PasscodeClass } from '../../components/descope-passcode/PasscodeClass';
import { refs } from './inputWrapper';

const vars = PasscodeClass.cssVarList;

const passcode = {
  [vars.hostDirection]: refs.direction,
  [vars.fontFamily]: refs.fontFamily,
  [vars.fontSize]: refs.fontSize,
  [vars.labelTextColor]: refs.labelTextColor,
  [vars.labelRequiredIndicator]: refs.requiredIndicator,
  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
  [vars.digitValueTextColor]: refs.valueTextColor,
  [vars.digitPadding]: '0',
  [vars.digitTextAlign]: 'center',
  [vars.digitSpacing]: '4px',
  [vars.hostWidth]: refs.width,
  [vars.digitOutlineColor]: 'transparent',
  [vars.digitOutlineWidth]: refs.outlineWidth,
  [vars.focusedDigitFieldOutlineColor]: refs.outlineColor,
  [vars.digitSize]: refs.inputHeight,

  // error message icon
  [vars.errorMessageIcon]: refs.errorMessageIcon,
  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
  [vars.errorMessageFontSize]: refs.errorMessageFontSize,

  size: {
    xs: { [vars.spinnerSize]: '15px' },
    sm: { [vars.spinnerSize]: '20px' },
    md: { [vars.spinnerSize]: '20px' },
    lg: { [vars.spinnerSize]: '20px' },
  },

  _hideCursor: {
    [vars.digitCaretTextColor]: 'transparent',
  },

  _loading: {
    [vars.overlayOpacity]: refs.overlayOpacity,
  },
};

export default passcode;
export { vars };
