@use 'sass:color';

$dark-mode: true;

$theme-colors-light: (
  'primary': tint-color($primary, 25%),
  'secondary': tint-color($secondary, 25%),
  'success': tint-color($success, 25%),
  'danger': tint-color($danger, 35%),
  'warning': tint-color($warning, 25%),
  'info': tint-color($info, 25%),
  'dark': #666
);

$alert-colors: (
    primary: (
        text-color: #fff,
        background-color: #435ebe
    ),
    secondary: (
        text-color: #383d41,
        background-color: #ebeef3
    ),
    success: (
        text-color: #fff,
        background-color: #198754
    ),
    warning: (
        text-color: #3f3a26,
        background-color: #eaca4a,
    ),
    danger: (
        text-color: #fff,
        background-color: #f3616d,
    ),
    dark: (
        text-color: #fff,
        background-color: #454546,
    ),
    light: (
        text-color: $body-color,
        background-color: #f9f9f9,
    ),
    info: (
        text-color: #fff,
        background-color: #56b6f7,
    ),
);

$primary-text-dark:                 $blue-300 !default;
$secondary-text-dark:               $gray-300 !default;
$success-text-dark:                 $green-300 !default;
$info-text-dark:                    $cyan-300 !default;
$warning-text-dark:                 $yellow-300 !default;
$danger-text-dark:                  $red-300 !default;
$light-text-dark:                   $gray-100 !default;
$dark-text-dark:                    $gray-300 !default;

$primary-bg-subtle-dark:            $blue-900 !default;
$secondary-bg-subtle-dark:          $gray-900 !default;
$success-bg-subtle-dark:            $green-900 !default;
$info-bg-subtle-dark:               $cyan-900 !default;
$warning-bg-subtle-dark:            $yellow-900 !default;
$danger-bg-subtle-dark:             $red-900 !default;
$light-bg-subtle-dark:              $gray-800 !default;
$dark-bg-subtle-dark:               mix($gray-800, $black) !default;

$primary-border-subtle-dark:        $blue-700 !default;
$secondary-border-subtle-dark:      $gray-700 !default;
$success-border-subtle-dark:        $green-700 !default;
$info-border-subtle-dark:           $cyan-800 !default;
$warning-border-subtle-dark:        $yellow-800 !default;
$danger-border-subtle-dark:         $red-700 !default;
$light-border-subtle-dark:          $gray-700 !default;
$dark-border-subtle-dark:           $gray-800 !default;

$body-color-dark:                   $gray-500 !default;
$body-bg-dark:                      $gray-900 !default;
$body-emphasis-color-dark:          $gray-100 !default;
$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
$body-secondary-bg-dark:            $gray-800 !default;
$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
$emphasis-color-dark:               $white !default;
$border-color-dark:                 $gray-700 !default;
$border-color-translucent-dark:     rgba($white, .15) !default;
$headings-color-dark:               #fff !default;
$link-color-dark:                   $blue-300 !default;
$link-hover-color-dark:             $blue-200 !default;
$code-color-dark:                   $pink-300 !default;


//
// Forms
//

$form-select-indicator-color-dark:  $body-color-dark !default;
$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;

$form-switch-color-dark:            rgba($white, .25) !default;
$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;


//
// Accordion
//

$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
// scss-docs-end sass-dark-mode-vars


$sidebar-bg:                #1e1e2d;
$sidebar-link-color:        #9899ac;
$sidebar-link-hover-bg:         #282839;
$sidebar-link-hover-color:      #fff;
$sidebar-submenu-color:         $sidebar-link-color;
$sidebar-submenu-hover-color:   $white;

$card-box-shadow:                   -8px 12px 18px 0 rgba(25,42,70,.13);

// Body
$body-bg:                   #151521;
$body-color:                #c2c2d9;

// Pages
$page-auth-bg:          #151521;
$page-auth-right-bg:    linear-gradient(90deg, #151521, #151521) !default;
$page-error-bg:         $body-bg;


$link-color:                              $primary;
$link-shade-percentage:                   -20%;
$link-hover-color:                        shift-color($link-color, $link-shade-percentage);

$component-active-color:      #9899ac;
$component-active-bg:         $primary;

$headings-color:              #fff;
$text-muted:                  #7c8db5;
$mark-bg:                     #fcf8e3;

$table-color:                 $body-color;
$table-border-color:          rgb(63, 63, 63);
$table-striped-bg:            rgba(170, 168, 168, 0.05);
$table-striped-color:            #c2c2d9;
$table-active-bg:             rgba($black, $table-active-bg-factor);
$table-hover-color:           $white;
$table-hover-bg:              rgba($white, $table-hover-bg-factor);
$table-group-separator-color: #707070;
$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);
$btn-link-color:              $link-color;
$btn-link-hover-color:        $link-hover-color;
$btn-link-disabled-color:     $gray-600;

$divider-bg:    $gray-800;
$divider-text-bg: $body-bg;

$input-bg:                              #1b1b29;
$input-btn-focus-color                  : $primary;
$input-disabled-bg:                     #40404d;
$input-disabled-border-color:           null !default;
$input-placeholder-color:               $gray-500;
$input-plaintext-color:                 $body-color;
$input-color:                           $body-color;
$input-border-color:                    #35354f;

$input-focus-bg:                        $input-bg ;
$input-focus-border-color:              #4b4b68;
$input-focus-color:                     $input-color;

$input-group-addon-color:               #526e8a ;
$input-group-addon-bg:                  lighten($input-bg, 5%);
$input-group-addon-border-color:        $input-border-color;

$form-check-input-bg:               #20202d;
$form-check-input-border:           3px solid #393b42;
$form-label-color:                  $body-color;
$form-switch-color:                 $component-active-color;
$form-switch-bg-image:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") ;
$form-select-color:                 $input-color;
$form-select-border-color:          $input-border-color;
$form-select-disabled-bg:           $input-disabled-bg;
$form-select-bg:                    $input-bg;
$form-select-disabled-bg:           $input-disabled-bg;
$form-range-track-bg:               $gray-300;
$form-range-thumb-disabled-bg:             $gray-500;
$form-textarea-title-bg:             lighten($input-bg,10%);

$nav-link-disabled-color:           $gray-600;
$nav-tabs-border-color:             $gray-300;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-bg:           rgba(44, 44, 58, 0.85);
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;


$dropdown-color:                    #92929F;
$dropdown-bg:                       #2d2d40;
$dropdown-border-color:             rgba($black, .15);
$dropdown-divider-bg:               rgb(189, 199, 209);
$dropdown-box-shadow:               1px 4px 15px #f4f5f9;
$dropdown-link-color:               $dropdown-color;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            tint-color($dropdown-bg, 7%);
$dropdown-link-disabled-color:      $gray-600;
$dropdown-header-color:             $gray-600;
$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

$pagination-color:                  #92929F;
$pagination-border-color:           transparent;
$pagination-bg:                     $body-bg;
$pagination-border-color:           $body-bg;
$pagination-focus-bg:               #212E48;
$pagination-hover-color:            $white;
$pagination-hover-bg:               tint-color($body-bg, 5%);
$pagination-hover-border-color:     $body-bg;
$pagination-focus-box-shadow:       none;
$pagination-disabled-color:         $gray-600;
$pagination-disabled-bg:            $black;
$pagination-disabled-border-color:  $black;
$pagination-active-color:           $component-active-color !default;
$pagination-active-bg:              #3699FF !default;
$pagination-active-border-color:    #3699FF !default;

$card-border-color:                 rgba($black, .125);
$card-bg:                           #1e1e2d;
$card-cap-bg:                       #1e1e2d;

$accordion-color:                         $body-color;
$accordion-bg:                            transparent;
$accordion-border-color:                  rgba($black, .125);
$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");

$tooltip-bg:                        $black;

$popover-bg:                        $white;
$popover-border-color:              rgba($black, .2);

$badge-color:                       $white;
$border-color:                      $gray-600;

$modal-content-bg:                  $card-bg;
$modal-content-border-color:        rgba($black, .2);
$modal-backdrop-bg:                 $black;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;

$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;


$list-group-color:                  #afb0be !default;
$list-group-action-hover-color:     $list-group-color;
$list-group-bg:                     #151521;
$list-group-hover-bg:               #101113;
$list-group-border-color:           rgba($black, .125);
$list-group-active-color:           $white;
$list-group-active-bg:              #435ebe;
$list-group-active-border-color:    $list-group-active-bg;
$list-group-disabled-color:         $black;
$list-group-action-color:           $gray-700;
$list-group-action-active-bg:       lighten($list-group-bg, 10%);

$thumbnail-border-color:            $gray-300;
$figure-caption-color:              $gray-600;

$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $gray-600;

$carousel-control-color:             $white;
$carousel-indicator-active-bg:       $white;
$carousel-caption-color:             $white;
$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;

// Toasts
$toast-color:                       $body-color ;
$toast-background-color:            rgba(44, 46, 66, .85) ;
$toast-border-color:                rgba(0, 0, 0, .1);
$toast-header-color:                $white;
$toast-header-background-color:     #35354d;



$btn-close-color:                   $black;
$code-color:                        $pink;
$kbd-color:                         $white;
$kbd-bg:                            $gray-900;
$pre-color:                         null;

// Layout Horizontal
$horizontal-header-bg: #171722;
$horizontal-navbar-bg: #22223c;
$horizontal-submenu-bg: #191926;
$horizontal-submenu-link-color: #9899ac;
$horizontal-submenu-link-hover-bg: #1b1b28;
$horizontal-submenu-link-hover-color: #187de4;
$horizontal-submenu-shadow-color: rgba(27, 27, 27, 0.1);

// External library
// Choicesjs
$choices-bg:            $form-select-bg;
$choices-border-color:  $form-select-border-color;
$choices-input-color:   $white;
$choices-dropdown-bg:   $form-select-bg;
$choices-dropdown-color:    $choices-input-color;


$choices-highlight-bg:      lighten($card-bg, 5%);

// Sweetalert
$swal-popup-bg:                 $sidebar-bg;
$swal-popup-color:              $white;
$swal-confirm-button-bg:        #3699ff;
$swal-confirm-button-bg-hover:  #187de4;