import globals from '../../globals';
import { getThemeRefs } from '../../../helpers/themeHelpers';
import { LoaderLinearClass } from '../../../components/descope-loader-linear/LoaderLinearClass';

const globalRefs = getThemeRefs(globals);
const vars = LoaderLinearClass.cssVarList;

const loaderLinear = {
  [vars.hostDisplay]: 'inline-block',
  [vars.hostWidth]: '100%',

  [vars.barColor]: globalRefs.colors.surface.contrast,
  [vars.barWidth]: '20%',

  [vars.barBackgroundColor]: globalRefs.colors.surface.light,
  [vars.barBorderRadius]: '4px',

  [vars.animationDuration]: '2s',
  [vars.animationTimingFunction]: 'linear',
  [vars.animationIterationCount]: 'infinite',
  [vars.verticalPadding]: '0.25em',

  size: {
    xs: { [vars.barHeight]: '2px' },
    sm: { [vars.barHeight]: '4px' },
    md: { [vars.barHeight]: '6px' },
    lg: { [vars.barHeight]: '8px' },
  },

  mode: {
    primary: {
      [vars.barColor]: globalRefs.colors.primary.main,
    },
    secondary: {
      [vars.barColor]: globalRefs.colors.secondary.main,
    },
  },

  _hidden: {
    [vars.hostDisplay]: 'none',
  },
};

export default loaderLinear;
export { vars };
