// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override


// Table of Contents
//
// Prefix
// Colors
// Options
// Spacing
// Size
// Animation
// Shadow
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Font

// Components
// Z-index master list

// Tables
// Buttons
// Forms
// Dropdowns
// Select
// Navs
// Navbar
// Pagination
// Form states and alerts
// Cards
// Tooltips
// Popovers
// Badges
// Tag
// Modals
// Alerts
// Progress bars
// List group
// Image thumbnails
// Figures
// Breadcrumbs
// Carousel
// Close
// Code
// Switch
// Slider
// Checkbox
// Radio
// Input-number
// Rate
// Steps
// Date-picker
// Upload
// Timeline
// Editor
// Calendar
// Avastar
// Cascader
// Transfer
// Menu
// Tree
// Notice
// Mes

// General variable structure
//
// Variable format should follow the `$component-modifier-state-property` order.


// Prefix
$icon-prefix             :'aidicon';
$css-prefix             :'';

// Colors
//
// Grayscale and brand colors.

@import "mixins/color.scss";


// 品牌色
$brand-primary:             #147BD1 !default;
$brand-primary-10:          rgba($brand-primary, .1); // 主色辅色
$brand-primary-5:           rgba($brand-primary, .05); // 主色辅色

// 中性色
$white:  #fff;
$black:  #000;

// $gray-darker:                 gray-color($brand-primary,#deffff,#000,2%,16%); //背景色深色
// $gray-dark:                   gray-color($brand-primary,#dff,#0f0f0f,2%,27%); //正文颜色
// $gray:                        gray-color($brand-primary,#f5ffff,#0f0f0f,2%,53%); //文字灰色
// //$gray-light:                  rgba($gray,.7); //文字颜色
// $gray-lighter:                gray-color($brand-primary,#faffff,#262626,2%,75%); //disabled颜色，输入框图标颜色, placeholder颜色
// $gray-lightest:               gray-color($brand-primary,#faffff,#262626,2%,88%); //边框颜色
// $gray-lightest-18:            gray-color($brand-primary,#fbffff,#262626,2%,92%); //背景色，分割线
// $gray-lightest-10:            gray-color($brand-primary,#fafcfc,#262626,2%,96%); //背景色
// $gray-lightest-5:             gray-color($brand-primary,#feffff,#262626,2%,98%); //背景色


$gray-light-2:                  rgba($black, .02); // 背景色
$gray-light-4:                  rgba($black, .04); // 背景色
$gray-light-9:                  rgba($black, .09); // 分割线
$gray-light-15:                 rgba($black, .15); // 边框色
$gray-light-25:                 rgba($black, .25); // 不可用状态
$gray-light-45:                 rgba($black, .45); // 文字浅色
$gray-light-65:                 rgba($black, .65); // 正文颜色
$gray-light-85:                 rgba($black, .85); // 文字深色

$gray-darker:          #191919;  // 背景深色


// 安全色
$brand-success:             #6DC41F !default;
$brand-success-10:          rgba($brand-success, .1);
$brand-info:                #147BD1 !default;
$brand-warning:             #EDA30F !default;
$brand-warning-10:          rgba($brand-warning, .1);
$brand-danger:              #D11429 !default;
$brand-danger-10:           rgba($brand-danger, .1);


//color status
$color-status: (
        primary: $brand-primary,
        success: $brand-success,
        info: $brand-info,
        warning: $brand-warning,
        danger: $brand-danger
);

//状态颜色
$default-bg:                $gray-light-4;
$disabled-bg:               $gray-light-25;
$divider-bg:                $gray-light-9;
$list-hover-bg:             rgba($brand-primary,0.05);
$list-active-bg:            rgba($brand-primary,0.1);


// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-print-styles:       true;
$enable-ie9:                true;
$enable-brand-primary:      true !default;
$enable-gradients:          false !default;

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
// 以4px为基数
$spacer: 16px;
$spacer-series: (
        0: 0,
        4: 4px,
        8: 8px,
        12: 12px,
        16: 16px,
        20: 20px,
        24: 24px,
        28: 28px,
        32: 32px,
        36: 36px,
        40: 40px
);

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%
);

// Animation
$animation-time: .3s;
$animation-time-lg: .6s;
$transition-time: .2s;

// Shadow
$shadow-color           : rgba(0, 0, 0, .15);
$shadow-card            : 0 4px 12px $shadow-color;
$shadow-up              : 0 -2px 8px $shadow-color;
$shadow-down            : 0 2px 8px $shadow-color;
$shadow-left            : -2px 0 8px $shadow-color;
$shadow-right           : 2px 0 8px $shadow-color;
$shadow-base            : 0 0 8px $shadow-color;

// Body
//
// Settings for the `<body>` element.

$body-bg:       $white !default;
$body-color:    $gray-light-65 !default;

// Links
//
// Style anchor elements.

$link-color:            $brand-primary;
$link-decoration:       none;
$link-hover-color:      lighten($link-color, 4.9%); //modify
$link-active-color:     darken($link-color, 4.9%);//add
$link-hover-decoration: none;


// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
        "": 0, // 默认为移动端，class不加断点前缀
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px
);


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px
);


// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:               12;
$grid-gutter-width-base:     30px;
$grid-gutter-widths: (
        xs: $grid-gutter-width-base,
        sm: $grid-gutter-width-base,
        md: $grid-gutter-width-base,
        lg: $grid-gutter-width-base,
        xl: $grid-gutter-width-base
);

// Fonts
//
// Font, line-height, and color for body text, headings, and more.
$font-family-serif:        -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-family-monospace:    Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;


$font-size-base: 16px; // Assumes the browser default, typically `16px`
$font-size-lg:   $font-size-base + 4px; // 20px
$font-size-sm:   $font-size-base - 2px; // 14px
$font-size-xs:   $font-size-base - 4px; // 12px

$font-weight-normal: 400;
$font-weight-bold: 500;
$font-weight-light: 300;

$font-size-h1: 40px;
$font-size-h2: 32px;
$font-size-h3: 28px;
$font-size-h4: 24px;
$font-size-h5: 20px;
$font-size-h6: 16px;

$headings-margin-bottom: 8px;
$headings-font-family:   $font-family-serif;//modify
$headings-font-weight:   400;
$headings-line-height:   1.1;
$headings-color:         inherit;
$headings-margin-bottom: 4px;


$blockquote-small-color:  $gray-light-45;
$blockquote-font-size:    ($font-size-base * 1.25);
$blockquote-border-color: $gray-light-25;
$blockquote-border-width: 4px;


// Components
//
// Define common padding and border radius sizes and more.

$line-height-lg:         (4 / 3);
$line-height-sm:         1.5;
$line-height-base:       1.5;

$border-width:           1px;

$border-radius:          4px;

$component-active-color: $white;
$component-active-bg:    rgba($brand-primary,.1);

$transition-base:        all $transition-time ease-in-out;
$transition-fade:        opacity .15s linear;
$transition-collapse:    0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
$horizontal-transition-collapse:    0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;

$hr-border-color: rgba($black,.1);
$hr-border-width: $border-width;

$mark-padding: .2em;

$dt-font-weight: $font-weight-bold;

$kbd-box-shadow:         inset 0 -2px 0 rgba($black,.25);
$nested-kbd-font-weight: $font-weight-bold;

$list-inline-padding: 5px;


// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

$zindex-dropdown-backdrop:  1050;
$zindex-dropdown:           1060;
$zindex-sticky:             1020;
$zindex-fixed:              1030;
$zindex-modal-backdrop:     1050;
$zindex-modal:              1050;
$zindex-popover:            1060;
$zindex-tooltip:            1070;
$zindex-message:            1090;
$zindex-notification:       1090;
$zindex-loading:            1100;
$zindex-loading-fullscreen: 2000;
$zindex-loading-bar:        2000;


// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-prefix-cls:              $css-prefix + "table";

$table-color:                   $body-color;
$table-font-size:               $font-size-sm;
$table-empty-text-color:        $gray-light-25;
$table-sm-font-size:            $font-size-xs;
$table-lg-font-size:            $font-size-base;
$table-cell-x-padding:          16px;
$table-cell-height:             48px;
$table-lg-cell-height:          60px;
$table-sm-cell-height:          40px;
$table-cell-bg:                 $white;
$table-cell-padding:            12px;
$table-sm-cell-padding:         5px;
$table-both-ends-padding:       30px;

$table-bg:                      $white;
$table-bg-accent:               $gray-light-2;
$table-bg-accent-height:        300px;
$table-bg-hover:                $list-hover-bg;
$table-bg-active:               $list-active-bg;


$table-border-width:            $border-width;
$table-border-color:            $gray-light-9;
$table-border:                  1px solid $table-border-color;

$table-head-bg:                 $gray-light-2;
$table-head-color:              $gray-light-85;

$table-transition:               .2s ease-in-out;
$table-fixed-box-shadow:          0 0 10px rgba(0, 0, 0, .12);

// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.
$btn-prefix-cls:                 $css-prefix + "btn";

$btn-padding-x:                  16px;
$btn-height:                     32px;
$btn-font-size:                  $font-size-sm;
$btn-icon-font-size:             $font-size-lg;
$btn-active-box-shadow:          inset 0 0 0 2px rgba($white, .3);

$btn-primary-color:              $white;
$btn-primary-bg:                 $brand-primary;

$btn-secondary-bg:               $white;
$btn-secondary-color:            $body-color;
$btn-secondary-border:           $gray-light-15;
$btn-secondary-active-box-shadow:inset 0 0 0 2px rgba($brand-primary, .3);

$btn-info-color:                 $white;
$btn-info-bg:                    $brand-info;

$btn-success-color:              $white;
$btn-success-bg:                 $brand-success;

$btn-warning-color:              $white;
$btn-warning-bg:                 $brand-warning;

$btn-danger-color:               $white;
$btn-danger-bg:                  $brand-danger;

$btn-outline-normal-color:      $gray-light-65;
$btn-outline-normal-border:     $gray-light-15;

$btn-outline-primary-color:      $brand-primary;
$btn-outline-primary-border:     $brand-primary;

$btn-outline-info-color:         $brand-info;
$btn-outline-info-border:        $brand-info;

$btn-outline-success-color:      $brand-success;
$btn-outline-success-border:     $brand-success;

$btn-outline-danger-color:       $brand-danger;
$btn-outline-danger-border:      $brand-danger;

$btn-outline-warning-color:      $brand-warning;
$btn-outline-warning-border:     $brand-warning;

$btn-outline-white-color:        $white;
$btn-outline-white-border:       $white;

$btn-link-disabled-color:        $gray-light-45;

$btn-block-margin-y:             8px;

$btn-sm-padding-x:               12px;
$btn-sm-height:                  24px;
$btn-sm-font-size:               $font-size-xs;
$btn-sm-icon-font-size:          $font-size-base;

$btn-lg-padding-x:               16px;
$btn-lg-height:                  40px;
$btn-lg-font-size:               $font-size-base;
$btn-lg-icon-font-size:          24px;

$btn-transition:                 $transition-base;


// Forms
$form-prefix-cls:                 $css-prefix + "form";

$cursor-disabled:                not-allowed !important;

$input-prefix-cls:               $css-prefix + "input";

$input-icon-color:                $gray-light-25;
$input-bg-disabled:               $gray-light-4;
$input-border-color:              $gray-light-15;
$input-border-disabled:           $gray-light-9;
$input-color-placeholder:         $gray-light-25;


$input-padding-x:                12px;
$input-padding-y:                10px;
$input-line-height:              1.4;

$input-bg:                       $white;


$input-color:                    $body-color;
$input-btn-border-width:         $border-width; // For form controls and buttons
$input-box-shadow:               inset 0 1px 1px rgba($black,.075);

$input-bg-focus:                 $input-bg;
$input-border-focus:             $brand-primary;
$input-border-focus-neutrals:    $gray-light-45;
$input-border-hover:             $brand-primary;
$input-border-hover-neutrals:    $gray-light-45;
$input-box-shadow-focus:         0 0 0 1px rgba($brand-primary, 1);
$input-box-shadow-focus-neutrals:0 0 0 1px $gray-light-9;
$input-color-focus:              $input-color;


$input-padding-x-sm:             8px;
$input-padding-y-sm:             7px;

$input-padding-x-lg:             12px;
$input-padding-y-lg:             13px;


$input-font-size:             $font-size-sm;
$input-font-size-lg:          $font-size-base;
$input-font-size-sm:          $font-size-xs;

$input-icon-font-size:             $font-size-sm;
$input-icon-font-size-lg:          $font-size-base;
$input-icon-font-size-sm:          $font-size-xs;

$input-icon-width:             30px;
$input-icon-width-lg:          32px;
$input-icon-width-sm:          28px;

$input-height:                   32px;
$input-height-lg:                40px;
$input-height-sm:                24px;


$input-transition:               border-color ease-in-out .15s, box-shadow ease-in-out .15s;

$form-text-margin-top:     4px;
$form-feedback-margin-top: $form-text-margin-top;

$form-check-margin-bottom:  8px;
$form-check-input-gutter:   20px;
$form-check-input-margin-y: 4px;
$form-check-input-margin-x: 4px;

$form-check-inline-margin-x: 12px;

$form-group-margin-bottom:       24px;
$form-group-label-font-size:     14px;
$form-group-label-font-size-sm:     12px;
$form-group-label-font-size-lg:     16px;
$form-inline-group-gutter:          10px;
$form-inline-group-label-gutter:    5px;

$input-group-addon-bg:           $gray-light-4;
$input-group-addon-border-color: $input-border-color;
$input-group-addon-focus-border-color: $brand-primary;
$input-group-addon-color:         $input-icon-color;


// Form validation icons
$form-icon-success-color: $brand-success;

$form-icon-warning-color: $brand-warning;

$form-icon-danger-color: $brand-danger;


// Dropdowns
//
// Dropdown menu container and contents.
$dropdown-prefix-cls:            $css-prefix + "dropdown";

$dropdown-item-min-width:        64px;
$dropdown-padding-y:             0;
$dropdown-margin-top:            6px;
$dropdown-bg:                    $white;
$dropdown-border-color:          transparent;
$dropdown-border-width:          $border-width;
$dropdown-divider-bg:            $divider-bg;
$dropdown-box-shadow:            0 2px 10px 0 rgba($black,.08);

$dropdown-link-color:            $body-color;
$dropdown-link-check-icon-color: $brand-primary;
$dropdown-link-hover-color:      $body-color;
$dropdown-link-hover-bg:         $list-hover-bg;

$dropdown-link-active-color:     $component-active-color;
$dropdown-link-active-bg:        $component-active-bg;

$dropdown-link-disabled-color:   $gray-light-45;

$dropdown-item-padding-x:        10px;
$dropdown-item-padding-y:        10px;

$dropdown-group-title-padding-y:   8px;
$dropdown-group-title-font-size:   $font-size-xs;
$dropdown-group-title-color:       $gray-light-25;

$dropdown-header-color:          $gray-light-45;

//list
//
$list-prefix-cls:                 $css-prefix + "list";
$lsit-padding-y:                  0;
$lsit-bg:                         $white;
$lsit-border-width:               $border-width;
$lsit-border-color:               transparent;
$list-box-shadow:                 0 2px 10px 0 rgba($black,.08);
$list-group-item-title-padding-y: 8px;
$list-group-item-title-font-size: $font-size-xs;
$list-group-item-title-color:     $gray-light-25;
$list-item-hover-color:           $body-color;
$list-item-padding-x:             12px;
$list-item-padding-y:             8px;
$list-item-min-width:             64px;
$list-item-color:                 $body-color;
$list-item-disabled-color:        $gray-light-45;
$list-item-checked-bg:            $gray-light-4;
$list-item-height:                32px;

//select
//
$select-prefix-cls:                 $css-prefix + "select";

$select-selection-icon-font-size:     14px;
$select-sm-selection-icon-font-size:  12px;
$select-lg-selection-icon-font-size:  16px;

$select-clear-icon-font-size:     14px;
$select-sm-clear-icon-font-size:  12px;
$select-lg-clear-icon-font-size:  16px;

$select-selection-icon-spacer:    4px;
$select-padding-x:                6px;
$select-padding-x-lg:             12px;



// Navs for tabs
$nav-prefix-cls:                 $css-prefix + "nav";

$nav-item-margin:               4px;
$nav-item-inline-spacer:        16px;
$nav-link-padding-x:            16px;

$nav-item-margin:               .2rem;
$nav-item-inline-spacer:        1rem;
$nav-link-padding-x:            1rem;
$nav-link-padding-y:            0;
$nav-link-hover-bg:             $gray-light-25;
$nav-link-disabled-color:       $gray-light-45;

$nav-tabs-height:                             60px;
$nav-tabs-sm-height:                          40px;
$nav-tabs-link-color:                         $body-color;
$nav-tabs-link-hover-color:                   $link-color;
$nav-tabs-link-active-color:                  $link-color;
$nav-tabs-link-border-width:                  2px;
$nav-tabs-link-active-border-color:           $brand-primary;
$nav-tabs-close-color:                        $gray-light-45;
$nav-tabs-close-hover-color:                  $body-color;

$nav-pills-height:                             60px;
$nav-pills-sm-height:                          50px;
$nav-pills-bg:                                 $gray-light-2;
$nav-pills-link-color:                         $body-color;
$nav-pills-link-hover-color:                   $link-color;
$nav-pills-link-active-color:                  $body-color;
$nav-pills-link-active-bg:                     $body-bg;
$nav-pills-separate-line-color:                $gray-light-9;
$nav-pills-text-cutoff-mask-width:             50px;
$nav-pills-close-color:                        $gray-light-45;
$nav-pills-close-hover-color:                  $body-color;

// Navs for tabs
// $nav-prefix-cls:                 $css-prefix + "nav";

// $nav-item-margin:               .2rem;
// $nav-item-inline-spacer:        1rem;
// $nav-link-padding-x:            1rem;
// $nav-link-padding-y:            0;
// $nav-link-hover-bg:             $gray-lighter;
// $nav-link-disabled-color:       $gray;

// $nav-tabs-height:                             60px;
// $nav-tabs-sm-height:                          40px;
// $nav-tabs-link-color:                         $body-color;
// $nav-tabs-link-hover-color:                   $link-color;
// $nav-tabs-link-active-color:                  $link-color;
// $nav-tabs-link-border-width:                  2px;
// $nav-tabs-link-active-border-color:           $brand-primary;
// $nav-tabs-close-color:                        $gray;
// $nav-tabs-close-hover-color:                  $body-color;

// $nav-pills-height:                             60px;
// $nav-pills-sm-height:                          50px;
// $nav-pills-bg:                                 $gray-lightest-5;
// $nav-pills-link-color:                         $body-color;
// $nav-pills-link-hover-color:                   $link-color;
// $nav-pills-link-active-color:                  $body-color;
// $nav-pills-link-active-bg:                     $body-bg;
// $nav-pills-separate-line-color:                $gray-lightest-18;
// $nav-pills-text-cutoff-mask-width:             50px;
// $nav-pills-close-color:                        $gray;
// $nav-pills-close-hover-color:                  $body-color;

// Navbar
$navbar-prefix-cls:                 $css-prefix + "navbar";

$navbar-padding-x:                  $spacer;
$navbar-padding-y:                  ($spacer / 2);

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $navbar-brand-font-size * $line-height-base;
$navbar-brand-height:               ($font-size-base * $line-height-base + $nav-link-padding-y * 2);
$navbar-brand-padding-y:            ($navbar-brand-height - $nav-link-height) / 2;

$navbar-toggler-padding-x:           12px;
$navbar-toggler-padding-y:           4px;
$navbar-toggler-font-size:           $font-size-lg;
$navbar-toggler-border-radius:       $border-radius;

$navbar-inverse-color:                 rgba($white,.5);
$navbar-inverse-hover-color:           rgba($white,.75);
$navbar-inverse-active-color:          rgba($white,1);
$navbar-inverse-disabled-color:        rgba($white,.25);
$navbar-inverse-toggler-border:        rgba($white,.1);

$navbar-light-color:                rgba($black,.5);
$navbar-light-hover-color:          rgba($black,.7);
$navbar-light-active-color:         rgba($black,.9);
$navbar-light-disabled-color:       rgba($black,.3);
$navbar-light-toggler-border:       rgba($black,.1);


// tabs
$tabs-prefix-cls:                  $css-prefix + "tabs";
$tabs-vertical-nav-tabs-height:     40px;
$tabs-vertical-sm-nav-tabs-height:  32px;

// Pagination
$pagination-prefix-cls:             $css-prefix + "pagination";

$pagination-font-size:               $font-size-xs;
$pagination-font-size-lg:            $font-size-sm;
$pagination-font-size-sm:            $font-size-xs;

$pagination-space:                  8px;
$pagination-space-lg:               8px;
$pagination-space-sm:               8px;

$pagination-width:                    32px;
$pagination-height:                   32px;

$pagination-width-lg:                 40px;
$pagination-height-lg:                40px;

$pagination-width-sm:                 24px;
$pagination-height-sm:                24px;

$pagination-input-width:              48px;

$pagination-icon-font-size:           20px;
$pagination-icon-font-size-lg:        24px;
$pagination-icon-font-size-sm:        16px;

$pagination-color:                     $body-color;
$pagination-bg:                        $white;
$pagination-border-width:              $border-width;
$pagination-border-color:              $gray-light-15;

$pagination-hover-color:               $brand-primary;
$pagination-hover-bg:                  $white;
$pagination-hover-border:              $brand-primary;

$pagination-active-color:              $brand-primary;
$pagination-active-bg:                 $white;
$pagination-active-border:             $brand-primary;

$pagination-disabled-color:            $gray-light-25;
$pagination-disabled-bg:               $white;
$pagination-disabled-border:           $gray-light-15;


// Form states and alerts
//
// Define colors for form feedback states and, by default, alerts.

$state-success-text:             #64B138;
$state-success-bg:               rgba($brand-success,.1);
$state-success-border:           darken($state-success-bg, 5%);

$state-info-text:                #15A6CE;
$state-info-bg:                  rgba($brand-info,.1);
$state-info-border:              darken($state-info-bg, 7%);

$state-warning-text:             #D7B028;
$state-warning-bg:               rgba($brand-warning,.1);
$mark-bg:                        $state-warning-bg;
$state-warning-border:           darken($state-warning-bg, 5%);

$state-danger-text:              #D12645;
$state-danger-bg:                rgba($brand-danger,.1);
$state-danger-border:            darken($state-danger-bg, 5%);


// Cards
$card-prefix-cls:          $css-prefix + "card";

$card-spacer-x:            20px;
$card-spacer-y:            20px;
$card-border-width:        1px;
$card-border-radius:       $border-radius;
$card-border-color:        $gray-light-9;
$card-border-radius-inner: $card-border-radius - $card-border-width;
$card-cap-bg:              $gray-light-2;
$card-bg:                  $white;

$card-link-hover-color:    $white;

$card-img-overlay-padding: 20px;

$card-deck-margin:          ($grid-gutter-width-base / 2);

$card-columns-count:        3;
$card-columns-gap:          20px;
$card-columns-margin:       $card-spacer-y;


$card-header-color:         $gray-light-85;
$card-header-font-size:     $font-size-sm;

$card-title-font-size:      $font-size-lg;
$card-title-spacer-y:       6px;
$cart-text-color:           $gray-light-45;
$cart-text-font-size:       $font-size-sm;

$card-footer-font-size:     $font-size-sm;
$card-footer-spacer-x:      10px;
$card-footer-spacer-y:      10px;

$card-header-spacer-y:       20px;
$card-header-pills-link-bg:  $gray-light-4;
$card-header-pills-link-height: 32px;
$card-header-pills-link-color:          $body-color;
$card-header-pills-link-active-color:   $white;
$card-header-pills-link-disabled-color: $gray-light-25;
$card-header-pills-link-font-size:      $font-size-xs;
$card-header-pills-item-gutter-x:       5px;


// Tooltips
$tooltip-prefix-cls:          $css-prefix + "tooltip";

$tooltip-max-width:           200px;
$tooltip-color:               $white;
$tooltip-bg:                  rgba($black,.7);
// $tooltip-padding-y:           8px;
$tooltip-padding-y: 6px;
$tooltip-padding-x:           12px;
// $tooltip-margin:              3px;
$tooltip-margin: 4px;

// $tooltip-arrow-width:         5px;
$tooltip-arrow-width: 4px;
$tooltip-arrow-color:         $tooltip-bg;
$tooltip-distance:            $tooltip-arrow-width + $tooltip-margin;


// Popovers
$popover-prefix-cls:                  $css-prefix + "popover";

$popover-bg:                          $white;
$popover-color:                       $body-color;
$popover-min-width:                   150px;
$popover-max-width:                   300px;
$popover-border-width:                $border-width;
$popover-border-color:                $gray-light-9;
// $popover-box-shadow:                  0 10px 40px rgba(0,0,0,.12);
$popover-box-shadow:  0 0 8px 0 rgba(0, 0, 0, .15);

$popover-arrow-width:                 10px;
$popover-arrow-color:                 $popover-bg;
// $popover-arrow-outer-width:           $popover-arrow-width + 1;
$popover-arrow-outer-width: 7px;
$popover-arrow-outer-color:           $popover-border-color;

// $popover-content-padding-x:           14px;
// $popover-content-padding-y:           14px;
$popover-content-padding-x: 10px;
$popover-content-padding-y: 10px;

$popover-title-height:                32px;
$popover-title-bg:                    $white;
$popover-title-font-size:             $font-size-xs;
$popover-title-padding-x:             10px;
$popover-title-padding-y:             6px;

$popover-body-font-size:              $font-size-xs;



// Badges
$badge-prefix-cls:           $css-prefix + "badge";

$badge-default-bg:            $gray-light-45;
$badge-color:                 $white;
$badge-link-hover-color:      $white;
$badge-font-size:             $font-size-xs;
$badge-font-weight:           normal;
$badge-height:                20px;
$badge-padding-x:             6px;

//$badge-pill-padding-x:        .6em;
//$badge-pill-border-radius:    10rem;

$badge-dot-height:          8px;
$badge-dot-width:           8px;


// Tag
$tag-prefix-cls:                  $css-prefix + "tag";

$tag-color:                      $gray-light-65;
$tag-bg:                         $gray-light-4;
$tag-border:               1px solid $gray-light-9;
$tag-height:                      20px;
$tag-margin-x:                    4px;
$tag-margin-y:                    2px;
$tag-padding-x:                   8px;
$tag-title-font-size:             $font-size-xs;
$tag-title-close-font-size:       $font-size-sm;

$tag-text-padding-x:               10px;

$tag-pill-border-radius:           $tag-height;

$tag-status-height:                22px;
$tag-status-bg:                    $default-bg;
$tag-status-title-font-size:       $font-size-sm;
$tag-status-title-font-color:      $disabled-bg;
$tag-status-padding:               12px;
$tag-status-prefix-icon-spacer-x:  6px;
$tag-status-prefix-icon-width:     $tag-title-font-size / 2;
$tag-status-prefix-icon-height:    $tag-title-font-size / 2;
$tag-status-prefix-icon-box-shadow:0 2px 5px rgba($gray-light-45,.2);


// Modals

// Padding applied to the modal body
$modal-prefix-cls:            $css-prefix + "modal";

$modal-inner-padding:         30px;
$modal-inner-padding-x:       20px;
$modal-inner-padding-y:       30px;
$modal-dialog-margin:         30px;
$modal-dialog-sm-up-margin-y: 30px;
$modal-title-line-height:     $line-height-base;
$modal-title-font-size:       $font-size-base;
$modal-close-size:            $font-size-lg;
$modal-content-bg:               $white;
$modal-content-border-color:     rgba($black,.2);
$modal-content-border-width:     $border-width;
$modal-content-xs-box-shadow:    0 2px 10px 0 rgba($black,.1);
$modal-content-sm-up-box-shadow: 0 2px 10px 0 rgba($black,.1);
$modal-backdrop-bg:           $black;
$modal-backdrop-opacity:      .6;
$modal-header-border-color:   $gray-light-25;
$modal-footer-border-color:   $modal-header-border-color;
$modal-footer-padding-x:      20px;
$modal-footer-padding-y:      10px;
$modal-confirm-footer-padding-x:      20px;
$modal-confirm-footer-padding-y:      30px;
$modal-confirm-footer-height:         62px;
$modal-footer-height:         50px;
$modal-footer-border-width:   $modal-content-border-width;
$modal-header-border-width:   $modal-content-border-width;
$modal-header-padding-x:      20px;
$modal-header-padding-y:      13px;
$modal-header-bg:             $brand-primary;
$modal-header-height:         50px;
$modal-lg:                    800px;
$modal-md:                    500px;
$modal-sm:                    300px;
$modal-transition:            transform .3s ease-out;


// Alerts
//
// Define alert colors, border radius, and padding.

$alert-prefix-cls:            $css-prefix + "alert";

$alert-padding-x:             24px;
$alert-padding-y:             9px;
$alert-with-desc-padding-y:   16px;
$alert-margin-bottom:         20px;
$alert-border-radius:         $border-radius;
$alert-border-width:          $border-width;
$alert-text-color:            $gray-light-65;
$alert-font-size:             $font-size-sm;
$alert-line-height:           22px;

$alert-content-margin-x:      10px;

$alert-desc-font-size:        16px;
$alert-desc-padding-y:        4px;

$alert-icon-font-size:        24px;
$alert-close-icon-font-size:  20px;
$alert-close-icon-cursor:     pointer;

//第一个参数为背景色，第二个参数为边框色
$alert-style-panel: (
        'success': rgba(119,208,66,0.1),
        'warning': rgba(250,173,20, 0.1),
        'danger': rgba(245,34,45, 0.1),
        'info': rgba(11,105,255, 0.1),
);

// Progress bars
$progress-prefix-cls:           $css-prefix + "progress";

$progress-height:               8px;
$progress-font-size:            12px;
$progress-icon-font-size:       14px;
$progress-bg:                   $gray-light-4;
$progress-border-radius:        $progress-height;
$progress-box-shadow:           inset 0 2px 2px rgba($black,.1);
$progress-bar-color:            $white;
$progress-bar-bg:               $brand-primary;
$progress-bar-animation-timing: 1s linear infinite;
$progress-height-sm:            6px;
$progress-font-size-sm:         $font-size-xs;
$progress-icon-font-size-sm:    12px;


$progress-circle-bg-color:           $gray-light-4;

$progress-circle-svg-width:          100px;
$progress-circle-svg-height:         100px;
$progress-circle-border-width:       4px;
$progress-circle-text-font-size:     $font-size-base;
$progress-circle-icon-font-size:     20px;
$progress-circle-percent-font-size:  16px;
$progress-circle-radius:             $progress-circle-svg-width / 2 - $progress-circle-border-width;
$progress-circle-perimeter:          3.1415926 * (2 * $progress-circle-radius);

$progress-circle-svg-width-sm:          60px;
$progress-circle-svg-height-sm:         60px;
$progress-circle-border-width-sm:       3px;
$progress-circle-text-font-size-sm:     $font-size-base;
$progress-circle-icon-font-size-sm:     20px;
$progress-circle-percent-font-size-sm:  $font-size-xs;
$progress-circle-radius-sm:             $progress-circle-svg-width-sm / 2 - $progress-circle-border-width-sm;
$progress-circle-perimeter-sm:          3.1415926 * (2 * $progress-circle-radius-sm);


// List group
$list-group-prefix-cls:          $css-prefix + "list-group";

$list-group-color:               $body-color;
$list-group-bg:                  $white;
$list-group-border-color:        $gray-light-9;
$list-group-border-width:        $border-width;
$list-group-border-radius:       $border-radius;
$list-group-font-size:           $font-size-sm;

$list-group-item-padding-x:      20px;
$list-group-item-padding-y:      14px;

$list-group-hover-bg:            $list-hover-bg;
$list-group-active-color:        $component-active-color;
$list-group-active-border:       $gray-light-9;

$list-group-disabled-color:      $gray-light-25;
$list-group-disabled-bg:         $list-group-bg;

$list-group-link-color:          $body-color;
$list-group-link-hover-color:    $list-group-link-color;

$list-group-link-active-color:   $list-group-color;

$list-group-item-action-border-color:  rgba(#96B0B2,.2);



// Image thumbnails
$thumbnail-prefix-cls:          $css-prefix + "thumbnail";

$thumbnail-padding:           4px;
$thumbnail-bg:                $body-bg;
$thumbnail-border-width:      $border-width;
$thumbnail-border-color:      $gray-light-9;
$thumbnail-border-radius:     $border-radius;
$thumbnail-box-shadow:        0 1px 2px rgba($black,.075);
$thumbnail-transition:        all .2s ease-in-out;


// Figures

$figure-caption-font-size: 90%;
$figure-caption-color:     $gray-light-45;


// Breadcrumbs

$breadcrumb-prefix-cls:              $css-prefix + "breadcrumb";

$breadcrumb-padding-y:          12px;
$breadcrumb-padding-x:          16px;
$breadcrumb-item-padding:       4px;
$breadcrumb-font-size:           $font-size-sm;
$breadcrumb-text-color:          $body-color;

$breadcrumb-bg:                 $body-bg;
$breadcrumb-divider-color:      $gray-light-25;
$breadcrumb-active-color:       $brand-primary;
$breadcrumb-hover-color:        $brand-primary;
$breadcrumb-divider:            "/";
$breadcrumb-icon-text-spacer:   4px;


// Carousel
$carousel-prefix-cls:                         $css-prefix + "carousel";

$carousel-control-color:                      $white;
$carousel-control-width:                      10%;
$carousel-control-opacity:                    .5;

$carousel-indicator-width:                    14px;
$carousel-indicator-height:                   3px;
$carousel-indicator-spacer:                   4px;
$carousel-indicator-active-width:             22px;
$carousel-indicator-active-height:            3px;
$carousel-indicator-active-bg:                $white;
$carousel-indicator-border-radius:            4px;

$carousel-caption-width:                      80%;
$carousel-caption-color:                      $white;

$carousel-control-icon-width:                 48px;

$carousel-caption-spacer-y:                    10px;
$carousel-title-font-size:                     30px;
$carousel-description-font-size:               16px;


// Close
$close-prefix-cls:            $css-prefix + "close";

$close-font-size:             $font-size-base * 1.5;
$close-font-weight:           $font-weight-bold;
$close-color:                 $black;
$close-text-shadow:           0 1px 0 $white;

// Code
$code-prefix-cls:            $css-prefix + "code";

$code-font-size:              90%;
$code-padding-x:              7px;
$code-padding-y:              4px;
$code-color:                  #bd4147;
$code-bg:                     $gray-light-15;

$kbd-color:                   $white;
$kbd-bg:                      $body-color;

$pre-color:                   $body-color;
$pre-scrollable-max-height:   340px;


// Switch
$switch-prefix-cls:           $css-prefix + "switch";

$switch-font-size:            $font-size-base;
$switch-lg-font-size:         $font-size-base + 6px;
$switch-sm-font-size:         $font-size-sm;
$switch-xs-font-size:         $font-size-xs;

$switch-color:                $gray-light-15;

$switch-height:               32px;
$switch-xs-height:            20px;
$switch-sm-height:            24px;
$switch-lg-height:            40px;

$switch-width:                54px;
$switch-xs-width:             30px;
$switch-sm-width:             40px;
$switch-lg-width:             68px;

$switch-cursor:               pointer;
$switch-disabled-bg:          mix(rgba(255,255,255,.45),$gray-light-15,50);
$switch-bg:                   $gray-light-15;
$switch-transition:           $transition-base;

$switch-border-radius:        $border-radius;
$switch-round-border-radius:  20px;

$switch-border-color:         transparent;
$switch-border-size:          1px;
$switch-border-style:         solid;

$switch-checked-color:        $white;
$switch-checked-bg:           $brand-primary;
$switch-checked-border:       inherit;

$switch-inner-color:          $white;

$switch-inner-padding-x:      10px;
$switch-lg-inner-padding-x:   12px;
$switch-sm-inner-padding-x:   5px;
$switch-xs-inner-padding-x:   5px;

$switch-inner-font-size:      ($switch-font-size *.75);
$switch-inner-margin-left:    24px;
$switch-inner-margin-right:   6px;

$switch-toggle-space:         3px;
$switch-toggle-space-sm:      2px;

$switch-toggle-width:         26px;
$switch-lg-toggle-width:      34px;
$switch-sm-toggle-width:      20px;
$switch-xs-toggle-width:      16px;

$switch-toggle-height:        26px;
$switch-lg-toggle-height:     34px;
$switch-sm-toggle-height:     20px;
$switch-xs-toggle-height:     16px;

$switch-checked-toggle-left:          calc(100% - #{$switch-toggle-width} - #{$switch-toggle-space});
$switch-lg-checked-toggle-left:       calc(100% - #{$switch-lg-toggle-width} - #{$switch-toggle-space});
$switch-sm-checked-toggle-left:       calc(100% - #{$switch-sm-toggle-width} - #{$switch-toggle-space-sm});
$switch-xs-checked-toggle-left:       calc(100% - #{$switch-xs-toggle-width} - #{$switch-toggle-space-sm});
$switch-checked-disabled-bg:          mix(rgb(255,255,255),$brand-primary,45);

$switch-toggle-radius:        3px;
$switch-round-toggle-radius: 18px;

$switch-toggle-bg:            $white;
$switch-toggle-text-space:     10px;

$switch-round-width:                50px;
$switch-round-sm-width:             38px;
$switch-round-xs-width:             30px;


// Slider
$slider-prefix-cls:                   $css-prefix + "slider";

$slider-lg-height:                    8px;
$slider-height:                       6px;
$slider-sm-height:                    3px;

$slider-bg:                           $gray-light-15;
$slider-cursor:                       pointer;
$slider-border-radius:                6px;
$slider-transition:                   background-color $animation-time ease;

$slider-track-bg:                       $brand-primary;

$slider-rail-bg:                        $brand-primary;

$slider-handle-border-color:            $brand-primary;

$slider-handle-size:                    8px;
$slider-lg-handle-size:                 12px;
$slider-sm-handle-size:                 5px;

$slider-handle-margin-l:               -7px;

$slider-handle-border-width:           3px;
$slider-lg-handle-border-width:           4px;
$slider-sm-handle-border-width:           3px;

$slider-handle-bg:                     $white;
$slider-handle-box-shadow:             0 4px 8px 0 rgba(0,0,0,0.06);
$slider-handle-transition:              all .3s linear;

$slider-mark-font-size:               $font-size-xs;
$slider-sm-mark-font-size:            $font-size-xs - 3;

$slider-stop-scale-height:            8px;
$slider-stop-scale-margin-top:        10px;

// Checkbox
$checkbox-prefix-cls:      $css-prefix + "form-checkbox";

$checkbox-size:            16px;
$checkbox-sm-size:         12px;
$checkbox-lg-size:         18px;

$checkbox-cursor:          pointer;
$checkbox-padding:         0 0 0 ($checkbox-size + 8);

$checkbox-iconfont-size:      13px;
$checkbox-font-size:          $font-size-sm;
$checkbox-lg-font-size:       $font-size-base;
$checkbox-sm-font-size:       $font-size-xs;

$checkbox-padding-l:          3px;
$checkbox-lg-padding-l:       4px;
$checkbox-sm-padding-l:       2px;


$checkbox-bg:                $white;
$checkbox-disabled-bg:      $gray-light-4;
$checkbox-disabled-border:        $gray-light-9;

$checkbox-border-color:           $input-border-color;
$checkbox-hover-border-color:     $brand-primary;
$checkbox-border-radius:          2px;

$checkbox-checked-color:         $white;
$checkbox-checked-bg:            $brand-primary;
$checkbox-checked-disabled-bg:   $gray-light-15;
$checkbox-checked-disabled-border:   transparent;

$checkbox-group-inline-space:   32px;

$checkbox-btn-checked-bg-size:      22px;
$checkbox-btn-checked-bg-color:     $brand-primary;
$checkbox-btn-checked-border-color: $brand-primary;
$checkbox-btn-checked-icon-font-size:$font-size-xs;
$checkbox-btn-padding:              $input-padding-x;
$checkbox-btn-padding-lg:           $input-padding-x-lg;
$checkbox-btn-padding-sm:           $input-padding-x-sm;

$checkbox-group-space:   10px;
$checkbox-group-space-lg:12px;
$checkbox-group-space-sm:8px;


// Radio
$radio-prefix-cls:            $css-prefix + "form-radio";
$radio-group-prefix-cls:      $css-prefix + "radio-group";

$radio-size:           16px;
$radio-sm-size:        14px;
$radio-lg-size:        20px;

$radio-cursor:          pointer;

$radio-font-size:          $font-size-sm;
$radio-lg-font-size:       $font-size-base;
$radio-sm-font-size:       $font-size-xs;

$radio-padding-l:          8px;
$radio-lg-padding-l:       11px;
$radio-sm-padding-l:       8px;

$radio-bg:               $white;
$radio-disabled-bg:      $gray-light-4 !important;

$radio-disabled-border:        $gray-light-9 !important;
$radio-border-color:           $input-border-color;
$radio-hover-border-color:     $brand-primary;
$radio-border-radius:          50%;

$radio-checked-color:         $white;
$radio-checked-bg:            $brand-primary;
$radio-checked-disabled-bg:   $gray-light-45!important;

$radio-group-inline-space:   32px;

// Input-number
$input-number-prefix-cls: $css-prefix + "form-input-number";

$input-number-width:      100px;
$input-number-height:     $input-height;
$input-number-font-size:  $input-font-size;
$input-number-color:           $body-color;
$input-number-control-bg:      $gray-light-4;
$input-number-control-width:   24px;

$input-lg-number-width:      100px;
$input-lg-number-height:     $input-height-lg;
$input-lg-number-font-size:  $input-font-size-lg;

$input-sm-number-width:      100px;
$input-sm-number-height:     $input-height-sm;
$input-sm-number-font-size:  $input-font-size-sm;

// Rate
//$rate-size:    1.375rem 0.875rem;//star-size text-size
//$rate-sm-size:    1rem 0.75rem;
//$rate-star-color:   $gray-light-15;
//$rate-text-color:   $gray-light-45;
//$rate-active-color:   $brand-warning;
//$rate-star-spacing: 2px;

// Steps
$steps-prefix-cls:             $css-prefix + "steps";

$steps-tail-bg:                $gray-light-9;
$steps-tail-size:              1px;

$steps-horizontal-item-space:  16px;

$steps-horizontal-item-width:  140px;

$steps-vertical-item-space:    8px;

$steps-main-bg:                transparent;

$steps-head-border-width:      1px;
$steps-head-border-color:      $gray-light-15;
$steps-head-color:             $gray-light-25;
$steps-head-size:              36px;
$steps-head-font-size:         $font-size-base;

$steps-main-title-color:       $gray-light-45;
$steps-main-title-font-size:   $font-size-base;
$steps-main-description-font-size: $font-size-sm;

$steps-finish-head-border-color:$brand-primary;
$steps-finish-head-icon-color:  $brand-primary;
$steps-finish-tail-size:        1px;
$steps-finish-tail-bg:          $brand-primary;
$steps-finish-title-color:      $gray-light-65;
$steps-finish-description-color: $gray-light-45;

$steps-process-head-border-color:transparent;
$steps-process-head-bg:         $brand-primary;
$steps-process-head-icon-color: $white;
$steps-process-title-color:     $gray-light-85;
$steps-process-description-color: $gray-light-65;

$steps-wait-head-border-color:  $gray-light-15;
$steps-wait-head-icon-color:    $gray-light-25;
$steps-wait-title-color:        $gray-light-45;
$steps-wait-description-color:  $gray-light-45;

$steps-error-head-border-color:  $brand-danger;
$steps-error-head-icon-color:    $brand-danger;
$steps-error-title-color:        $brand-danger;
$steps-error-description-color:  $brand-danger;

$steps-sm-head-size:           24px;
$steps-sm-main-title-font-size:$font-size-sm;

$step-label-vertical-head-size:    10px;
$steps-label-vertical-item-space:  2px;
$steps-label-vertica-tail-size:    2px;

// skeleton
$skeleton-prefix-cls : $css-prefix + "skeleton";


// Date-picker
$date-pick-prefix-cls:                $css-prefix + "date-pick";

$date-panel-width:                    284px;
$date-panel-height:                   312px;
$datePicker-weekDays-font-size:       $font-size-xs;

$datePicker-padding-x:                14px;
$datePicker-padding-y:                12px;

$datePicker-footer-padding:           8px;

$datePicker-date-spacer:              7px 8px;
$datePicker-date-width:               24px;
$datePicker-date-height:              24px;
// $datePicker-date-width:    22px;
// $datePicker-date-height:    22px;

$datePicker-date-font-size:           $font-size-xs;
// $datePicker-date-border-radius:       50%;
$datePicker-date-border-radius:    4px;

$datePicker-header-color:            $white;
$datePicker-header-font-size:        $font-size-sm;
$datePicker-header-height:           48px;

$datePicker-other-panel-width:          $date-panel-width + $border-width;
$datePicker-other-panel-date-padding:   0;
$datePicker-other-panel-date-width:     40px;
$datePicker-other-panel-date-border-radius:  $datePicker-date-height;

$time-spinner-height:                190px;
$time-spinner-time-border-radius:    50%;

// Upload
$upload-prefix-cls:                   $css-prefix + "upload";

$upload-picture-card-width:           96px;
$upload-picture-card-height:          96px;
$upload-list-picture-thumbnail-width: 48px;
$upload-list-picture-thumbnail-height:48px;
$upload-item-space:                   8px;
$upload-item-icon-size:               14px;

// Upload
$upload-head-prefix-cls:              $css-prefix + "upload-head";

// Timeline
$timeline-prefix-cls:  $css-prefix + "timeline";

$timeline-font-size:   $font-size-base;
$timeline-color:        $body-color;


$timeline-item-icon-width:  10px;
$timeline-item-icon-border:  2px solid $brand-primary;
$timeline-item-icon-border-radius:  50%;

$timeline-item-space-left:  10px;

$timeline-item-tail-color:   $divider-bg;
$timeline-item-tail-space-left:   ($timeline-item-icon-width/2);

$timeline-item-time-width:     60px;

$timeline-item-content-padding-top:     0px;
$timeline-item-content-padding-right:     1px;
$timeline-item-content-padding-bottom:     0px;
$timeline-item-content-padding-left:     22px;

$timeline-horizontal-space-left:      ($timeline-item-time-width + $timeline-item-content-padding-left - $timeline-item-icon-width) ;
$timeline-horizontal-time-align:    right;

// Editor
//$editor-color:  $body-color;
//$editor-border: 1px solid $input-border-color;
//$editor-border-radius: 4px 4px 0 0;
//
//$editor-toolbar-padding-x:      20px;
//$editor-toolbar-padding-y:      18px;
//$editor-toolbar-icon-font-size:     20px;
//$editor-toolbar-icon-color:     $gray-light-45;
//$editor-toolbar-icon-hover-active-color: $brand-primary;
//$editor-toolbar-icon-width:             $editor-toolbar-icon-font-size;
//$editor-toolbar-icon-height:             $editor-toolbar-icon-font-size;
//$editor-toolbar-icon-group-space-x:    24px;
//$editor-toolbar-icon-space-x:    10px;
//$editor-toolbar-icon-space-y:    10px;

// Calendar
$full-calendar-header-title:          $font-size-lg;
$full-calendar-border-color:          $gray-light-9;



// Avastar
$avatar-prefix-cls:            $css-prefix + "avatar";

$avatar-height:            32px;
$avatar-width:             32px;
$avatar-text-color:        $brand-primary;
$avatar-dot-height:          8px;
$avatar-dot-width:           8px;
$avatar-text-font-size:    16px;
$avatar-height-large:         40px;
$avatar-width-large:          40px;
$avatar-text-font-size-large: 16px;



// Cascader
$cascader-prefix-cls:    $css-prefix + "cascader";

$cascader-min-width:      100px;
$cascader-margin-right:      10px;
$cascader-loading-color:      $brand-primary;

// Transfer
$transfer-prefix-cls:    $css-prefix + "transfer";

$transfer-spacer-x:  12px;
$transfer-spacer-y:  8px;
$transfer-header-padding-y: 5px;
$transfer-operation-spacer: 8px;


// new Cascader
$cascading-prefix-cls:          $css-prefix + "cascading";
$cascading-picker-prefix-cls:    $css-prefix + "cascading-picker";
$cascading-menus-prefix-cls:    $css-prefix + "cascading-menus";
$cascading-popver-content-prefix-cls:    $css-prefix + "cascading-popver-content";
$multiCascader-multil-content-prefix-cls:    $css-prefix + "cascading-multiCascader-multil-content";
$cascading-width: 300px;
$cascading-font-size-lg:  16px;
$cascading-font-size:  14px;
$cascading-font-size-sm:  12px;

// Transfer
$transfer-prefix-cls:    $css-prefix + "transfer";

$transfer-spacer-x:  12px;
$transfer-spacer-y:  8px;
$transfer-operation-spacer: 8px;


// Menu
$menu-prefix-cls:                $css-prefix + "menu";
$menu-bg:                        $white;
$submenu-bg:                     $white;
$menu-border-color:              $gray-light-9;

$menu-item-font-size:                 $font-size-sm;
$menu-item-icon-font-size:            $font-size-base;
$menu-horizontal-item-icon-font-size: $font-size-lg;
$menu-item-transition:                all .2s ease-in-out;
$menu-item-icon-space-x:              4px;
$menu-item-icon-collapse-space-x:     8px;
$menu-item-border:                    3px solid transparent;
$menu-item-group-color:               $gray-light-25;


$menu-item-color:                $body-color;
$menu-item-border-color:         transparent;

$menu-item-hover-color:    $brand-primary;
$menu-item-hover-bg:       transparent;

$menu-item-active-color:   $brand-primary;
$menu-item-active-bg:      $component-active-bg;
$menu-item-active-border-color:  $brand-primary;

$menu-light-horizontal-item-hover-bg:     transparent;
$menu-light-horizontal-item-active-bg:    transparent;
$menu-light-horizontal-item-hover-color:  $brand-primary;
$menu-light-horizontal-item-active-color:  $brand-primary;
$menu-light-active-submenu-color:  $brand-primary;

$menu-dark-bg:                 #191919;
$menu-dark-submenu-bg:         rgba(0,0,0,.18);
$menu-dark-active-submenu-color:  $brand-primary;
$menu-dark-item-color:         rgba($white,.65);
$menu-dark-border-color:       transparent;
$menu-dark-item-group-color:   rgba($white,.4);


$menu-dark-item-hover-color:   $white;
$menu-dark-item-hover-bg:      transparent;

$menu-dark-item-active-color:   $white;
$menu-dark-item-active-bg:      $brand-primary;
$menu-dark-item-active-border-color: $brand-primary;

$menu-ghost-bg:                 transparent;
$menu-ghost-submenu-bg:         transparent;
$menu-ghost-item-color:         $white;
$menu-ghost-border-color:       rgba($white,.15);
$menu-ghost-item-group-color:    rgba($white,.4);


$menu-ghost-item-hover-color:   $white;
$menu-ghost-item-hover-bg:      rgba($white,.15);

$menu-ghost-item-active-color:   $white;
$menu-ghost-item-active-bg:      rgba($white,.15);
$menu-ghost-item-active-border-color: $white;


$menu-horizontal-height:  60px;
$menu-horizontal-padding-x:  20px;

$menu-vertical-height:  40px;
$menu-vertical-padding-x:  20px;
$menu-vertical-padding-y:  0;

$menu-folded-vertical-height:        50px;
$menu-folded-item-icon-font-size: 24px;


// Tree
//---
$tree-prefix-cls:                $css-prefix + "tree";

$tree-node-height:                30px;
$tree-node-text-padding-y:        4px;
$tree-node-text-padding-x:        4px;
$tree-node-icon-size:             14px;
$tree-node-text-check-bg:         $list-hover-bg;
$tree-node-text-hover-bg:         $list-hover-bg;


// Notice
//---
$notice-prefix-cls:     $css-prefix + "notice";

$notice-width:                  335px;
$notice-spacer-right:           24px;
$notice-spacer-bottom:          10px;
$notice-padding-x:              16px;
$notice-padding-y:              12px 16px;

$notice-close-icon-color:       $gray-light-65;
$notice-close-icon-hover-color: $body-color;
$notice-close-icon-font-size:   $font-size-base;

$notice-title-font-size:        $font-size-base;
$notice-title-spacer-bottom:    6px;

$notice-desc-font-size:         14px;
$notice-desc-color:             $body-color;

$notice-icon-size:              24px;
$notice-icon-spacer-right:      10px;

// Message
//--
$message-prefix-cls:      $css-prefix + "message";
$message-height:          21px;
$message-font-size:       14px;
$message-top:             16px;
$message-content-padding-x:12px;
$message-content-padding-y:8px;
$message-content-bg-color: $white;
$message-icon-spacer-x:    10px;
$message-icon-font-size:   16px;

//Backtop
$backtop-prefix-cls:            $css-prefix + "back-top";

// slipbox
$slipbox-prefix-cls:       $css-prefix + "slipbox";
$slipbox-wraper-min-width: 350px;
$slipbox-wraper-max-width: 33.3%;
$slipbox-wraper-top:       60px;
$slipbox-header-height:    70px;
$slipbox-header-padding:   18px;
$slipbox-header-fontSize:  $slipbox-header-padding;
$slipbox-header-color:     $gray-darker;
$slipbox-header-border-color: $gray-light-9;


// navs
$navs-prefix-cls:                $css-prefix + "navs";
$navs-bg:                        $white;
$submenu-bg:                     $white;
$navs-border-color:              $gray-light-9;

$navs-item-font-size:                 $font-size-sm;
$navs-item-icon-font-size:            $font-size-base;
$navs-horizontal-item-icon-font-size: $font-size-lg;
$navs-item-transition:                all .2s ease-in-out;
$navs-item-icon-space-x:              4px;
$navs-item-icon-collapse-space-x:     8px;
$navs-item-border:                    2px solid transparent;
$navs-item-group-color:               $gray-light-25;


$navs-item-color:                $body-color;
$navs-item-border-color:         transparent;

$navs-item-hover-color:    $body-color;
$navs-item-hover-bg:       $list-hover-bg;

$navs-item-active-color:   $brand-primary;
$navs-item-active-bg:      transparent;
$navs-item-active-border-color:  $brand-primary;

$navs-light-horizontal-item-hover-bg:     transparent;
$navs-light-horizontal-item-active-bg:    transparent;
$navs-light-horizontal-item-hover-color:  $brand-primary;
$navs-light-horizontal-item-active-color:  $brand-primary;

$navs-dark-bg:                 #191919;
$navs-dark-submenu-bg:         rgba(0,0,0,.18);
$navs-dark-item-color:         rgba($white,.65);
$navs-dark-border-color:       transparent;
$navs-dark-item-group-color:   rgba($white,.4);


$navs-dark-item-hover-color:   rgba($white,.65);
$navs-dark-item-hover-bg:      rgba($brand-primary,.2);

$navs-dark-item-active-color:   $white;
$navs-dark-item-active-bg:      rgba($brand-primary,.3);
$navs-dark-item-active-border-color: $brand-primary;

$navs-ghost-bg:                 transparent;
$navs-ghost-submenu-bg:         transparent;
$navs-ghost-item-color:         $white;
$navs-ghost-border-color:       rgba($white,.15);
$navs-ghost-item-group-color:    rgba($white,.4);


$navs-ghost-item-hover-color:   $white;
$navs-ghost-item-hover-bg:      rgba($white,.15);

$navs-ghost-item-active-color:   $white;
$navs-ghost-item-active-bg:      rgba($white,.15);
$navs-ghost-item-active-border-color: rgba($white,.15);


$navs-horizontal-height:  40px;
$navs-horizontal-padding-x:  20px;

$navs-vertical-height:  40px;
$navs-vertical-padding-x:  20px;
$navs-vertical-padding-y:  0;

$navs-folded-vertical-height:        50px;
$navs-folded-item-icon-font-size: 24px;
$navs-pills-link-color:                         $body-color;
$navs-pills-link-hover-color:                   $link-color;
$navs-pills-link-active-color:                  $body-color;
$navs-pills-link-active-bg:                     $body-bg;
$navs-tabs-link-active-border-color:           $brand-primary;
$navs-pills-height:                             60px;
$navs-tabs-link-border-width:                  2px;
$navs-tabs-height:                             60px;
$navs-tabs-close-color:                        $gray-light-45;
$navs-tabs-close-hover-color:                  $body-color;
$navs-pills-separate-line-color:                $gray-light-9;
$navs-pills-text-cutoff-mask-width:             50px;
$navs-pills-close-color:                        $gray-light-45;
$navs-pills-close-hover-color:                  $body-color;
$navs-link-disabled-color:       $gray-light-45;
$navs-tabs-sm-height:                          40px;
$navs-pills-sm-height:                          50px;

/* NOTE: loading 组件 */
$loading-prefix-cls:    $css-prefix+"loading";

/* NOTE: time-picker 组件 */
$timePicker-prefix-cls:    $css-prefix + "time-picker";
$timePicker-width:         220px;


// anchor
$anchor-prefix-cls:         $css-prefix + "anchor";
$anchor-border-width:       2px;
$anchor-ink-border-color:   $gray-light-9;

// Collapse
$collapse-prefix-cls:            $css-prefix + "collapse";
$collapse-border-radius:         4px;
$collapse-border-color:          $gray-light-15;
$collapse-header-bg:             $gray-light-4;
$collapse-header-padding-x:      12px;
$collapse-header-padding-y:      9px;

// SelectTree
$select-tree-prefix-cls:         $css-prefix + "select-tree";

//scroll-bar
$scroll-bar-prefix-cls:          $css-prefix + "scroll-bar";

// color-picker
$color-picker-prefix-cls:          $css-prefix + "color-picker";

// empty
$empty-prefix-cls:          $css-prefix + "empty";
$empty-image-size:          120px;
$empty-image-size-sm:       60px;
$empty-image-size-lg:       200px;
$empty-desc-spacer:         12px;