import { UploadFileClass } from '../../components/descope-upload-file/UploadFileClass';
import { refs } from './inputWrapper';

const vars = UploadFileClass.cssVarList;

const uploadFile = {
  [vars.hostDirection]: refs.direction,
  [vars.labelTextColor]: refs.labelTextColor,
  [vars.fontFamily]: refs.fontFamily,

  [vars.iconSize]: '2em',

  [vars.hostPadding]: '0.75em',
  [vars.gap]: '0.5em',

  [vars.fontSize]: '16px',
  [vars.titleFontWeight]: '500',
  [vars.lineHeight]: '1em',

  [vars.borderWidth]: refs.borderWidth,
  [vars.borderColor]: refs.borderColor,
  [vars.borderRadius]: refs.borderRadius,
  [vars.borderStyle]: 'dashed',

  _required: {
    [vars.requiredIndicator]: refs.requiredIndicator,
  },

  size: {
    xs: {
      [vars.hostHeight]: '196px',
      [vars.hostWidth]: '200px',
      [vars.titleFontSize]: '0.875em',
      [vars.descriptionFontSize]: '0.875em',
      [vars.lineHeight]: '1.25em',
    },
    sm: {
      [vars.hostHeight]: '216px',
      [vars.hostWidth]: '230px',
      [vars.titleFontSize]: '1em',
      [vars.descriptionFontSize]: '0.875em',
      [vars.lineHeight]: '1.25em',
    },
    md: {
      [vars.hostHeight]: '256px',
      [vars.hostWidth]: '312px',
      [vars.titleFontSize]: '1.125em',
      [vars.descriptionFontSize]: '1em',
      [vars.lineHeight]: '1.5em',
    },
    lg: {
      [vars.hostHeight]: '280px',
      [vars.hostWidth]: '336px',
      [vars.titleFontSize]: '1.125em',
      [vars.descriptionFontSize]: '1.125em',
      [vars.lineHeight]: '1.75em',
    },
  },

  _fullWidth: {
    [vars.hostWidth]: refs.width,
  },
};

export default uploadFile;
export { vars };
