import globals from '../globals';
import { getThemeRefs } from '../../helpers/themeHelpers';
import { ModalClass } from '../../components/descope-modal/ModalClass';

const globalRefs = getThemeRefs(globals);

const compVars = ModalClass.cssVarList;

const modal = {
  [compVars.overlayBackgroundColor]: globalRefs.colors.surface.main,
  [compVars.overlayShadow]: globalRefs.shadow.wide['2xl'],
  [compVars.overlayWidth]: '540px',
  [compVars.overlayBackdropColor]: 'hsla(214, 53%, 23%, 0.16)',
};

export default modal;

export const vars = {
  ...compVars,
};
