// ================================================================================================
//   File Name: palette.scss
//   Description: Custom color system styles, includes background, border and text colors
//   ----------------------------------------------------------------------------------------------
//   Item Name: Frest HTML Admin Template
//   Version: 1.0
//   Author: PIXINVENT
//   Author URL: http://www.themeforest.net/user/pixinvent
// ================================================================================================

//  ================================================================================================
//  WARNING: PLEASE DO NOT CHANGE THIS VARIABLE FILE.
//  THIS FILE WILL GET OVERWRITTEN WITH EACH Frest HTML TEMPLATE RELEASE.
//  TIP:
//  We suggest you to use this (assets/scss/colors/palette.scss) file for overriding color variables.
//  ================================================================================================

// usage: theme-color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)


/* Colors CSS */
/* --------- */

/*------------------------------------------------------------------
[Table of contents for each color options]

- Text Color
- Background Color
- Alert
- Border
- Badges
- Buttons
- Dropdowns
- Bullet
- Pagination
- Progress bars
- Chips
- Divider
- Timeline
- Checkboxes & Radio
- Custom Switches
- Touchspin
- Scrumboard
- Select2
-------------------------------------------------------------------*/

@function color-function($color, $type) {
  @if map-has-key($colors, $color) {
    $curr_color: map-get($colors, $color);

    @if map-has-key($curr_color, $type) {
      @return map-get($curr_color, $type);
    }
  }

  // @warn "Unknown `#{name}` in $colors.";
  @return null;
}

// Color palettes
@import "palette-variables";

// Color Classes
//   Text color: .color .lighten-* / .darken-* / .accent-*
//   Background: .bg-color .bg-lighten-* / .bg-darken-* / .bg-accent-*
//   border: .border-color .border-lighten-* / .border-darken-* / .border-accent-*
//   border-top: .border-top-color .border-top-lighten-* / .border-top-darken-* / .border-top-accent-*
//   border-bottom: .border-bottom-color .border-bottom-lighten-* / .border-bottom-darken-* / .border-bottom-accent-*
//   border-left: .border-left-color .border-left-lighten-* / .border-left-darken-* / .border-left-accent-*
//   border-right: .border-right-color .border-right-lighten-* / .border-right-darken-* / .border-right-accent-*

@each $color_name,
$color in $colors {

  @each $color_type,
  $color_value in $color {
    @if $color_type=="base" {
      /* #{$color_name} Color Style */
      /* ----------------------- */

      /* Text color */
      /* ---------- */
      .#{$color_name} {
        color: $color_value !important;
      }

      /* text with light #{$color_name} */
      .text-light-#{$color_name} {
        color: rgba($color_value, 0.20) !important;
      }

      /* Background color */
      /* ---------------- */
      .bg-#{$color_name} {
        background-color: $color_value !important;

        .card-header,
        .card-footer {
          background-color: transparent;
        }
      }

      /* bg color lighten for rgba - opacity set */
      .bg-rgba-#{$color_name} {
        background: rgba($color_value, 0.20) !important;
        // alert with light backgound color 
        &.alert{
          color: $color_value;
          &.alert-dismissible {
            .close {
              color: $color_value;
            }
          }
        }
      }

      /* Alert #{$color_name} */
      /* ---------------- */
      .alert{
        &.alert-#{$color_name} {
          background: $color_value !important;
          color: #fff !important;
          box-shadow: 0 3px 8px 0 rgba($color-value, 0.4);
          border: none;
        }
      }


      /* Border #{$color_name} */
      /* ---------------- */
      .border-#{$color_name} {
        border: 1px solid $color_value !important;

        // select2 - arrow border color according to bg color
        @if (($color-name != "white") and ($color-name != "black") and ($color-name != "dark") and ($color-name != "light")) {
          .select2-selection__arrow{
            b{
              border-color: color-function($color_name, "darken-2") !important;
            }
          }
        }

        // alert icon color with bordered alert
        &.alert{
          color: $color_value;
          &.alert-dismissible {
            .close {
              color: $color_value;
            }
          }
        }
      }

      .border-top-#{$color_name} {
        border-top: 1px solid $color_value;
      }

      .border-bottom-#{$color_name} {
        border-bottom: 1px solid $color_value;
      }

      .border-left-#{$color_name} {
        border-left: 1px solid $color_value;
      }

      .border-right-#{$color_name} {
        border-right: 1px solid $color_value;
      }
      /* Navbar icon stroke color according to bg color */
      .header-navbar{
        &.bg-#{$color_name}{
          .navbar-nav .nav-item > a i{
            -webkit-text-stroke: 0.2px $color_value !important;
          }
        }
      }

      /* Badges */
      /* ------ */
      .badge{
        // Badge Background Color
        &.badge-#{$color_name} {
          background-color: $color-value;
        }

        // Badge Light Background
        &.badge-light-#{$color_name} {
          background-color: color-function($color_name, "light");
          color: $color_value !important;
        }
        // bagde glow colors
        &.bg-#{$color_name},
        &.border-#{$color_name},
        &.badge-#{$color-name} {
          &.badge-glow {
            box-shadow: 0px 0px 10px $color_value;
          }
        }
      }
      // Badge circle Background Color
      .badge-circle-#{$color_name}{
        background-color: $color-value;
      }
      // Badge circle Light Background & text color
      .badge-circle-light-#{$color_name}{
        background-color: color-function($color_name, "light");
        color: $color_value;
      }

      // Overlay colors
      .overlay-#{$color_name} {
        @include bg-opacity($color_value, 0.6);
      }

      /* Basic buttons */
      /* ------------- */
      .btn-#{$color_name} {
        @if (($color-name != "white") and ($color-name != "black") and ($color-name != "dark") and ($color-name != "light")) {
          border-color: color-function($color_name, "darken-2") !important;
        }
        background-color: $color_value !important;
        color: #fff;

        &:hover,
        &.hover {
          @if (($color-name != "white") and ($color-name != "black") and ($color-name != "dark") and ($color-name != "light")) {
            background-color: color-function($color_name, "lighten-1") !important;
          }
          color: #fff;
          &.glow{
            box-shadow: 0 4px 12px 0 rgba($color_value, 0.6) !important;
          }
        }

        &:focus,
        &:active,
        &.active {
          @if (($color-name != "white") and ($color-name != "black") and ($color-name != "dark") and ($color-name != "light")) {
            background-color: color-function($color_name, "darken-1") !important;
          }
          color: #fff !important;
        }

        &.glow{
          box-shadow: 0 2px 4px 0 rgba($color_value, 0.5) !important;
        }

        &:disabled, &.disabled{
          color: #fff !important;
        }
      }
      // Buttons Light
      .btn-light-#{$color_name} {
        @if (($color-name != "white") and ($color-name != "black") and ($color-name != "dark") and ($color-name != "light")) {
          background-color: color-function($color_name, "light");
        }
        color: $color_value !important;

        &:hover,
        &.hover {
          @if (($color-name != "white") and ($color-name != "black") and ($color-name != "dark") and ($color-name != "light")) {
            background-color: color-function($color_name, "lighten-1") !important;
          }
          color: #fff !important;
        }
        &:active,
        &.active {
          @if (($color-name != "white") and ($color-name != "black") and ($color-name != "dark") and ($color-name != "light")) {
            background-color: color-function($color_name, "darken-1") !important;
          }
          color: #fff !important;
        }
      }

      /* Outline buttons */
      .btn-outline-#{$color_name} {
        border: 1px solid $color_value;
        background-color: transparent;
        color: $color_value !important;

        &:hover,
        &.hover {
          @if (($color-name != "white") and ($color-name != "black") and ($color-name != "dark") and ($color-name != "light")) {
            background-color: color-function($color_name, "lighten-1") !important;
          }
          color: #fff !important;
        }
        &:active,
        &.active {
          @if (($color-name != "white") and ($color-name != "black") and ($color-name != "dark") and ($color-name != "light")) {
            background-color: color-function($color_name, "darken-1") !important;
          }
          color: #fff !important;
        }
      }

      /* Dropdowns */
      /* --------- */
      .btn-#{$color_name},.btn-outline-#{$color_name}{
        &~.dropdown-menu{
            .dropdown-item{
              &.active{
                background-color: $color_value;
                color: #fff;
                &:hover{
                  color: #fff;
                }
              }
          }
        }
      }

      .dropdown,
      .dropup,
      .dropright,
      .dropleft{
        &.dropdown-icon-wrapper{
          .btn-#{$color_name},.btn-outline-#{$color_name}{ //,.btn-flat-#{$color-name}{
            &~.dropdown-menu{
              .dropdown-item{
                  &:hover{
                    i{
                      color: $color_value;
                    }
                }
                &:active{
                  i{
                    color: #fff;
                  }
                }
              }
            }
          }
        }
      }

      /* Bullet #{$color_name} */
      .bullet{
        &.bullet-#{$color_name}{
          background-color: $color_value;
        }
      }

      /* For Pagination */
      /* -------------- */
      .pagination-#{$color-name} {
        // Active page-item
        .page-item {
          &.active{
            .page-link, .page-link:hover {
              background: $color_value !important;
              color: #fff;
            }
          }
          // page-Link hover Color
          @if (($color-name != "white") and ($color-name != "black") and ($color-name != "dark") and ($color-name != "light")) {
            .page-link {
              &:hover {
                background-color: color-function($color_name, "light") !important;
              }
            }
          }
          // prev - next buttons in page-item
          &.previous,
          &.next {
            .page-link{
              color: $color_value;
              &:hover {
                background: $color_value;
              }
            }
          }
        }
      }

      /* Progress Bars #{$color-name} */
      /* ---------------------- */
      .progress-bar-#{$color_name} {
        .progress-bar {
          background-color: $color-value;
          box-shadow: 0 2px 6px 0 rgba($color-value, 0.6);
        }
      }

      /* Chips #{$color-name} */
      /* ---------------- */

      .chip-#{$color-name}{
        background-color: $color_value !important;
        .chip-body{
          color: #fff !important;
        }
      }

      /* Divider #{$color-name} */
      /* ---------------*/

      .divider.divider-#{$color-name}{
        .divider-text{
          &:before,
          &:after{
            border-color: $color-value !important;
          }
        }
      }

      /* timeline */
      .widget-timeline{
        li{
          &.timeline-items{
            &.timeline-icon-#{$color-name}{
              &:before{
                background: $color_value !important;
              }
            }
          }
        }
      }


      /* Custom Checkbox & Radio - Colored */
      /* --------------------------------- */
      input {
        &[type="checkbox"].bg-#{$color_name},
        &[type="radio"].bg-#{$color_name} {
          +.custom-control-label {
            &:before {
              background-color: $color_value !important;
              @if (($color-name != "white") and ($color-name != "black") and ($color-name != "dark") and ($color-name != "light")) {
                border-color: color-function($color_name, "darken-2") !important;
              }
            }
          }
        }
      }

      // bootstrap Checkboxes and Radio Buttons with color option
      .checkbox, .radio{
        &.checkbox-#{$color_name}, &.radio-#{$color_name} {
          input{
            &:checked~label::before{
              background-color: $color_value;
              border-color: $color_value;
            }
            &:checked~label::after{
              border-color: #fff;
            }
          }
          // Checkbox / Radio with glow
          &.checkbox-glow, &.radio-glow{
            input{
              &:checked~label::before{
                box-shadow: 0 0 6px 0 rgba($color_value,.7);
              }
            }
          }
          // Checkbox with icons
          &.checkbox-icon{
            label{
              i{
                color: #fff;
              }
            }
          }
        }
      }

      // Colored Checkbox Animation
      .checkbox{
        &.checkbox-#{$color_name}{
          label:after {
            transition: 250ms ease-in-out;
          }
        }
      }

      // Colored Radio Buttons Bg Color for after
      .radio{
        &.radio-#{$color_name} {
          input{
            &:checked~label::after{
              background-color: #fff;
              transition : all .15s cubic-bezier(.35,.9,.4,.9);
            }
          }
        }
      }

      /* Bootstrap Custom Switches */
      /* ------------------------- */
      .custom-switch-#{$color-name}{
        .custom-control-input:checked ~ .custom-control-label::before{
          background-color: $color_value !important;
          color: #fff;
          transition:all .2s ease-out;
        }

        // Custom Switches with Glow
        &.custom-switch-glow{
          .custom-control-input:not(:disabled):checked ~ .custom-control-label::before{
            box-shadow: 0 0 8px 0 rgba($color_value,.8) !important;
          }
        }
      }

      /* Touchspin Glow */
      /* -------------- */
      .input-group.touchspin-glow{
        .bootstrap-touchspin-down, .bootstrap-touchspin-up{
          &.btn-#{$color_name}{
            box-shadow: 0 0 8px 0 rgba($color_value, 0.8);
          }
        }
      }

      /* Scrumboard Application - kanban-item with coloured border */
      /* --------------------------------------------------------- */
      .kanban-container{
        .kanban-board{
          .kanban-item{
            &[data-border=#{$color_name}]{
              &:before{
                background-color: $color_value;
              }
            }
          }
        }
      }
      .edit-kanban-item{
        select{
          option{
            &.bg-#{color_name}{
              background-color: $color_value;
            }
          }
        }
      }

      /* Select2 #{$color-name} */
      /* ---------------*/
      select{
        &.select-light-#{$color-name}{
          ~.select2-container{
            .select2-selection--multiple .select2-selection__rendered {
              .select2-selection__choice, .select2-selection__choice__remove{
                @if (($color-name != "white") and ($color-name != "black") and ($color-name != "dark") and ($color-name != "light")) {
                  background-color: color-function($color_name, "light") !important;
                }
                color: $color_value !important;
              }
            }
          }
        }
      }
    }

    @else {
      .#{$color_name}.#{$color_type} {
        color: $color_value !important;
      }

      .bg-#{$color_name}.bg-#{$color_type} {
        background-color: $color_value !important;
      }

      .btn-#{$color_name}.btn-#{$color_type} {
        border-color: color-function($color_name, "darken-2") !important;
        background-color: $color_value !important;

        &:hover {
          border-color: color-function($color_name, "darken-2") !important;
          background-color: color-function($color_name, "darken-3") !important;
        }

        &:focus,
        &:active {
          border-color: color-function($color_name, "darken-3") !important;
          background-color: color-function($color_name, "darken-4") !important;
        }
      }

      .btn-outline-#{$color_name}.btn-outline-#{$color_type} {
        border-color: $color_value !important;
        color: $color_value !important;

        &:hover {
          background-color: $color_value !important;
        }
      }

      input:focus~.bg-#{$color_name} {
        box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.21rem $color_value !important;
      }

      .border-#{$color_name}.border-#{$color_type} {
        border: 1px solid $color_value !important;
      }

      .border-top-#{$color_name}.border-top-#{$color_type} {
        border-top: 1px solid $color_value !important;
      }

      .border-bottom-#{$color_name}.border-bottom-#{$color_type} {
        border-bottom: 1px solid $color_value !important;
      }

      .border-left-#{$color_name}.border-left-#{$color_type} {
        border-left: 1px solid $color_value !important;
      }

      .border-right-#{$color_name}.border-right-#{$color_type} {
        border-right: 1px solid $color_value !important;
      }

      .overlay-#{$color_name}.overlay-#{$color_type} {
        @include bg-opacity($color_value, 0.6);
      }
    }
  }
}
