//
// Color
//
$white:    #fff !default;
$gray-100: #f6f7fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #283e59 !default;
$black:    #000 !default;

$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
  (
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
  ),
  $grays
);


$blue:    #2c7be5 !default;
$red:     #e63757 !default;
$yellow:  #f6c343 !default;
$green:   #00d97e !default;

$default:       $gray-100 !default;
$primary:       $blue !default;
$success:       $green !default;
$info:          $gray-600 !default;
$warning:       $yellow !default;
$danger:        $red !default;
$dark:          $gray-900 !default;
$light:         $gray-100 !default;

$theme-colors: () !default;
$theme-colors: map-merge(
  (
    "default":    $default,
    "primary":    $primary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger
  ),
  $theme-colors
);

$ease-base-out:               cubic-bezier(0.7, 0.3, 0.1, 1);
$ease-base-in:                cubic-bezier(0.9, 0, 0.3, 0.7);
$ease-out:                    cubic-bezier(0.215, 0.61, 0.355, 1);
$ease-in:                     cubic-bezier(0.55, 0.055, 0.675, 0.19);
$ease-in-out:                 cubic-bezier(0.645, 0.045, 0.355, 1);
$ease-out-back:               cubic-bezier(0.12, 0.4, 0.29, 1.46);
$ease-in-back:                cubic-bezier(0.71, -0.46, 0.88, 0.6);
$ease-in-out-back:            cubic-bezier(0.71, -0.46, 0.29, 1.46);
$ease-fade:                   cubic-bezier(0.23, 1, 0.32, 1);

//Body
//
$body-bg:                     $white !default;
$body-color:                  $gray-900 !default;

// Links
//
$link-color:                  $primary !default;
$link-decoration:             none !default;
$link-hover-color:            darken($link-color, 15%) !default;
$link-hover-decoration:       underline !default;

// Components
//
$border-width:                1px !default;
$border-color:                #d2ddec !default;// #e3ebf6 !default;
$border-radius:               4px !default;
$border-radius-lg:            5px !default;
$border-radius-sm:            3px !default;
$component-active-color:      $white !default;
$component-active-bg:         $primary !default;
$disabled-opacity:            .65 !default;

// Fonts
//
$font-family-sans-serif:      Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:            $font-family-sans-serif !default;
$font-size-base:              14px !default;
$font-size-lg:                16px !default;
$font-size-sm:                12px !default;
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-bold:            500 !default;
$font-weight-base:            $font-weight-normal !default;
$line-height-base:            1.5 !default;

$h1-font-size:                $font-size-base * 2.25 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base !default;
$headings-margin-bottom:      8px !default;
$headings-font-family:        inherit !default;
$headings-font-weight:        500 !default;
$headings-line-height:        1.2 !default;
$headings-color:              inherit !default;
$text-color:                  $gray-600 !default;
$heading-color:               $gray-800 !default;

// z-index
//
$zindex-popover:              1060 !default;
$zindex-tooltip:              1070 !default;
$zindex-modal-background:     1040 !default;
$zindex-modal:                1050 !default;
$zindex-message:              1060 !default;
$zindex-calendar:             1060 !default;
$zindex-select:               1060 !default;

// Icon
//
$icon-prefix-cls:             dk-icon !default;
$icon-font-size:              24px !default;
$icon-base-url:               '/static' !default;

// Tables
//
$table-cell-padding:          12px !default;
$table-cell-padding-sm:       5px !default;

$table-bg:                    $white !default;
$table-hover-bg:              rgba($black, .02) !default;
$table-active-bg:             $table-hover-bg !default;

$table-border-width:          $border-width !default;
$table-border-color:          $gray-300 !default;

$table-head-bg:               $gray-100 !default;
$table-head-color:            $gray-700 !default;

$table-dark-bg:               $gray-900 !default;
$table-dark-accent-bg:        rgba($white, .02) !default;
$table-dark-hover-bg:         rgba($white, .075) !default;
$table-dark-border-color:     lighten($gray-900, 7.5%) !default;
$table-dark-color:            $body-bg !default;

$table-striped-order:         odd !default;

$table-caption-color:         $gray-600 !default;

// Buttons
//
$btn-type-colors: () !default;
$btn-type-colors: map-merge(
  (
    "primary":    $primary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger
  ),
  $btn-type-colors
);

$btn-size:                          34px !default;
$btn-size-lg:                       42px !default;
$btn-size-sm:                       26px !default;
$btn-padding-x:                     12px !default;
$btn-padding-x-lg:                  16px !default;
$btn-padding-x-sm:                  8px !default;
$btn-box-shadow:                    inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-disabled-opacity:              .65 !default;
$btn-link-disabled-color:           $gray-600 !default;
$btn-transition:                    color .15s $ease-in-out, background-color .15s $ease-in-out, border-color .15s $ease-in-out, box-shadow .15s $ease-in-out !default;
$btn-loading-size:                  $font-size-base !default;
$btn-loading-size-lg:               $font-size-lg !default;
$btn-loading-size-sm:               $font-size-sm !default;

// Scrollbar
//
$scrollbar-thumb-size:              6px !default;

// Card
//
$card-bg:                           $white !default;
$card-border-width:                 $border-width !default;
$card-border-color:                 $border-color !default;
$card-border-radius:                $border-radius !default;
$card-header-bg:                    $white !default;
$card-padding-y:                    16px !default;
$card-padding-x:                    24px !default;

// Input
//

$input-type-colors: () !default;
$input-type-colors: map-merge(
  (
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "error":     $danger
  ),
  $input-type-colors
);

$input-width:                       220px !default;
$input-height:                      34px !default;
$input-height-sm:                   24px !default;
$input-height-lg:                   40px !default;
$input-padding-y:                   6px !default;
$input-padding-x:                   12px !default;
$input-icon-size:                   14px !default;

$input-color:                       $gray-600 !default;
$input-bg:                          $white !default;
$input-placeholder-color:           #b1c2d9 !default;
$input-icon-color:                  $input-placeholder-color !default;

$input-border-color:                $border-color !default;
$input-box-shadow:                  inset 0 1px 1px rgba($primary, .075) !default;
$input-transition:                  border-color .25s $ease-in-out, box-shadow .25s $ease-in-out !default;

$input-focus-bg:                    $input-bg !default;
$input-focus-border-color:          $primary !default;
$input-focus-box-shadow:            0 0 0 2px lighten($component-active-bg, 25%) !default;

$input-hover-border-color:          $input-focus-border-color !default;
$input-disabled-bg:                 $gray-200 !default;
$input-disabled-opacity:            .75 !default;
$input-disabled-border-color:       darken($input-border-color, 10%);

// Calendar
//
$calendar-width:                    220px !default;
$calendar-color:                    $input-color !default;
$calendar-other-color:              $input-placeholder-color !default;
$calendar-border-color:             $input-border-color !default;
$calendar-active-bg:                $component-active-bg !default;
$calendar-active-border-color:      $calendar-active-bg !default;

$calendar-focus-bg:                 $input-focus-bg !default;
$calendar-focus-border-color:       $input-focus-border-color !default;
$calendar-focus-box-shadow:         $input-focus-box-shadow !default;
$calendar-hover-border-color:       $input-focus-border-color !default;
$calendar-hover-transition:         background 300ms ease !default;
$calendar-transition:               $input-transition;

$calendar-icon-size:                14px !default;
$calendar-item-size:                36px !default;
$calendar-item-hover-bg:            $light !default;
$calendar-time-active-bg:           #edf2f9 !default;
$calendar-time-item-width:          66px !default;
$calendar-time-item-height:         32px !default;
$calendar-time-shadow:              0 0 1px 1px rgba(0, 0, 0, .02), 0 -2px 12px rgba(0, 0, 0, .175) !default;
$calendar-ym-item-height:           32px !default;
$calendar-picker-width:             $calendar-item-size * 7 !default;
$calendar-icon-color:               $input-placeholder-color !default;

$calendar-panel-shadow:             0 2px 8px rgba($black, .25) !default;
$calendar-panel-padding:            12px !default;
$calendar-panel-transition:         transform 300ms $ease-fade, opacity 300ms $ease-fade !default;

$calendar-disabled-bg:              $input-disabled-bg !default;
$calendar-disabled-opacity:         $input-disabled-opacity !default;
$calendar-disabled-border-color:    $input-disabled-border-color !default;

// Select
//
$select-width:                      220px !default;
$select-icon-size:                  16px !default;
$select-icon-color:                 $input-placeholder-color !default;

$select-color:                      $input-color !default;

$select-panel-height:               256px !default;
$select-panel-shadow:               $calendar-panel-shadow !default;
$select-panel-transition:           $calendar-panel-transition !default;

$select-option-hover-bg:            $calendar-item-hover-bg !default;
$select-option-active-bg:           $calendar-time-active-bg !default;
$select-option-height:              $calendar-time-item-height !default;
$select-option-transition:          background 300ms ease !default;
$select-option-group-height:        32px !default;

$select-disabled-bg:                $input-disabled-bg !default;
$select-disabled-opacity:           $input-disabled-opacity !default;
$select-disabled-border-color:      $input-disabled-border-color !default;


// Checkbox
//
$checkbox-size:                     14px !default;
$checkbox-margin-right:             16px !default;
$checkbox-padding-x:                8px !default;
$checkbox-active-color:             $primary !default;
$checkbox-border-radius:            2px !default;
$checkbox-indicator-transtion:      border-color .25s ease, background-color .25s ease !default;
$checkbox-disabled-opacity:         .65 !default;

// Radio
//
$radio-size:                        16px !default;
$radio-margin-right:                16px !default;
$radio-padding-x:                   8px !default;
$radio-active-color:                $primary !default;
$radio-indicator-transtion:         border-color .25s ease, background-color .25s ease !default;
$radio-disabled-opacity:            .65 !default;

// Switch
//
$switch-height:                     22px !default;
$switch-height-sm:                  16px !default;
$switch-height-lg:                  28px !default;
$switch-bg:                       #e3ebf6 !default;
$switch-bg-checked:                 $primary !default;
$switch-transition:                 background-color .15s $ease-in-out, border-color .15s $ease-in-out, box-shadow .15s ease-in-out;
$switch-focus-box-shadow:           0 0 0 1px #fff, 0 0 0 2.5px rgba($component-active-bg, .25) !default;
$switch-disabled-opacity:           .4 !default;

// Pagination
//
$pagination-size:                   32px !default;
$pagination-size-sm:                24px !default;
$pagination-size-lg:                40px !default;
$pagination-padding-x:              4px !default;
$pagination-padding-x-sm:           3px !default;
$pagination-padding-x-lg:           5px !default;
$pagination-margin-right:           8px !default;
$pagination-item-color:             $gray-600 !default;
$pagination-disabled-opacity:       .65 !default;
$pagination-transition:             color .15s $ease-in-out, background-color .15s $ease-in-out, border-color .15s $ease-in-out, box-shadow .15s $ease-in-out !default;

// Alert
//
$alert-type-colors: (
  "info":       $info,
  "success":    $success,
  "warning":    $warning,
  "error":      $danger
) !default;
$alert-padding-y:                   8px !default;
$alert-padding-x:                   20px !default;
$alert-margin-bottom:               16px !default;
$alert-border-radius:               $border-radius !default;
$alert-link-font-weight:            $font-weight-bold !default;
$alert-bg-level:                    -10 !default;
$alert-border-level:                -9 !default;
$alert-color-level:                 6 !default;
$alert-close-size:                  18px !default;
$alert-close-color:                 $gray-500 !default;
$alert-close-hover-color:           $gray-800 !default;
$alert-default-bg:                  $white !default;
$alert-default-border:              $border-color !default;
$alert-default-text:                $gray-800 !default;

// Message
//
$message-content-shadow:            0 4px 12px rgba(0, 0, 0, 0.15) !default;
$message-content-transition:        transform 0.216s, opacity 0.216s ease-in !default;

// Grid
//
$grid-columns:                      12 !default;
$grid-gutter-width:                 16px !default;
$grid-outer-margin:                 32px !default;
$grid-breakpoints: (
  sm: 48em,
  md: 62em,
  lg: 75em
) !default;
$grid-gutter-compensation:          $grid-gutter-width * 0.5 * -1;
$grid-half-gutter-width:            $grid-gutter-width * 0.5;

//  Menu
//
$menu-bg:                               $white !default;
$menu-width:                            240px !default;
$menu-border-color:                     $border-color !default;
$menu-item-group-height:                34px !default;
$menu-item-group-padding-x:             8px !default;
$menu-vertical-item-height:             40px !default;
$menu-vertical-item-padding-x:          18px !default;
$menu-horizontal-item-height:           60px !default;
$menu-horizontal-item-padding-x:        18px !default;
$menu-item-color:                       $gray-600 !default;
$menu-item-active-color:                $primary !default;
$menu-item-active-bg:                   mix($white, $primary, 90%) !default;
$menu-item-icon-margin-x:               10px !default;
$menu-item-icon-size:                   16px !default;
$menu-disabled-opacity:                 .5 !default;

$menu-dark-bg:                          #152e4d !default;
$menu-dark-border-color:                $gray-900 !default;
$menu-dark-item-color:                  #6e84a3 !default;
$menu-dark-item-active-color:           $white !default;
$menu-dark-item-active-bg:              mix($black, $primary, 75%) !default;
$menu-shadow:                           0 2px 8px rgba($black, .25) !default;

// Tooltip
//
$tooltip-bg:                          rgba(0, 0, 0, .75) !default;
$tooltip-color:                         $white !default;
$tooltip-padding-x:                     6px !default;
$tooltip-padding-y:                     8px !default;
$tooltip-border-radius:                 $border-radius !default;
$tooltip-arrow-size:                    6px !default;
$tooltip-arrow-color:                   $tooltip-bg !default;
$tooltip-distance:                      $tooltip-arrow-size - 1px + 4px !default;
$tooltip-font-size:                     12px !default;
$tooltip-max-width:                     250px !default;

// Popover
//
$popover-bg:                            $white !default;
$popover-min-width:                     180px !default;
$popover-padding-x:                     12px !default;
$popover-padding-y:                     16px !default;
$popover-arrow-color:                   $popover-bg !default;
$popover-arrow-size:                    6px !default;
$popover-distance:                      $popover-arrow-size + 4px !default;
$popover-border-color:                  $border-color !default;
$popover-box-shadow:                    0 2px 8px rgba(0, 0, 0, .15) !default;

// Modal
//
$modal-bg:                              $white !default;
$modal-padding-x:                       24px !default;
$modal-padding-y:                       16px !default;
$modal-box-shadow:                      0 4px 12px rgba(0, 0, 0, .15) !default;
$modal-transfrom-y:                     -150px !default;
$modal-transition:                      transform 300ms $ease-fade, opacity 300ms $ease-fade !default;
$modal-mask-transition:                 opacity 300ms $ease-fade !default;
$modal-type-colors: (
  "info":       $info,
  "success":    $success,
  "warning":    $warning,
  "error":      $danger,
  "confirm":    $warning
) !default;

// Form
//
$form-item-height:                      $input-height !default;
$form-margin-y:                         24px !default;
$form-label-height:                     $input-height !default;
$form-label-padding-x:                  12px !default;
$form-label-padding-y:                  10px !default;
$form-message-font-size:                12px !default;
$form-message-padding-y:                4px !default;