/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

body,
body.theme-default {
  // ----------------------------------------------------------------------------
  // Common Colors
  // ----------------------------------------------------------------------------
  @foreground: @gray-70;
  @background: @gray-90;

  // -------------------------------------------
  // Framework
  // ----------------------------------------------------------------------------
  @app-bg: var(--gray-10);
  @sidebar-bg: var(--gray-20);
  @sidebar-border-color: var(--gray-50);
  @sidebar-folder-selected-bg: var(--gray-30);
  @border-color: var(--gray-40);
  @main-color: var(--black);
  @app-bg-secondary: var(--white);
  @conversation-list-bg-opacity: fade(#000, 64%);
  @sidebar-box-shadow: #eee;
  @sidebar-box-shadow-lg: rgba(0, 0, 0, 0.12);
  @input-bar-bg: var(--white);

  // ----------------------------------------------------------------------------
  // Calling
  // ----------------------------------------------------------------------------
  @group-video-bg: var(--gray-10);
  @group-video-tile-bg: var(--gray-90);
  @participant-audio-connecting-color: @red-dark-500;
  @inactive-call-button-bg: var(--white);
  @inactive-call-button-border: var(--gray-40);
  @inactive-call-button-hover-bg: var(--gray-20);
  @inactive-call-button-hover-border: var(--gray-50);
  @disabled-call-button-bg: var(--gray-20);
  @disabled-call-button-border: var(--gray-40);
  @disabled-call-button-svg: var(--gray-60);
  @button-group-left-hover: var(--gray-20);
  @button-group-right-hover: var(--gray-90);
  @toggle-button-unselected-hover-border: var(--gray-80);
  @toggle-button-unselected-hover-bg: var(--gray-30);

  // ----------------------------------------------------------------------------
  // Modal
  // ----------------------------------------------------------------------------
  @modal-bg: #f8f8f8;
  @modal-border-color: 1px solid transparent;

  // ----------------------------------------------------------------------------
  // Preferences Input
  // ----------------------------------------------------------------------------
  @preference-account-input-bg: #fff;

  // ----------------------------------------------------------------------------
  // Editing Input
  // ----------------------------------------------------------------------------
  @text-input-editing: mix(@w-yellow, #fff, 16%);
  @text-input-background: #fff;
  @text-input-border: @gray-40;
  @text-input-border-hover: @gray-60;
  @text-input-placeholder: @gray-70;
  @text-input-color: #000;
  @text-input-alert: @red-500;
  @text-input-disabled: @gray-20;
  @text-input-label: @gray-80;
  @text-input-success: @green-500;

  // ----------------------------------------------------------------------------
  // Checkbox
  // ----------------------------------------------------------------------------
  @checkbox-background: @gray-20;
  @checkbox-background-selected: @blue-500;
  @checkbox-background-disabled: @gray-10;
  @checkbox-background-disabled-selected: @gray-60;
  @checkbox-border: @gray-80;
  @checkbox-border-hover: @blue-500;
  @checkbox-border-disabled: @gray-60;
  @checkbox-alert: @red-500;

  // ----------------------------------------------------------------------------
  // Message Quote Vertical Bar
  // ----------------------------------------------------------------------------
  @message-quote-bg: #cfcfcf;

  // ----------------------------------------------------------------------------
  // Group Creation Modal
  // ----------------------------------------------------------------------------
  @group-creation-modal-teamname-input-bg: #fff;

  // message actions menu
  @message-actions-background: #fff;
  @message-actions-border: @gray-40;
  @message-actions-background-hover: @gray-20;
  @message-actions-border-hover: @gray-50;

  .applyTheme();

  // Force the conversation list calling cell and the
  // device toggle buttons to remain always the same
  device-toggle-button {
    .applyTheme();
  }

  @import (less) 'highlight.js/styles/base16/solarized-light.css';
}

body.theme-dark {
  // ----------------------------------------------------------------------------
  // Common Colors
  // ----------------------------------------------------------------------------
  @foreground: @gray-60;
  @background: @gray-20;

  // ----------------------------------------------------------------------------
  // Framework
  // ----------------------------------------------------------------------------
  @app-bg: var(--gray-95);
  @sidebar-bg: var(--gray-100);
  @sidebar-border-color: var(--gray-95);
  @sidebar-folder-selected-bg: var(--gray-95);
  @main-color: var(--white);
  @border-color: var(--gray-90);
  @app-bg-secondary: var(--black);
  @conversation-list-bg-opacity: fade(#000, 78%);
  @input-bar-bg: var(--gray-100);

  // ----------------------------------------------------------------------------
  // Calling
  // ----------------------------------------------------------------------------
  @group-video-bg: var(--gray-100);
  @group-video-tile-bg: var(--gray-95);
  @participant-audio-connecting-color: @red-dark-500;
  @inactive-call-button-bg: var(--gray-90);
  @inactive-call-button-border: var(--gray-100);
  @inactive-call-button-hover-bg: var(--gray-80);
  @inactive-call-button-hover-border: var(--gray-70);
  @disabled-call-button-bg: var(--gray-95);
  @disabled-call-button-border: var(--gray-95);
  @disabled-call-button-svg: var(--gray-70);
  @button-group-left-hover: var(--gray-100);
  @button-group-right-hover: var(--gray-30);
  @toggle-button-unselected-hover-border: var(--gray-50);
  @toggle-button-unselected-hover-bg: var(--gray-90);

  // ----------------------------------------------------------------------------
  // Modal
  // ----------------------------------------------------------------------------
  @modal-bg: #33373a;
  @modal-border-color: 1px solid rgba(255, 255, 255, 0.12);

  // ----------------------------------------------------------------------------
  // Preferences Input
  // ----------------------------------------------------------------------------
  @preference-account-input-bg: fade(@background, 5%);

  // ----------------------------------------------------------------------------
  // Editing Input
  // ----------------------------------------------------------------------------
  @text-input-editing: #42391c;
  @text-input-background: #000;
  @text-input-border: @gray-80;
  @text-input-border-hover: @gray-40;
  @text-input-placeholder: @gray-60;
  @text-input-color: #fff;
  @text-input-alert: @red-dark-500;
  @text-input-disabled: @gray-100;
  @text-input-label: @gray-40;
  @text-input-success: @green-dark-500;

  // ----------------------------------------------------------------------------
  // Checkbox
  // ----------------------------------------------------------------------------
  @checkbox-background: @gray-90;
  @checkbox-background-selected: @blue-dark-500;
  @checkbox-background-disabled: @gray-90;
  @checkbox-background-disabled-selected: @gray-80;
  @checkbox-border: @gray-60;
  @checkbox-border-hover: @blue-dark-500;
  @checkbox-border-disabled: @gray-70;
  @checkbox-alert: @red-dark-500;

  // message actions menu
  @message-actions-background: @gray-90;
  @message-actions-border: @gray-100;
  @message-actions-background-hover: @gray-80;
  @message-actions-border-hover: @gray-70;

  // ----------------------------------------------------------------------------
  // Message Quote Vertical Bar
  // ----------------------------------------------------------------------------
  @message-quote-bg: #303030;

  // ----------------------------------------------------------------------------
  // Group Creation Modal
  // ----------------------------------------------------------------------------
  @group-creation-modal-teamname-input-bg: fade(@foreground, 10%);

  .applyTheme();

  @import (less) 'highlight.js/styles/base16/solarized-dark.css';
}