@use "sass:color";
@use "functions/color" as *;
@use "variables" as *;

// Dark color mode variables
//
// Custom variables for the `[data#{$data-infix}theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.

//
// Global colors
//

// scss-docs-start sass-dark-mode-vars
// scss-docs-start gray-color-dark-variables
$gray-100-dark: $gray-100 !default;
$gray-200-dark: $gray-200 !default;
$gray-300-dark: $gray-300 !default;
$gray-400-dark: $gray-400 !default;
$gray-500-dark: $gray-500 !default;
$gray-600-dark: $gray-600 !default;
$gray-700-dark: $gray-700 !default;
$gray-800-dark: $gray-800 !default;
$gray-900-dark: $gray-900 !default;
// scss-docs-end gray-color-dark-variables

// fusv-disable
// scss-docs-start gray-colors-dark-map
$grays-dark: (
  "100": $gray-100-dark,
  "200": $gray-200-dark,
  "300": $gray-300-dark,
  "400": $gray-400-dark,
  "500": $gray-500-dark,
  "600": $gray-600-dark,
  "700": $gray-700-dark,
  "800": $gray-800-dark,
  "900": $gray-900-dark
) !default;
// scss-docs-end gray-colors-dark-map
// fusv-enable

// fusv-disable
$high-emphasis-dark:    rgba($white, .87) !default; // Deprecated in v5.0.0
$medium-emphasis-dark:  rgba($white, .6) !default; // Deprecated in v5.0.0
$disabled-dark:         rgba($white, .38) !default; // Deprecated in v5.0.0
// fusv-enable

// scss-docs-start theme-color-dark-variables
$primary-dark:       color.scale($primary, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$secondary-dark:     $secondary !default;
$success-dark:       color.scale($success, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$info-dark:          color.scale($info, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$warning-dark:       color.scale($warning, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$danger-dark:        color.scale($danger, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$light-dark:         $light !default;
$dark-dark:          $dark !default;
// scss-docs-end theme-color-dark-variables

// scss-docs-start theme-colors-dark-map
$theme-colors-dark: (
  "primary":    $primary-dark,
  "secondary":  $secondary-dark,
  "success":    $success-dark,
  "info":       $info-dark,
  "warning":    $warning-dark,
  "danger":     $danger-dark,
  "light":      $light-dark,
  "dark":       $dark-dark
) !default;
// scss-docs-end theme-colors-dark-map

// scss-docs-start theme-text-dark-variables
$primary-text-emphasis-dark:        color.scale($primary-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$secondary-text-emphasis-dark:      $secondary-text-emphasis !default;
$success-text-emphasis-dark:        color.scale($success-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$info-text-emphasis-dark:           color.scale($info-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$warning-text-emphasis-dark:        color.scale($warning-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$danger-text-emphasis-dark:         color.scale($danger-text-emphasis, $saturation: -10%) !default; // stylelint-disable-line scss/at-function-named-arguments
$light-text-emphasis-dark:          $gray-100-dark !default;
$dark-text-emphasis-dark:           $gray-300-dark !default;
// scss-docs-end theme-text-dark-variables

// scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark:            $primary-bg-subtle !default;
$secondary-bg-subtle-dark:          $secondary-bg-subtle !default;
$success-bg-subtle-dark:            $success-bg-subtle !default;
$info-bg-subtle-dark:               $info-bg-subtle !default;
$warning-bg-subtle-dark:            $warning-bg-subtle !default;
$danger-bg-subtle-dark:             $danger-bg-subtle !default;
$light-bg-subtle-dark:              $gray-800-dark !default;
$dark-bg-subtle-dark:               color.mix($gray-800-dark, $black) !default;
// scss-docs-end theme-bg-subtle-dark-variables

// scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark:        $primary-border-subtle !default;
$secondary-border-subtle-dark:      $secondary-border-subtle !default;
$success-border-subtle-dark:        $success-border-subtle !default;
$info-border-subtle-dark:           $info-border-subtle !default;
$warning-border-subtle-dark:        $warning-border-subtle !default;
$danger-border-subtle-dark:         $danger-border-subtle !default;
$light-border-subtle-dark:          $gray-700-dark !default;
$dark-border-subtle-dark:           $gray-800-dark !default;
// scss-docs-end theme-border-subtle-dark-variables

// Gradients

// scss-docs-start theme-gradients-dark-variables
$primary-gradient-dark: (
  "start":  color.scale(#5856d6, $saturation: -10%), // stylelint-disable-line scss/at-function-named-arguments
  "stop":   color.scale(#6f67db, $saturation: -10%) // stylelint-disable-line scss/at-function-named-arguments
) !default;

$secondary-gradient-dark: (
  "start":  color.scale(#c8d2dc, $saturation: -10%), // stylelint-disable-line scss/at-function-named-arguments
  "stop":   color.scale($white, $saturation: -10%) // stylelint-disable-line scss/at-function-named-arguments
) !default;

$light-gradient-dark: (
  "start":  color.scale(#e3e8ed, $saturation: -10%), // stylelint-disable-line scss/at-function-named-arguments
  "stop":   color.scale($white, $saturation: -10%) // stylelint-disable-line scss/at-function-named-arguments
) !default;

$dark-gradient-dark: (
  "start":  color.scale(#3c4b64, $saturation: -10%), // stylelint-disable-line scss/at-function-named-arguments
  "stop":   color.scale(#212333, $saturation: -10%) // stylelint-disable-line scss/at-function-named-arguments
) !default;

$danger-gradient-dark: (
  "start":  color.scale(#e55353, $saturation: -10%), // stylelint-disable-line scss/at-function-named-arguments
  "stop":   color.scale(#d93737, $saturation: -10%) // stylelint-disable-line scss/at-function-named-arguments
) !default;

$warning-gradient-dark: (
  "start":  color.scale(#f9b115, $saturation: -10%), // stylelint-disable-line scss/at-function-named-arguments
  "stop":   color.scale(#f6960b, $saturation: -10%) // stylelint-disable-line scss/at-function-named-arguments
) !default;

$success-gradient-dark: (
  "start":  color.scale(#2eb85c, $saturation: -10%), // stylelint-disable-line scss/at-function-named-arguments
  "stop":   color.scale(#1b9e3e, $saturation: -10%) // stylelint-disable-line scss/at-function-named-arguments
) !default;

$info-gradient-dark: (
  "start":  color.scale(#39f, $saturation: -10%), // stylelint-disable-line scss/at-function-named-arguments
  "stop":   color.scale(#2982cc, $saturation: -10%) // stylelint-disable-line scss/at-function-named-arguments
) !default;

$theme-gradients-dark: (
  "primary":    $primary-gradient-dark,
  "secondary":  $secondary-gradient-dark,
  "success":    $success-gradient-dark,
  "info":       $info-gradient-dark,
  "warning":    $warning-gradient-dark,
  "danger":     $danger-gradient-dark,
  "light":      $light-gradient-dark,
  "dark":       $dark-gradient-dark
) !default;
// scss-docs-end theme-gradients-dark-variables

$body-color-dark:                   rgba($white, .87) !default;
$body-bg-dark:                      $gray-900-dark !default;
$body-secondary-color-dark:         rgba($white, .6) !default;
$body-secondary-bg-dark:            $gray-800-dark !default;
$body-tertiary-color-dark:          rgba($white, .38) !default;
$body-tertiary-bg-dark:             color.mix($gray-800-dark, #212631, 50%) !default;
$body-emphasis-color-dark:          $white !default;
$border-color-dark:                 $gray-800-dark !default;
$border-color-translucent-dark:     rgba($white, .1) !default;
$headings-color-dark:               inherit !default;
$link-color-dark:                   $primary-dark !default;
$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
$code-color-dark:                   tint-color($code-color, 40%) !default;
$mark-color-dark:                   $body-color-dark !default;
$mark-bg-dark:                      $yellow-800 !default;
$elevation-base-color-dark:         0, 0, 0 !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;

// scss-docs-start form-validation-colors-dark
$form-valid-color-dark:             $green-300 !default;
$form-valid-border-color-dark:      $green-300 !default;
$form-invalid-color-dark:           $red-300 !default;
$form-invalid-border-color-dark:    $red-300 !default;
// scss-docs-end form-validation-colors-dark


//
// Accordion
//

$accordion-icon-color-dark:         $body-color-dark !default;
$accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;

$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-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-.708'/></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='#{$accordion-icon-active-color-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-.708'/></svg>") !default;


//
// Carousel
//

$carousel-indicator-active-bg-dark:   $carousel-dark-indicator-active-bg !default;
$carousel-caption-color-dark:         $carousel-dark-caption-color !default;
$carousel-control-icon-filter-dark:   $carousel-dark-control-icon-filter !default;


//
// Close button
//

$btn-close-filter-dark:             $btn-close-white-filter !default;
// scss-docs-end sass-dark-mode-vars