/* *****************************************************************************
*
*  Live chat - LIGHT theme
*
* ***************************************************************************** */
/* Color Palette */

$bg_color_1 :        $body-bg; // Main Background Color
$bg_color_2 :        $input-bg; // Form Inputs
$bg_color_3 :        #555D66; // Button default
$bg_color_4 :        $primary; // Button primary gradient 1
$bg_color_5 :        $primary; // Button primary gradient 2
$bg_color_6 :        $gray-100; // Button disabled / scrollbar color

$txt_color_1 :        $body-color; // Main text color
$txt_color_2 :        #98A7B8; // footer text
$txt_color_3 :        $txt_color_1; // Button default & primary / autocomplete text hover color
$txt_color_4 :        $link-color; // Hyperlink color
$txt_color_5 :        $input-placeholder-color; // Placeholder color
$txt_color_6 :        $danger; // Alert/error color

$icon_color_1 :        $dark; // Base icon color
$icon_color_2 :        #8C8C8C; // Secondary icon color (multitone only)
$icon_color_3 :        #000000; // Icon shadow color (multitone only)
$icon_color_4 :        #000000; // Icon secondary shadow color (multitone only)
$icon_color_5 :        #98A7B8; // Window control icon color
$icon_color_6 :        #98A7B8; // Form input icon overlay color (e.g. "clear" icon)
$icon_color_7 :        #5081E1; // Interactive icon color 1 (attach files, delete file, etc)
$icon_color_8 :        #4AC764; // Positive Color (confirmation, availability, usually green)
$icon_color_9 :        $danger; // Negative Color (error, exception, usually red)
$icon_color_10 :    $warning; // Warning Color (warning, pending, offline, usually yellow or orange)

$border_color_1 :    $border-color; // Main border color
$border_color_2 :    $primary; // Button primary
$border_color_3 :    transparent; // Button default
$border_color_4 :    transparent; // Button disabled
$border_color_5 :    $danger; // Alert/error color

$outline_color_1 :    $dark; // Form input focus outline / autocomplete hover background color

/*
	Light Theme Color Overrides
*/

#vui-body .cx-widget.cx-theme-light {
  color: $txt_color_1;
  background-color: $bg_color_1;

  &.cx-webchat .cx-message.cx-them {
    .cx-bubble {
      background-color: $bg_color_4;
    }

    .cx-bubble-arrow svg * {
      fill: $bg_color_4
    }
  }

  .cx-webchat-counter{
    background-color: $bg_color_4;
    color: $txt_color_1;
  }

  .cx-overlay {
    background-color: $bg_color_1;
  }

  .cx-svg-icon-tone1 {
    fill: $icon_color_1 !important;
  }
  .cx-svg-icon-tone2 {
    fill: $icon_color_2;
  }
  .cx-svg-icon-shadow1 {
    fill: $icon_color_3;
    opacity: 0.2;
  }
  .cx-svg-icon-shadow2 {
    fill: $icon_color_4;
    opacity: 0.1;
  }

  //* {
  //  border-color: $border_color_1 !important;
  //}

  .cx-titlebar .cx-title {
    color: $txt_color_1;
  }

  .cx-buttons-window-control .cx-svg-icon-tone1 {
    fill: $icon_color_5;
  }
  .cx-input-icon-overlay .cx-svg-icon-tone1 {
    fill: $icon_color_6;
  }

  label {
    color: $txt_color_1;
  }

  a {
    color: $txt_color_4;
  }

  a:hover {
    color: $txt_color_1;
  }

  .cx-dropdown {
    color: black
  }

  .cx-icon-alert-circle {
    color: $txt_color_6;
  }

  .cx-footer {
    color: $txt_color_2;

    * {

      fill: $txt_color_2;
    }
  }

  .cx-form-control.cx-error {
    border-color: $border_color_5!important;
  }

  .cx-form-control {
    @include placeholder {
      color: $txt_color_5
    }
  }

  input:focus,
  textarea:focus,
  .cx-form-control:focus {
    &:not(.cx-error){
      border-color: $outline_color_1!important;
    }
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    background-color: $bg_color_2;
    color: $txt_color_1;
  }

  .cx-btn-default {
    background: none!important;
    border-color: $border_color_1 !important;
    color: $txt_color_3;
    //background-color: $bg_color_3;
  }

  .cx-btn.cx-disabled {
    background: $bg_color_6;
  }

  .cx-btn-primary {
    color: $txt_color_3;
    border-color: $border_color_2 !important;

    background: $bg_color_4; /* Old browsers */
    //background: -moz-linear-gradient(top, $bg_color_4 0%, $bg_color_5 100%); /* FF3.6-15 */
    //background: -webkit-linear-gradient(top, $bg_color_4 0%, $bg_color_5 100%); /* Chrome10-25,Safari5.1-6 */
    //background: linear-gradient(to bottom, $bg_color_4 0%, $bg_color_5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    //filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$bg_color_4', endColorstr='$bg_color_5', GradientType=0); /* IE6-9 */
  }

  .cx-ac-dropdown-menu {
    background: $bg_color_1;
    border-color: $border_color_1 !important
  }

  .cx-ac-suggestion:hover,
  .cx-ac-suggestion.cx-active {
    background-color: $outline_color_1;
    color: $txt_color_3;
  }

  .iScrollIndicator {
    background: $bg_color_6;
  }

  .cx-smokescreen {
    background-color: $bg_color_1;
    opacity: $modal-backdrop-opacity;
  }

  .cx-dialog-container {
    .cx-dialog {
      background-color: $bg_color_1;
      border-color: $border_color_1 !important;
    }
  }

  .cx-theme-background {
    background-color: $bg_color_1;
  }

  .cx-theme-border {
    border: 1px solid $border_color_1 !important;
  }

  .cx-theme-text {
    color: $txt_color_1;
  }

  .cx-theme-icon-interactive1 svg .cx-svg-icon-tone1 {
    fill: $icon_color_7;
  }

  .cx-theme-icon-positive svg .cx-svg-icon-tone1 {
    fill: $icon_color_8;
  }

  .cx-theme-icon-negative svg .cx-svg-icon-tone1 {
    fill: $icon_color_9;
  }

  .cx-theme-icon-warning svg .cx-svg-icon-tone1 {
    fill: $icon_color_10;
  }
}