const colorWhite = 'var(--color-white, #FFF)';
const colorOffWhite = 'var(--color-off-white, #F3F6F9)';

const colorBlack = 'var(--color-black, #000000)';

const colorGray = 'var(--color-gray, #4E5A66)';
const colorGrayDark = 'var(--color-gray-dark, #06172A)';
const colorGrayLight = 'var(--color-gray-light, #8B9AA8)';
const colorGrayLighter = 'var(--color-gray-lighter, #A7B3BD)';
const colorGrayLightest = 'var(--color-gray-lightest, #D4D9DF)';

const colorBlueLight = 'var(--color-blue-light, #54a1f3)';
const colorBlueLighter = 'var(--color-blue-lighter, #92BCEA)';
const colorBlueLightest = 'var(--color-blue-lightest, #E4ECF2)';

const colorTransparent = 'var(--color-transparent, #ff000000)';

const colorPrimary = 'var(--color-primary, #0F70D7)';
const colorDanger = 'var(--color-danger, #DF2721)';
const colorDangerDark = 'var(--color-danger-dark, #AE1010)';
const colorSuccess = 'var(--color-success, #008081)';
const colorWarning = 'var(--color-warning, purple)';
const colorOffline = `var(--color-offline, ${colorGrayLight})`;
const colorMuted = 'var(--color-muted, #586571)';
const colorMutedBackground = 'var(--color-muted-background, #F3F6F9)';

const colorBackground = `var(--color-background, ${colorGrayDark})`;
const colorOverlay = 'var(--color-overlay, rgba(6, 23, 42, 0.75))';

const userListBg = `var(--user-list-bg, ${colorOffWhite})`;
const userListText = `var(--user-list-text, ${colorGray})`;
const unreadMessagesBg = `var(--unread-messages-bg, ${colorDanger})`;
const colorGrayLabel = `var(--color-gray-label, ${colorGray})`;
const colorText = `var(--color-text, ${colorGray})`;
const colorLink = `var(--color-link, ${colorPrimary})`;

const listItemBgHover = 'var(--list-item-bg-hover, #DCE4ED)';
const colorTipBg = 'var(--color-tip-bg, #333333)';
const itemFocusBorder = `var(--item-focus-border, ${colorBlueLighter})`;

const btnDefaultColor = `var(--btn-default-color, ${colorGray})`;
const btnDefaultBg = `var(--btn-default-bg, ${colorWhite})`;
const btnDefaultBorder = `var(--btn-default-border, ${colorWhite})`;

const btnDefaultGhostColor = `var(--btn-default-color, ${colorWhite})`;
const btnDefaultGhostBg = 'var(--btn-default-bg, rgba(255, 255, 255, 0.1))'; // colorWhite, 10%
const btnDefaultGhostBorder = 'var(--btn-default-border, rgba(255, 255, 255, 0.5))'; // colorWhite, 50%
const btnDefaultGhostActiveBg = 'var(--btn-default-active-bg, rgba(255, 255, 255, 0.2))'; // colorWhite, 20%

const btnPrimaryBorder = 'var(--btn-primary-border, rgba(15, 112, 215, 0.5))'; // colorPrimary, 50%
const btnPrimaryColor = `var(--btn-primary-color, ${colorWhite})`;
const btnPrimaryBg = `var(--btn-primary-bg, ${colorPrimary})`;
const btnPrimaryHoverBg = 'var(--btn-primary-hover-bg, #0C57A7)';
const btnPrimaryActiveBg = 'var(--btn-primary-active-bg, #0A4B8F)';

const btnSuccessBorder = `var(--btn-success-border, ${colorSuccess})`;
const btnSuccessColor = `var(--btn-success-color, ${colorWhite})`;
const btnSuccessBg = `var(--btn-success-bg, ${colorSuccess})`;

const btnWarningBorder = `var(--btn-warning-border, ${colorWarning})`;
const btnWarningColor = `var(--btn-warning-color, ${colorWhite})`;
const btnWarningBg = `var(--btn-warning-bg, ${colorWarning})`;

const btnDangerBorder = `var(--btn-danger-border, ${colorDanger})`;
const btnDangerColor = `var(--btn-danger-color, ${colorWhite})`;
const btnDangerBg = `var(--btn-danger-bg, ${colorDanger})`;
const btnDangerBgHover = 'var(--btn-danger-bg-hover, #C61C1C)';

const btnDarkBorder = `var(--btn-dark-border, ${colorDanger})`;
const btnDarkColor = `var(--btn-dark-color, ${colorWhite})`;
const btnDarkBg = `var(--btn-dark-bg, ${colorGrayDark})`;

const btnOfflineBorder = `var(--btn-offline-border, ${colorOffline})`;
const btnOfflineColor = `var(--btn-offline-color, ${colorWhite})`;
const btnOfflineBg = `var(--btn-offline-bg, ${colorOffline})`;

const btnMutedBorder = `var(--btn-muted-border, ${colorMutedBackground})`;
const btnMutedColor = `var(--btn-muted-color, ${colorMuted})`;
const btnMutedBg = `var(--btn-muted-bg, ${colorMutedBackground})`;

const toolbarButtonColor = `var(--toolbar-button-color, ${btnDefaultColor})`;
const userThumbnailBorder = `var(--user-thumbnail-border, ${colorGrayLight})`;
const loaderBg = `var(--loader-bg, ${colorGrayDark})`;
const loaderBullet = `var(--loader-bullet, ${colorWhite})`;

const systemMessageBackgroundColor = 'var(--system-message-background-color, #F9FBFC)';
const systemMessageBorderColor = 'var(--system-message-border-color, #C5CDD4)';
const systemMessageFontColor = `var(--system-message-font-color, ${colorGrayDark})`;
const highlightedMessageBackgroundColor = 'var(--system-message-background-color, #fef9f1)';
const highlightedMessageBorderColor = 'var(--system-message-border-color, #f5c67f)';
const colorHeading = `var(--color-heading, ${colorGrayDark})`;
const palettePlaceholderText = 'var(--palette-placeholder-text, #787675)';
const pollAnnotationGray = 'var(--poll-annotation-gray, #333333)';

const toolbarButtonBorderColor = `var(--toolbar-button-border-color, ${colorGrayLighter})`;
const toolbarListColor = `var(--toolbar-list-color, ${colorGray})`;
const toolbarButtonBg = `var(--toolbar-button-bg, ${btnDefaultBg})`;
const toolbarListBg = 'var(--toolbar-list-bg, #DDD)';
const toolbarListBgFocus = 'var(--toolbar-list-bg-focus, #C6C6C6)';
const colorContentBackground = 'var(--color-content-background, #1B2A3A)';

const dropdownBg = `var(--dropdown-bg, ${colorWhite})`;

const pollStatsBorderColor = 'var(--poll-stats-border-color, #D4D9DF)';
const pollBlue = `var(--poll-blue, ${colorPrimary})`;

const toastDefaultColor = `var(--toast-default-color, ${colorWhite})`;
const toastDefaultBg = `var(--toast-default-bg, ${colorGray})`;

const toastInfoColor = `var(--toast-info-color, ${colorWhite})`;
const toastInfoBg = `var(--toast-info-bg, ${colorPrimary})`;

const toastSuccessColor = `var(--toast-success-color, ${colorWhite})`;
const toastSuccessBg = `var(--toast-success-bg, ${colorSuccess})`;

const toastErrorColor = `var(--toast-error-color, ${colorWhite})`;
const toastErrorBg = `var(--toast-error-bg, ${colorDanger})`;

const webcamBackgroundColor = 'var(--webcam-background-color, #001428FF)';
const webcamPlaceholderBorder = 'var(--webcam-placeholder-border, rgba(255, 255, 255, 0.5))'; // colorWhite, 50%

const toastWarningColor = `var(--toast-warning-color, ${colorWhite})`;
const toastWarningBg = `var(--toast-warning-bg, ${colorWarning})`;

export {
  colorWhite,
  colorOffWhite,
  colorBlack,
  colorGray,
  colorGrayDark,
  colorGrayLight,
  colorGrayLighter,
  colorGrayLightest,
  colorTransparent,
  colorBlueLight,
  colorBlueLighter,
  colorBlueLightest,
  colorPrimary,
  colorDanger,
  colorDangerDark,
  colorSuccess,
  colorWarning,
  colorBackground,
  colorOverlay,
  userListBg,
  userListText,
  unreadMessagesBg,
  colorGrayLabel,
  colorText,
  colorLink,
  listItemBgHover,
  colorTipBg,
  itemFocusBorder,
  btnDefaultColor,
  btnDefaultBg,
  btnDefaultBorder,
  btnDefaultGhostColor,
  btnDefaultGhostBg,
  btnDefaultGhostBorder,
  btnDefaultGhostActiveBg,
  btnPrimaryBorder,
  btnPrimaryColor,
  btnPrimaryBg,
  btnPrimaryHoverBg,
  btnPrimaryActiveBg,
  btnSuccessBorder,
  btnSuccessColor,
  btnSuccessBg,
  btnWarningBorder,
  btnWarningColor,
  btnWarningBg,
  btnDangerBorder,
  btnDangerColor,
  btnDangerBg,
  btnDangerBgHover,
  btnDarkBorder,
  btnDarkColor,
  btnDarkBg,
  btnOfflineBorder,
  btnOfflineColor,
  btnOfflineBg,
  btnMutedBorder,
  btnMutedColor,
  btnMutedBg,
  toolbarButtonColor,
  userThumbnailBorder,
  loaderBg,
  loaderBullet,
  systemMessageBackgroundColor,
  systemMessageBorderColor,
  systemMessageFontColor,
  highlightedMessageBackgroundColor,
  highlightedMessageBorderColor,
  colorHeading,
  palettePlaceholderText,
  pollAnnotationGray,
  toolbarButtonBorderColor,
  toolbarListColor,
  toolbarButtonBg,
  toolbarListBg,
  toolbarListBgFocus,
  pollStatsBorderColor,
  pollBlue,
  colorContentBackground,
  dropdownBg,
  toastDefaultColor,
  toastDefaultBg,
  toastInfoColor,
  toastInfoBg,
  toastSuccessColor,
  toastSuccessBg,
  toastErrorColor,
  toastErrorBg,
  toastWarningColor,
  toastWarningBg,
  webcamBackgroundColor,
  webcamPlaceholderBorder,
};