:root {
  --jsxc-color-main-text: #222;
  --jsxc-color-main-background: #fff;
  --jsxc-color-main-background-translucent: rgba(255, 255, 255, 0.8);
  --jsxc-color-background-hover: #f5f5f5;
  --jsxc-color-background-dark: #ededed;
  --jsxc-color-background-dark-translucent: rgba(70, 70, 70, 0.8);
  --jsxc-color-background-darker: #dbdbdb;
  --jsxc-color-placeholder-light: #e6e6e6;
  --jsxc-color-placeholder-dark: #ccc;
  --jsxc-color-primary: #1d2d44;
  --jsxc-color-primary-light: #e6f3fa;
  --jsxc-color-primary-text: #fff;
  --jsxc-color-primary-text-dark: #ededed;
  --jsxc-color-error: #e9322d;
  --jsxc-color-warning: #eca700;
  --jsxc-color-success: #46ba61;
  --jsxc-color-text-maxcontrast: #767676;
  --jsxc-color-text-light: #222;
  --jsxc-color-text-lighter: #767676;
  --jsxc-color-loading-light: #ccc;
  --jsxc-color-loading-dark: #444;
  --jsxc-color-box-shadow: rgba(77, 77, 77, 0.5);
  --jsxc-color-border: #ededed;
  --jsxc-color-border-dark: #dbdbdb;
}

body.jsxc-dark {
  .jsxc-dialog-wrapper,
  #jsxc-window-list,
  #jsxc-roster {
    --jsxc-color-main-text: #d8d8d8;
    --jsxc-color-main-background: #181818;
    --jsxc-color-main-background-translucent: rgba(24, 24, 24, 1);
    --jsxc-color-background-hover: #0e0e0e;
    --jsxc-color-background-dark: #222;
    --jsxc-color-background-dark-translucent: rgba(51, 51, 51, 0.8);
    --jsxc-color-background-darker: #2c2c2c;
    --jsxc-color-placeholder-light: #323232;
    --jsxc-color-placeholder-dark: #4b4b4b;
    --jsxc-color-primary: #1d2d44;
    --jsxc-color-primary-light: #16232a;
    --jsxc-color-primary-text: #fff;
    --jsxc-color-primary-text-dark: #ededed;
    --jsxc-color-error: #e9322d;
    --jsxc-color-warning: #eca700;
    --jsxc-color-success: #46ba61;
    --jsxc-color-text-maxcontrast: #8c8c8c;
    --jsxc-color-text-light: #d8d8d8;
    --jsxc-color-text-lighter: #8c8c8c;
    --jsxc-color-loading-light: #777;
    --jsxc-color-loading-dark: #ccc;
    --jsxc-color-box-shadow: rgba(0, 0, 0, 0.5);
    --jsxc-color-border: #2a2a2a;
    --jsxc-color-border-dark: #3c3c3c;
  }
}

$black: #000;
$gray20: lighten($black, 20%);
$gray30: lighten($black, 30%);
$gray50: lighten($black, 50%);
$gray60: lighten($black, 60%);
$gray70: lighten($black, 70%);
$gray80: lighten($black, 80%);
$gray90: lighten($black, 90%);
$white: #fff;
$orange: #ffa500;
$red: #f00;
$blue: #00f;

$success-bg: var(--jsxc-color-success);
$error-bg: var(--jsxc-color-error);
$warning-bg: var(--jsxc-color-warning);
$main-bg: var(--jsxc-color-main-background);
$main-bg-translucent: var(--jsxc-color-main-background-translucent);
$bg-hover: var(--jsxc-color-background-hover);
$bg-dark: var(--jsxc-color-background-dark);
$bg-darker: var(--jsxc-color-background-darker);

$invalid-border: var(--jsxc-color-error);
$dialog-input-invalid: var(--jsxc-color-error);
$dialog-input-readonly-bg: var(--jsxc-color-background-dark);
$spot-border: var(--jsxc-color-border);

$presence-colors: (online: #008000,
chat: #008000,
away: $orange,
xa: $orange,
dnd: $red,
offline: $gray60);

$notice-bg: var(--jsxc-color-warning);
$notice-color: var(--jsxc-color-main-text);
$window-bar-bg: var(--jsxc-color-primary);
$window-bar-color: var(--jsxc-color-primary-text);
$window-bar-color-hover: var(--jsxc-color-primary-text-dark);
$window-min-bar-bg: var(--jsxc-color-background-dark);
$window-min-bar-color: var(--jsxc-color-main-text);
$window-bg: var(--jsxc-color-background-dark);
$window-border: var(--jsxc-color-background-darker);
$window-placeholder: var(--jsxc-color-main-text);

$tools-color: var(--jsxc-color-primary-text);
$window-close-hover: var(--jsxc-color-primary-text);

$chatmessage-bg: var(--jsxc-color-main-background);
$chatmessage-a: $blue;
$chatmessage-footer: $gray60;
$chatmessage-out-bg: var(--jsxc-color-background-darker);
$chatmessage-received: var(--jsxc-color-success);

$scrollbar-bg: $gray80;
$scrollbar-color: $gray50;
$scrollbar-bg-hover: $gray70;
$scrollbar-bg-disabled: $gray90;
$scrollbar-color-disabled: $gray80;

$emoticon-selection-bg: var(--jsxc-color-background-dark-translucent);
$emoticon-selection-hover: var(--jsxc-color-main-background);

$roster-bg: var(--jsxc-color-background-dark);
$roster-bg-hover: var(--jsxc-color-background-hover);
$roster-input-bg: var(--jsxc-color-main-background);
$roster-input-shadow: var(--jsxc-color-background-darker);
$roster-color: var(--jsxc-color-main-text);
$roster-a: var(--jsxc-color-text-light);

$roster-border-left: var(--jsxc-color-background-darker);
$roster-bottom-bg: var(--jsxc-color-background-darker);
$roster-bottom-color: var(--jsxc-color-main-text);
$roster-bottom-disabled: var(--jsxc-color-text-lighter);
$roster-bottom-bg-hover: var(--jsxc-color-background-hover);
$roster-bottom-color-hover: var(--jsxc-color-main-text);

$fullscreen-bg: $gray60;
$video-status-bg: rgba($black, 0.5);
$video-status-color: $white;
$video-bg: $gray60;

$novideo-color: $white;
$novideo-bg: $gray30;

$establishing-color1: #a1a1a1;
$establishing-color2: #f1f1f1;
$ringing-color1: #98d48f;
$ringing-color2: #76ba6c;

$avatar-bg: $gray60;
$avatar-color: $gray70;

$unread-bg: var(--jsxc-color-warning);
$unread-color: var(--jsxc-color-main-text);