/* Copyright (C) 2020 to the present, Crestron Electronics, Inc.
  * All rights reserved.
  * No part of this software may be reproduced in any form, machine
  * or natural, without the express written consent of Crestron Electronics.
  * Use of this source code is subject to the terms of the Crestron Software License Agreement 
  * under which you licensed this source code.
  */
// variables
$ch5-dark-primary: darken(#29abe2, 10%) !default;
$ch5-dark-default: darken(rgb(151, 151, 151), 10%) !default;
$ch5-dark-secondary: darken(#497cc4, 10%) !default;
$ch5-dark-success: darken(#01c851, 10%) !default;
$ch5-dark-info: darken(#00af99, 10%) !default;
$ch5-dark-warning: darken(#ff8800, 10%) !default;
$ch5-dark-danger: darken(#ff3548, 10%) !default;
$ch5-dark-purple: darken(#aa66cc, 10%) !default;
$ch5-dark-white: darken(#efefef, 60%) !default;
$ch5-white: #fff !default;
$ch5-black: #000 !default;

// headind colors
$ch5-headings-color-dark: darken(#fff, 10%) !default;
$ch5-desc-color-dark: #adb5bd !default;

// navbar
$ch5-dark-navbar-bg: darken(#343a40, 5%);
$ch5-dark-navbar-default-bg: $ch5-black !default;
$ch5-dark-navbar-default-color: $ch5-white !default;
$ch5-dark-navbar-default-active-color: $ch5-dark-primary !default;

// buttons pressed color
$ch5-dark-btn-primary-pressed: darken(#228cb9, 10%) !default;
$ch5-dark-btn-default-pressed: darken(#3f3f3f, 10%) !default;
$ch5-dark-btn-secondary-pressed: darken(#2e2e70, 10%) !default;
$ch5-dark-btn-success-pressed: darken(#009e3f, 10%) !default;
$ch5-dark-btn-info-pressed: darken(#007263, 10%) !default;
$ch5-dark-btn-warning-pressed: darken(#be6600, 10%) !default;
$ch5-dark-btn-danger-pressed: darken(#b12634, 10%) !default;

// ch5 gradient button color
$ch5-dark-gradient-btn-peach: (
  darken(#ff6d63, 10%),
  darken(#ffcb71, 10%)
) !default;
$ch5-dark-gradient-btn-purple: (
  darken(#aa66cc, 10%),
  darken(#f06ec6, 10%)
) !default;
$ch5-dark-gradient-btn-blue: (
  darken(#1c5099, 10%),
  darken(#29abe2, 10%)
) !default;
$ch5-dark-gradient-btn-aqua: (
  darken(#00e499, 10%),
  darken(#1ca3f4, 10%)
) !default;

// bottom navigation
$bottom-nav-bg-dark: #000 !default;
$bottom-nav-item-bg-dark: darken(#959595, 10%) !default;

// container background
$ch5-examples-bg-dark: darken(#424951, 5%) !default;

// sidebar theme
$sidebar-dark-bg: darken(rgba(#343a40, 0.4), 5%) !default;
$sidebar-dark-title-bg: darken(rgba(#495057, 0.6), 5%) !default;
$sidebar-dark-action-bg: darken(rgba(#495057, 0.5), 5%) !default;
$sidebar-dark-action-hover: darken(rgba(#495057, 0.8), 5%) !default;
$sidebar-dark-action-selected-color: darken(#495057, 5%) !default;
$sidebar-dark-action-selected-bg: rgba(#fff, 0.7) !default;

// lighting page
$ch5-lighting-btn-dark: darken(#57606a, 5%) !default;

// container background
$ch5-container-dark-bg: #404040;

// gradient animation colors
$ch5-dark-gradient-animate: (
  rgba($ch5-container-dark-bg, 0),
  rgba($ch5-container-dark-bg, 0.3),
  rgba(#80bae8, 0),
  rgba(#7db9e8, 0)
) !default;

// news feed
$news-feed-dark-bg: darken($ch5-container-dark-bg, 5%) !default;
$news-feed-dark-desc: darken($ch5-white, 10%) !default;

// routing page
$ch5-routing-btn-selected-dark-bg: $ch5-dark-primary !default;
$ch5-routing-btn-selected-dark-color: $ch5-white !default;

// map merging
$ch5-dark-theme-colors: () !default;
$ch5-dark-theme-colors: map-merge(
  (
    "primary": (
      $ch5-dark-primary,
      $ch5-dark-btn-primary-pressed,
    ),
    "default": (
      $ch5-dark-default,
      $ch5-dark-btn-default-pressed,
    ),
    "secondary": (
      $ch5-dark-secondary,
      $ch5-dark-btn-secondary-pressed,
    ),
    "success": (
      $ch5-dark-success,
      $ch5-dark-btn-success-pressed,
    ),
    "info": (
      $ch5-dark-info,
      $ch5-dark-btn-info-pressed,
    ),
    "warning": (
      $ch5-dark-warning,
      $ch5-dark-btn-warning-pressed,
    ),
    "danger": (
      $ch5-dark-danger,
      $ch5-dark-btn-danger-pressed,
    ),
  ),
  $ch5-dark-theme-colors
);

$ch5-dark-gradient-buttons: () !default;
$ch5-dark-gradient-buttons: map-merge(
  (
    "peach": $ch5-dark-gradient-btn-peach,
    "purple": $ch5-dark-gradient-btn-purple,
    "blue": $ch5-dark-gradient-btn-blue,
    "aqua": $ch5-dark-gradient-btn-aqua,
  ),
  $ch5-dark-gradient-buttons
);

.dark-theme {
  // hr color
  hr {
    border-color: $ch5-dark-white;
  }

  // Contextual colors
  .text-primary {
    color: $ch5-dark-primary !important;
  }

  .text-success {
    color: $ch5-dark-success !important;
  }

  .text-warning {
    color: $ch5-dark-warning !important;
  }

  .text-purple {
    color: $ch5-dark-purple !important;
  }

  // navbars
  .navbar-dark {
    background-color: $ch5-dark-navbar-bg;

    &.navbar-default {
      &,
      .navbar-nav {
        background-color: $ch5-dark-navbar-default-bg;
      }

      .btn-link,
      .navbar-nav .nav-link {
        color: $ch5-dark-navbar-default-color;
      }

      // VERTICAL MENU START
      .toggler {
        .toggle-icon {
          border-color: $ch5-dark-navbar-default-color;

          &::before,
          &::after {
            background-color: $ch5-dark-navbar-default-color;
          }
        }
      }
      // VERTICAL MENU END

      .active,
      .navbar-nav .active a {
        color: $ch5-dark-navbar-default-active-color;
      }
    }
  }

  // buttons theme
  .ch5-button {
    @each $color, $value in $ch5-dark-theme-colors {
      &--#{$color} {
        @include ch5-button-variant(
          nth($value, 1),
          nth($value, 1),
          nth($value, 2)
        );
      }
    }
  }

  // outline buttons
  .outline-button {
    border: 2px solid;

    &.ch5-button {
      @each $color, $value in $ch5-dark-theme-colors {
        &--#{$color} {
          @include ch5-button-outline-variant(nth($value, 1), transparent);
        }
      }
    }
  }

  // gradient buttons
  .ch5-button {
    &.gradient-button {
      @each $color, $value in $ch5-dark-gradient-buttons {
        &--#{$color} {
          @include ch5-button-gradient-variant(
            nth($value, 1),
            nth($value, 2),
            #fff,
            #424242
          );
        }
      }
    }
  }

  // gradient button animation bg
  .contentGlint:after {
    background: linear-gradient(
      135deg,
      nth($ch5-dark-gradient-animate, 1) 0%,
      nth($ch5-dark-gradient-animate, 2) 50%,
      nth($ch5-dark-gradient-animate, 3) 99%,
      nth($ch5-dark-gradient-animate, 4) 100%
    );
  }

  // bottom navigation
  .swiper-thumb {
    background-color: $bottom-nav-bg-dark;

    .list-item ch5-button .ch5-button {
      background-color: $bottom-nav-item-bg-dark;
    }
  }

  .thumb-action svg {
    fill: $ch5-dark-navbar-default-active-color;
  }

  .horizontal-menu {
    .swiper-thumb {
      .list-item {
        ch5-button {
          .ch5-button {
            color: $white;
          }
        }
        .ch5-button--img {
          fill: $white;
        }
      }
    }
  }

  .horizontal-footer-menu {
    .swiper-thumb {
      .list-item {
        ch5-button {
          .ch5-button {
            color: $white;
          }
        }
        .ch5-button--img {
          fill: $white;
        }
      }
    }
  }

  .vertical-menu {
    .swiper-thumb {
      .list-item {
        ch5-button {
          .ch5-button {
            color: $white;
          }
        }
        .ch5-button--img {
          fill: $white;
        }
      }
    }
  }

  // listing page
  .contact-detail {
    background-color: $news-feed-dark-bg;
    border-color: $ch5-dark-white;
  }

  .custom-list-group {
    &,
    .list-group-item {
      background-color: $news-feed-dark-bg;
      border-color: $ch5-dark-white;
      color: $ch5-white;
    }

    .list-group-item.active {
      border-color: $ch5-dark-primary;
    }
  }

  // source
  .source-list .list-item .ch5-button {
    background-color: $news-feed-dark-bg;
    border-color: $ch5-dark-white;
    color: $ch5-white;

    &--selected {
      background-color: darken($news-feed-dark-bg, 7%);
      border-width: 2px !important;
      border-color: #0099ff;
    }
  }

  // container bg colors
  .examples-container {
    background-color: $ch5-examples-bg-dark;
  }

  // sidebar theme
  .sidebar {
    background-color: $sidebar-dark-bg;

    .action-group {
      color: $white;

      .title {
        background-color: $sidebar-dark-title-bg;
      }

      .ch5-button {
        background-color: $sidebar-dark-action-bg;

        &:hover {
          background-color: $sidebar-dark-action-hover;
        }

        &.ch5-button--selected {
          background-color: $sidebar-dark-action-selected-bg;
          color: $sidebar-dark-action-selected-color;
        }
      }
    }

    .ch5-select__panel__items {
      .ch5-select__panel__item {
        &:hover {
          background-color: $sidebar-dark-action-hover;
        }

        &.ch5-select__panel__item--selected {
          background-color: $sidebar-dark-action-selected-bg;
          color: $sidebar-dark-action-selected-color;
        }
      }
    }

    @include media-breakpoint-down(sm) {
      background-color: rgba(#343a40, 0.9);
    }
  }

  // lighting page
  // ch5 list
  ch5-list.ch5-custom-list {
    .ch5-button--default.ch5-button--pressed {
      background-color: $sidebar-dark-action-hover;
    }

    .ch5-list-vertical > div:nth-child(odd),
    .ch5-list-horizontal > div:nth-child(odd) {
      background-color: $sidebar-dark-bg;
    }

    ch5-button.lighting-button {
      .ch5-button.ch5-button--default {
        background-color: $ch5-lighting-btn-dark;
      }

      & ~ ch5-button.lighting-button .ch5-button.ch5-button--default {
        background-color: transparent;
      }
    }
  }

  // slider
  .ch5-slider {
    .noUi-connect {
      background-color: $ch5-dark-primary;
    }

    &.ch5-slider--orientation--vertical .noUi-target {
      background: linear-gradient(
        rgba($ch5-white, 0.08),
        rgba($ch5-black, 0.08) 33%
      );
      border-color: rgba($ch5-white, 0.1);
    }

    &.ch5-slider--orientation--horizontal .noUi-target {
      background: linear-gradient(
        to left,
        rgba($ch5-white, 0.08),
        rgba($ch5-black, 0.08) 33%
      );
      border-color: rgba($ch5-white, 0.1);
    }
  }

  // container background
  .main-section .theme-bg {
    background-color: $ch5-container-dark-bg;
    color: $ch5-white;
  }

  .details-container {
    color: $ch5-white;
  }

  ::-webkit-scrollbar-track {
    background-color: $ch5-container-dark-bg;
  }

  // heading
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    color: $ch5-headings-color-dark;
  }

  .desc-title {
    color: $ch5-desc-color-dark;
  }

  // routing page
  .routing-backdrop {
    .routing-hr {
      background: -webkit-gradient(
        linear,
        0 0,
        100% 0,
        from(transparent),
        to(transparent),
        color-stop(10%, $ch5-white)
      );
    }

    .routing-text {
      color: rgba($ch5-white, 1);
    }

    .routing-action-group {
      .btn-group .ch5-button {
        color: $ch5-white;

        &.ch5-button--selected {
          background-color: $ch5-routing-btn-selected-dark-bg;
          color: $ch5-routing-btn-selected-dark-color;
        }
      }
    }
  }

  // webservices
  .newsfeed-group .list-group-item {
    background-color: $news-feed-dark-bg;
    box-shadow: none;

    article {
      color: $news-feed-dark-desc;
    }
  }

  .info-icon {
    color: #808080;
    font-size: 26px;
    cursor: pointer;
    border: none;
    border-radius: 100%;
    background: radial-gradient(white, white, white, black, black);
  }
}
