@prefix : w-;

/* z-index
-------------------------- */
@z-index-normal: 1;
@z-index-affix: 10;
@z-index-top: 1000;
@z-index-popper: 2000;
/* Transition
-------------------------- */
@all-transition: all .3s cubic-bezier(.645,.045,.355,1);
@fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
@fade-linear-transition: opacity 200ms linear;
@md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
@color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) ;
@border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) ;
/* Typography
-------------------------- */
// 主标题文字
@font-size-extra-large: 20px;
// 标题文字
@font-size-large: 18px;
// 小标题
@font-size-medium: 16px;
// 正文
@font-size-base: 14px;
// 正文（小）
@font-size-small: 13px;
// 辅助文字
@font-size-auxiliary: 12px;
// regular|base
@font-weight-base: 400;
// medium
@font-weight-medium: 500;
// bold
@font-weight-bold: 700;
// fontLineHeight|1|Line Height|2
@font-line-height-primary: 24px;
/// fontLineHeight|1|Line Height|2
@font-line-height-secondary: 16px;
// disabled
@font-color-disabled-base: #bbb;

/* Color
-------------------------- */
@primary-color : #2055F4;
@success-color: #67C23A;
@warning-color: #F0A431;
@danger-color: #ED6363;
@info-color: #9DA3AC;

@primary-light-color: mix(@color-white, @primary-color, 80% );
@success-light-color: mix(@color-white, @success-color, 80% );
@warning-light-color: mix(@color-white, @warning-color, 80% );
@danger-light-color: mix(@color-white, @danger-color, 80% );
@info-light-color: mix(@color-white, @info-color, 80% );

@primary-lighter-color: mix(@color-white, @primary-color, 90% );
@success-lighter-color: mix(@color-white, @success-color, 90% );
@warning-lighter-color: mix(@color-white, @warning-color, 90% );
@danger-lighter-color: mix(@color-white, @danger-color, 90% );
@info-lighter-color: mix(@color-white, @info-color, 90% );

// Primary Text 正文文字
@primary-text-color: #272A31;
// Regular Text 常规状态文字
@regular-text-color: #5B606A;
// Secondary Text 次要文字
@secondary-text-color: #8A909A;
// Placeholder Text 占位文字
@placeholder-text-color: #9DA3AC;

// Border Base 一级边框
@border-base-color: #DDDFE6;
// Border Light 二级边框
@border-light-color: #E4E7ED;
// Border Lighter 三级边框
@border-lighter-color: #ECEEF5;
// Border Extralighter 四级边框
@border-extralighter-color: #F2F6FC;

// Background B 黑色背景
@color-black: #000000;
// Background W 白色背景
@color-white: #ffffff;
// Background 透明背景
@color-transparent: transparent;
// Background fill
@color-background-hover-fill: #F4F4F5;

// Box-shadow
@box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
// boxShadow|dark
@box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
/// boxShadow|light
@box-shadow-light: 0 4px 4px 0 rgba(0, 0, 0, 0.1);

@background-primary-light-1: mix(@color-white, @primary-color, 10%); //#3666f5
@background-primary-light-2: mix(@color-white, @primary-color, 20%); //#4d77f6
@background-primary-light-3: mix(@color-white, @primary-color, 30%); //#6388f7
@background-primary-light-4: mix(@color-white, @primary-color, 40%); //#7999f8
@background-primary-light-5: mix(@color-white, @primary-color, 50%); //#90aafa
@background-primary-light-6: mix(@color-white, @primary-color, 60%); //#a6bbfb
@background-primary-light-7: mix(@color-white, @primary-color, 70%); //#bcccfc
@background-primary-light-8: mix(@color-white, @primary-color, 80%); //#d2ddfd
@background-primary-light-9: mix(@color-white, @primary-color, 90%); //#e9eefe


// 禁用颜色
@disabled-font-color: #C0C4CC;
@disabled-background-color: #eceef5;
@disabled-border-color: #DDDFE7;
@disabled-placeholder-color: #BFC4CD;

// Background|input前置和后置标签
@background-color-base: #F6F7F9 ;

/* Border
-------------------------- */
@border-width-base: 1px;
@border-style-base: solid;
@border-color-hover: @placeholder-text-color;
@border-base: @border-width-base @border-style-base @border-base-color;

@border-radius-base: 2px;
@border-radius-round: 18px;
@border-radius-circle: 100%;
@border-radius-zero: 0;

/* Height
-------------------------- */
@height-base: 36px;
@height-medium: 28px;
@height-small: 24px;

/* Button
-------------------------- */
@button-background-color: @color-white;
@button-border-color: @border-base-color;
@button-font-color: @primary-text-color;
@button-border: @border-base;
// button|default 
@button-padding-vertical: 10px;
@button-padding-horizontal: 16px;
@button-font-size: @font-size-base;
@button-font-weight: @font-weight-base;
// button|medium
@button-medium-padding-vertical: 6px;
@button-medium-padding-horizontal: 12px;
@button-medium-font-size: @font-size-base;
// button|small
@button-small-padding-vertical: 4px;
@button-small-padding-horizontal: 8px;
@button-small-font-size: @font-size-small;

//button|radius
@button-radius: @border-radius-base;
@button-round-radius: @border-radius-round;
//button|disabed
@button-disabled-font-color: @disabled-font-color;
@button-disabled-background-color: @disabled-background-color;
@button-disabled-border-color: @disabled-border-color;
// button|primary
@button-primary-font-color: @color-white;
@button-primary-background-color: @primary-color;
@button-primary-border-color: @primary-color;
// button|success
@button-success-font-color: @color-white;
@button-success-background-color: @success-color;
@button-success-border-color: @success-color;
// button|warning
@button-warning-font-color: @color-white;
@button-warning-background-color: @warning-color;
@button-warning-border-color: @warning-color;
// button|danger
@button-danger-font-color: @color-white;
@button-danger-background-color: @danger-color;
@button-danger-border-color: @danger-color;
// button|info
@button-info-font-color: @color-white;
@button-info-background-color: @info-color;
@button-info-border-color: @info-color;
// button|text
@button-text-hover-font-color: @primary-text-color;
@button-text-hover-background-color: #f4f4f5;

@button-hover-tint-percent: 20%;

/* Scrollbar
-------------------------- */
@scrollbar-background-color: rgba(@secondary-text-color, .3);
@scrollbar-hover-background-color: rgba(@secondary-text-color, .5);

/* Input
-------------------------- */
// input|font
@input-font-color: @primary-text-color;
@input-font-size: @font-size-base;
// input|icon
@input-icon-color: @placeholder-text-color;
@input-clear-hover-color: @secondary-text-color;
// input|radius
@input-radius: @border-radius-base;
@input-round-radius: @border-radius-round;
// input|border
@input-border: @border-base;
@input-hover-border: @border-color-hover;
@input-focus-border: @primary-color;
// input|height
@input-height: @height-base;
@input-padding-horizontal: 16px;
// input
@input-background-color: @color-white;
@input-placeholder-color: @placeholder-text-color;
// input|disabled
@input-disabled-fill: @disabled-background-color;
@input-disabled-border: @disabled-border-color;
@input-disabled-color: @disabled-font-color;
@input-disabled-placeholder-color: @disabled-placeholder-color;
// input|medium
@input-medium-font-size: @font-size-base;
@input-medium-height: @height-medium;
// input|small
@input-small-font-size: @font-size-small;
@input-small-height: @height-small ;

/* Anchor
-------------------------- */
@anchor-border-width: 2px;
@anchor-border-color: @border-base-color;
@anchor-background-color: @color-white;
@anchor-font-color: @primary-text-color;
@anchor-font-size: @font-size-base;

/* Radio
-------------------------- */
// radio|font
@radio-font-size: @font-size-base;
@radio-font-color: @primary-text-color;
@radio-font-weight: @font-weight-base;
// radio|bordered
@radio-bordered-height: @height-base;
@radio-bordered-padding: 10px 20px 0 10px;
@radio-radius: @border-radius-base;
@radio-border: @border-base;
// radio|input
@radio-input-height: 16px;
@radio-input-width: 16px;
@radio-input-border-radius: @border-radius-circle;
@radio-input-background-color: @color-white;
@radio-input-border-color-hover: @primary-color;
// radio|bordered|disabled
@radio-disabled-border-color: @disabled-border-color;
// radio|medium
@radio-bordered-medium-height: @height-medium;
@radio-bordered-medium-padding: 6px 20px 0 10px;
@radio-medium-input-height: 14px;
@radio-medium-input-width: 14px;
@radio-medium-font-size: @font-size-base;
// radio|small
@radio-bordered-small-height: 22px;
@radio-bordered-small-padding: 3px 20px 0 10px;
@radio-small-input-height: 12px;
@radio-small-input-width:  12px;
@radio-small-font-size: @font-size-small;
// radio|disabled
@radio-disabled-input-fill: @disabled-background-color;
@radio-disabled-input-border-color: @disabled-border-color;
@radio-disabled-icon-color: @disabled-background-color;
// radio|checked
@radio-checked-input-border-color: @primary-color;
@radio-checked-font-color: @primary-color;
// radio|disabled|checked
@radio-disabled-checked-input-fill: @disabled-background-color;
@radio-disabled-checked-input-border-color: @disabled-background-color;
@radio-disabled-checked-icon-color: @placeholder-text-color;
// radio|button|checked
@radio-button-checked-font-color: @color-white;
@radio-button-checked-background-color: @primary-color;
@radio-button-checked-border-color: @primary-color;
@radio-button-disabled-checked-fill: @disabled-placeholder-color;
@radio-button-disabled-checked-color: @secondary-text-color;

/* Checkbox
-------------------------- */
@checkbox-input-border: @border-base;
@checkbox-border-radius: @border-radius-base;
@checkbox-input-width: 16px;
@checkbox-input-height: 16px;
@checkbox-background-color: @color-white;
@checkbox-input-border-color-hover: @primary-color;
// checkbox|font
@checkbox-font-color: @primary-text-color;
@checkbox-font-weight: @font-weight-base;
@checkbox-font-size: @font-size-base;
// checkbox|bordered
@checkbox-bordered-padding: 7px 20px 9px 10px;
@checkbox-bordered-border-radius: @border-radius-base;
@checkbox-bordered-border: @border-base;
@checkbox-bordered-height: @height-base;
// checkbox|bordered|medium
@chekcbox-bordered-medium-padding: 3px 20px 7px 10px;
@chekcbox-bordered-medium-height: @height-medium;
@chekcbox-bordered-medium-line-height: 13px;
@chekcbox-bordered-medium-font-size: @font-size-base;
@chekcbox-bordered-medium-input-height: 14px;
@chekcbox-bordered-medium-input-width: 14px;
// checkbox|bordered|small
@chekcbox-bordered-small-padding: 0px 15px 3px 10px;
@chekcbox-bordered-small-height: 22px;
@chekcbox-bordered-small-line-height: 9px;
@chekcbox-bordered-small-font-size: @font-size-small;
@chekcbox-bordered-small-input-height: 12px;
@chekcbox-bordered-small-input-width: 12px;
@checkbox-bordered-small-after-width: 6px;
@checkbox-bordered-small-after-height: 2px;
// checkbox|checked
@checkbox-checked-border-color: @primary-color;
@checkbox-checked-background-color: @primary-color;
@checkbox-checked-input-border-color: @primary-color;
@checkbox-checked-font-color: @primary-color;
@checkbox-checked-icon-color: @color-white;
// checkbox|disabled
@checkbox-disabled-border-color: @disabled-border-color;
@checkbox-disabeld-input-fill: @disabled-background-color;
@checkbox-disabled-icon-color: @placeholder-text-color;
// checkbox|checked|disabled
@checkbox-disabled-checked-input-fill: @border-extralighter-color;
@checkbox-disabled-checked-input-border-color: @disabled-border-color;
@checkbox-disabled-checked-icon-color: @placeholder-text-color;
// checkedbox|button
@checkbox-button-checked-font-color: @color-white;
@checkbox-button-checked-background-color: @primary-color;
@checkbox-button-checked-border-color: @primary-color;

/* Empty
-------------------------- */
@empty-font-size: @font-size-base;
@empty-font-color: @regular-text-color;
@empty-medium-font-size: @font-size-base;
@empty-small-font-size: @font-size-small;

/* Dropdown
-------------------------- */
@dropdown-font-color: @primary-text-color;
@dropdown-font-size: @font-size-base;
// dropdown|menu
@dropdown-menu-background-color: @color-white;
@dropdown-menu-border: @border-base;
@dropdown-menu-border-radius: @border-radius-base;
@dropdown-menu-box-shadow: @box-shadow-light;
// dropdown|menu|item
@dropdown-menuItem-hover-fill: @color-background-hover-fill;
// dropdown|menu|medium
@dropdown-menu-medium-padding: 0 17px;
@dropdown-menu-medium-line-height: @height-medium + 2;
@dropdown-menu-medium-font-size: @font-size-base;
// dropdown|menu|small
@dropdown-menu-small-padding: 0 15px;
@dropdown-menu-small-line-height: @height-small + 3;
@dropdown-menu-small-font-size: @font-size-small;

/* Select
-------------------------- */
// select|input
@select-input-focus-border-color: @primary-color;
@select-input-color: @placeholder-text-color;
@select-input-font-size: @font-size-base;
// select|input
// @select-border-color-hover: @border-color-hover;
@select-close-hover-color: @placeholder-text-color;
@select-font-size: @font-size-base;
@select-multiple-input-color: #666;
@select-tag-background-color: #f0f2f5;
// select|dropdown
@select-dropdown-border: @border-width-base @border-style-base @border-light-color;
@select-dropdown-border-radius: @border-radius-base;
@select-dropdown-background: @color-white;
@select-dropdown-shadow: @box-shadow-light;
// select|dropdown|empty
@select-dropdown-empty-padding:  10px 0;
@select-dropdown-empty-color: #999;
@select-dropdown-max-height: 274px;
@select-dropdown-padding: 6px 0;
// select|option
@select-option-color: @regular-text-color;
@select-option-height: @height-medium;
@select-option-selected-font-color: @primary-color;
@select-option-hover-background: @background-color-base;
@select-option-disabled-color: @placeholder-text-color;
@select-option-selected-font-color: @primary-color;
@select-option-selected-background-color: @background-primary-light-9;
// select|group
@select-group-font-size: 12px;
@select-group-color: @info-color;
@select-group-height: @height-base - 6;

/* Tabs
-------------------------- */
// Tabs|antive-bar
@tabs-active-bar-background-color: @primary-color;
// Tabs|new-bar
@tabs-new-tab-border: @border-base;
@tabs-new-tab-color: @primary-text-color;
// Tabs|item|default
@tabs-item-height: @height-base;
@tabs-item-font-size: @font-size-base;
@tabs-item-font-weight: @font-weight-base;
@tabs-item-font-color: @primary-text-color;
@tabs-item-padding: 0 16px;
// Tabs|medium
@tabs-medium-item-height: @height-medium;
@tabs-medium-item-padding: 0 16px;
@tabs-medium-item-font-size: @font-size-base;
// Tabs|small
@tabs-small-item-height: @height-small;
@tabs-small-item-padding: 0 12px;
@tabs-small-item-font-size: @font-size-small;
// Tabs|card
@tabs-card-item-border: @border-base;
@tabs-card-item-background: @color-background-hover-fill;
// Tabs|border|card
@tabs-border-card-background: @color-white;
@tabs-border-card-border: @border-base;

/* Message
-------------------------- */
@message-min-width: 220px;
@message-background-color: @color-white;
@message-padding: 14px 24px;
@messgae-icon-font-size: @font-size-extra-large;
// messgae|normal
@message-normal-font-color: @primary-color;
// messgae|info
@message-info-font-color: @info-color;
// message|success
@message-success-font-color: @success-color;
// message|warning
@message-warning-font-color: @warning-color;
// message|error
@message-error-font-color: @danger-color;
// message|close
@message-close-icon-color: @primary-text-color;
@message-close-size:  16px;
@message-close-hover-color: @primary-color;
// message|content
@message-content-font-size: @font-size-base;
@message-content-font-color: @primary-text-color;

/* Popup
-------------------------- */
@popup-modal-background-color: @color-black ;
/// opacity||Other|1
@popup-modal-opacity: 0.5 ;

/* Tag
-------------------------- */
@tag-font-color: @primary-color;
@tag-border: @border-base;
@tag-border-radius: @border-radius-base;
// tag|default 
@tag-padding-vertical: 0px;
@tag-padding-horizontal: 10px;
@tag-font-size: @font-size-base;
@tag-font-weight: @font-weight-base;
@tag-radius: @border-radius-base;
@tag-round-radius: @border-radius-round;
@tag-primary-color: @primary-color;
@tag-info-color:  @primary-text-color;
@tag-success-color:  @success-color;
@tag-danger-color:  @danger-color;
@tag-warning-color:  @warning-color;
@tag-padding: 10px 16px;

/* Pagination
-------------------------- */
// pagination|default 
@pagination-font-size: @font-size-base;
@pagination-border-radius:@border-radius-base;
@pagination-button-height: @height-medium;
@pagination-button-width: @height-medium + 2;
@pagination-hover-color: @primary-color;
@pagination-button-disabled-color: @disabled-font-color;
@pagination-button-disabled-background-color: @disabled-background-color;
@pagination-background-color: @color-white;
@pagination-button-color: @primary-text-color;
@pagination-color-text-placeholder: @disabled-font-color;
@pagination-color-text-regular:@regular-text-color;
@pagination-color-info-lighter:@background-primary-light-9;

/* Tooltip
-------------------------- */
@tooltip-arrow-size: 6px ;
@tooltip-padding:10px;
@tooltip-font-size:@font-size-auxiliary;
@tooltip-arrow-size: 4px;
@tooltip-border-color:@primary-text-color;
@tooltip-fill: @primary-text-color;
@tooltip-color:@color-white;

/* Backtop
-------------------------- */
@backtop-background-color: #9BA3AD;
@backtop-font-color: @color-white;
@backtop-hover-background-color: #5A606B;

/* Dialog
-------------------------- */
@dialog-background-color: @color-white;
@dialog-box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.05);
// dialog|primary
@dialog-padding-primary-vertical: 9px;
@dialog-padding-primary-horizontal: 16px;
@dialog-padding-primary: @dialog-padding-primary-vertical @dialog-padding-primary-horizontal;
@dialog-font-line-height: @font-line-height-primary;
@dialog-title-font-size: @font-size-medium;
@dialog-title-font-weight: @font-weight-medium;
@dialog-content-font-size: @font-size-base;

/* MessageBox
-------------------------- */
@messagebox-font-size: 16px;
@messagebox-font-weight: @font-weight-medium;
@messagebox-title-color: @primary-text-color;
@messagebox-padding: 20px;
@messagebox-content-color: @regular-text-color;
@messagebox-content-font-size: @font-size-base;
@message-close-size: 20px;
@messagebox-normal-color: @primary-color;
@messagebox-success-color: @success-color;
@messagebox-info-color: @info-color;
@messagebox-warning-color: @warning-color;
@messagebox-danger-color: @danger-color;
@messagebox-error-font-size: @font-size-auxiliary;
// messageBox|msgbox
@msgbox-min-width: 400px;
@msgbox-max-width: 500px;
@msgbox-border-radius: @border-radius-base;
@msgbox-box-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.05);

/* DatePicker
-------------------------- */
@datepicker-border-color: @disabled-border-color;
@datepicker-inner-border-color: #e4e4e4;
@datepicker-font-color: @regular-text-color;
@datepicker-hover-font-color: @primary-color;
@datepicker-active-color: @primary-color;
@datepicker-icon-color: @primary-text-color;
@datepicker-inrange-background-color: @border-extralighter-color;
@datepicker-inrange-hover-background-color: @border-extralighter-color;
@datepicker-off-font-color: @placeholder-text-color;
@datepicker-header-font-color: @primary-text-color;
@datepicker-icon-color: @primary-text-color;
@datepicker-background-fill: @color-background-hover-fill;

/* Tree
-------------------------- */
@tree-font-color: @primary-text-color;
@tree-node-hover-background-color: @background-color-base;
@tree-expand-icon-color: @primary-text-color;

/* Form
-------------------------- */
@form-label-font-size: @font-size-base;

/* Avatar
-------------------------- */
@avatar-font-size: @font-size-base;
@avatar-font-color: #5b616c;
@avatar-border-radius: @border-radius-base;
@avatar-background-color: #ECEEF5;
// Avatar|size
@avatar-size: 40px;
@avatar-icon-font-size: 24px;
@avatar-large-size: 64px;
@avatar-large-icon-font-size: 32px;
@avatar-medium-size: 32px;
@avatar-medium-icon-font-size: 16px;
@avatar-small-size: 24px;
@avatar-small-icon-font-size: 14px;

/* Badge
-------------------------- */
@badge-background-color: @danger-color;
@badge-radius: 8px;
@badge-font-size: 12px;
@badge-size: 16px;
@badge-large-size: 19px;
@badge-large-radius: 11px;
@badge-padding: 6px;

/* Image
-------------------------- */
@image-background-color: #EDF1FF;

/* Notification
-------------------------- */
@notification-width: 400px;
@notification-padding: 14px 26px 14px 16px;
@notification-radius: @border-radius-base;
@notification-border-color: @border-lighter-color;
@notification-shadow: 0px 1px 4px 4px rgba(0, 0, 0, 0.05);;
// notification|group
@notification-group-margin-left: 13px;
@notification-group-margin-right: 8px;
// notification|title
@notification-title-font-weight: @font-weight-medium;
@notification-title-font-size: 16px;
@notification-title-color: @primary-text-color;
// notification|content
@notification-content-font-size: @font-size-base;
@notification-content-color: @primary-text-color;
// notification|icon
@notification-icon-size: 20px;
// notification|close
@notification-close-color: @secondary-text-color;
@notification-close-font-size: @message-close-size;
@notification-close-hover-color: @primary-text-color;
// notification|type
@notification-normal-icon-color: @primary-color;
@notification-success-icon-color: @success-color;
@notification-danger-icon-color: @danger-color;
@notification-info-icon-color: @info-color;
@notification-warning-icon-color: @warning-color;

/* Input-number
-------------------------- */
@input-number-crease-width: 30px;

/* Popover
-------------------------- */
@popover-background-color: @color-white;
@popover-border-color: @border-lighter-color;
@popover-font-size: @font-size-base;
@popover-padding-large: 18px 20px;
@popover-box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.1);
// popover | title
@popover-title-font-size: @font-size-base;
@popover-title-font-color: @primary-text-color;
@popover-title-padding: 0 16px;
// popover | content
@popover-content-padding: 16px;
@popover-content-font-color: @primary-text-color;
@popover-arrow-size: 6px;

/* Result
-------------------------- */
@result-padding: 40px 30px;
@result-icon-font-size: 64px;
@result-title-font-size: 24px;
@result-title-font-weight: @font-weight-medium;
@result-title-margin-top: 12px;
@result-subtitle-margin-top: 10px;
@result-extra-margin-top: 32px;
@result-info-color: @primary-color;
@result-success-color: @success-color;
@result-warning-color: @warning-color;
@result-danger-color: @danger-color;

/* Collapse
-------------------------- */
@collapse-border-color: @border-light-color;
// collapse|header
@collapse-header-height: 48px;
@collapse-header-background-color: #F6F7F8;
@collapse-header-font-size: @font-size-base;
@collapse-header-font-color: @primary-text-color;
@collapse-header-padding: 0 24px;
// collapse|content
@collapse-content-background-color: @color-white;
@collapse-content-font-size: @font-size-base;
@collapse-content-font-color: @primary-text-color;
@collapse-content-padding: 14px 24px;

/* Table
-------------------------- */
@table-font-color: @regular-text-color;
@table-row-hover-background-color: @background-color-base;
@table-current-row-background-color: @background-primary-light-9;
// table|header
@table-header-cell-border: 1px solid rgba(0, 0, 0, 0.06);
@table-header-font-color: @primary-text-color;
@table-header-background-color: #f6f7f8;
// table|border
@table-border-color: #F0F0F0;
@table-bordered-color: #DDDFE8;
@table-border: 1px solid @table-border-color;
@table-bordered: 1px solid @table-bordered-color;
// table|fixed
@table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12);

/* Switch
-------------------------- */
@switch-font-size: @font-size-base;
@switch-height: 24px;
@switch-width: 37px;
@switch-on-color: @primary-color;
@switch-off-color: #8890A0 ;
@switch-core-border-radius: 12px;
@switch-button-size: 10px;
@switch-label-color: #CED2DC;
// switch|small
@switch-small-height: 18px;
@switch-small-width: 28px;
@switch-small-button-size: 8px;

/* Menu
-------------------------- */
@menu-background-color: @color-white;
@menu-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
// menu-item
@menu-item-font-size: @font-size-base;
@menu-item-font-color: @primary-text-color;
@menu-item-hover-fill: @background-primary-light-9;
@menu-item-active-fill: @primary-color;
// menu-popup
@menu-popup-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
// menu-dark
@menu-dark-background-color: #101840;

/* Cascader
-------------------------- */
// cascader|menu
@cascader-menu-font-size: @font-size-base;
@cascader-menu-fill: @color-white;
@cascader-menu-border: 1px solid @border-light-color;
@cascader-menu-radius: @border-radius-base;
@cascader-menu-shadow: @box-shadow-light;
@cascader-menu-font-color: @primary-text-color;
@cascader-menu-selected-font-color: @primary-color;
// cascader|tag
@cascader-tag-background: #f0f2f5;
// cascader|node 
@cascader-node-background-hover: @background-color-base;
@cascader-node-color-disabled: @placeholder-text-color;
@cascader-color-empty: @placeholder-text-color;
@cascader-node-active-background: @background-primary-light-9;

/* Progress
-------------------------- */
@progress-remaining-color: #ECEEF2;
@progress-default-color: @primary-color;
@progress-text-color: @primary-text-color;
@progress-radius: 100px;

/* Upload
-------------------------- */
@upload-primary-text-color: @primary-color;
@upload-font-color: @regular-text-color;
@upload-primary-color: @primary-color;
@upload-placeholder-color:@placeholder-text-color;
@upload-border-base:@border-base;
@upload-success-color: @success-color;
@upload-primary-color: @primary-color;
@upload-background-color-base:@background-color-base;
@upload-md-fade-transition:@md-fade-transition;

/* Link
-------------------------- */
@link-font-size: @font-size-base;
@link-font-weight: @font-weight-base;
@link-default-font-color: @primary-text-color;
@link-default-active-color: @primary-color;
@link-disabled-font-color: @placeholder-text-color;
// Link|type
@link-primary-font-color: @primary-color;
@link-success-font-color: @success-color;
@link-warning-font-color: @warning-color;
@link-danger-font-color: @danger-color;
@link-info-font-color: @info-color;

/* Loading
-------------------------- */
@loading-spinner-size: 40px;
@loading-fullscreen-spinner-size: 50px;
@loading-spinner-medium-size: 32px;
@loading-spinner-small-size: 28px;

/* Footer
-------------------------- */
@footer-padding: 0 20px;

/* Header
-------------------------- */
@header-padding: 0 32px;

/* Main
-------------------------- */
@main-padding: 0 32px;

/* Break-point
--------------------------*/
@xs: 480px;
@sm: 768px;
@md: 992px;
@lg: 1200px;
@xl: 1600px;
@xxl: 1920px;
// screen|min
@screen-xs-min: @xs;
@screen-sm-min: @sm;
@screen-md-min: @md;
@screen-lg-min: @lg;
@screen-xl-min: @xl;
@screen-xxl-min: @xxl;
// screen|maximum
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@screen-lg-max: (@screen-xl-min - 1px);
@screen-xl-max: (@screen-xxl-min - 1px);
// grid|system
@grid-columns: 24;
@grid-gutter-width: 0;

/* Timeline
-------------------------- */
@timeline-width: @border-width-base;
@timeline-color: @table-bordered-color;
@timeline-dot-border-width: 3px;
@timeline-dot-color: @primary-color;
@timeline-dot-bg: @color-white;
@font-size-sm: @font-size-auxiliary;
@error-color: @danger-color;
@disabled-color:@disabled-background-color;
@line-height-base: 1.5;
/* Alert
--------------------------*/
@alert-padding: 6px 10px;
@alert-border-radius: @border-radius-base;
@error-color: #ED6363;
// Alert|icon
@alert-icon-size: 18px;
@alert-icon-large-size: 28px;
@alert-title-font-size: 14px;
@alert-description-font-size: 14px;
@alert-close-font-size: 18px;
@alert-close-customed-font-size: 14px;
// Alert|type
@alert-primary-color: @primary-lighter-color;
@alert-primary-border-color: @primary-color;
@alert-success-color: @success-lighter-color;
@alert-success-border-color: @success-color;
@alert-warning-color: @warning-lighter-color;
@alert-warning-border-color: @warning-color;
@alert-info-color: @info-lighter-color;
@alert-info-border-color: @info-color;
@alert-error-color: @danger-lighter-color;
@alert-error-border-color: @danger-color;

/* List
--------------------------*/
@border-color-split: @border-base-color;
@process-icon-color: @primary-color;
@process-title-color: @primary-text-color;
@process-description-color: @regular-text-color;
@process-tail-color: @border-color-split;
@process-icon-text-color: @color-white;
@wait-icon-color: @info-color;
@wait-title-color: @secondary-text-color;
@wait-description-color: @wait-title-color;
@wait-tail-color: @process-tail-color;
@finish-icon-color: @process-icon-color;
@finish-title-color: @regular-text-color;
@finish-description-color: @secondary-text-color;
@text-color-secondary: @secondary-text-color;
@finish-tail-color: @primary-color;
@error-icon-color: @danger-color;
@error-title-color: @danger-color;
@error-description-color: @danger-color;
@error-tail-color: @wait-tail-color;
@steps-background: @color-white;
@steps-nav-arrow-color: @border-light-color;
@steps-nav-active-color: @primary-color;
@text-color:@primary-text-color;

@steps-icon-size: 32px;
@steps-small-icon-size: 24px;
@steps-dot-size: 8px;
@steps-current-dot-size: 10px;
@steps-desciption-max-width: 140px;
@steps-nav-content-max-width: auto;
@font-size-lg:16px;

@list-font-size: @font-size-base;
@list-item-padding: 12px 0;
// List|meta
@list-item-meta-margin-bottom: 16px;
@list-item-meta-title-margin-bottom: 12px 0;
@list-header-background: transparent;
@list-footer-background: transparent;
@list-header-color: fade(#000, 85%);

/* Card
--------------------------*/
@card-border-radius: 3px;
@card-border-color: @border-base-color;
@card-padding: 16px;
@card-small-padding: 9px 16px;
@card-shadow: 0px 2px 16px 0px rgba(38, 42, 50, 0.2);

/* PageHeader
--------------------------*/
@page-header-icon-color: @primary-color;
@page-header-title-font: @font-size-medium;
@page-header-subtitle-font: @font-size-base;
@page-header-subtitle-color: @secondary-text-color;

/* Slider
--------------------------*/
@slider-height: 6px;
@slider-margin: 16px 0;
@slider-runway-background-color: #F6F7F8;
@slider-border-radius: 3px;
@slider-disable-color: @disabled-placeholder-color;
// slider|main
@slider-main-background-color: @primary-color;
@slider-stop-background-color: @color-white;
// slider|button
@slider-button-size: 12px;
@slider-button-wrapper-size: 24px;
@slider-button-wrapper-offset: -10px;
// slider|stop
@slider-stop-height: 10px;

/* Rate
--------------------------*/
@rate-height: 24px;
@rate-icon-size: 22px;
@rate-icon-margin: 13px;
@rate-icon-color: @placeholder-text-color;
@rate-font-size: @font-size-base;

/* Transfer
--------------------------*/
@transfer-border-color: @border-base-color;
@transfer-border-radius: @border-radius-base;
@transfer-panel-width: 200px;
// transref|height
@transfer-filter-height: 32px;
@transfer-panel-header-height: 48px;
@transfer-panel-body-height: 248px;
@transfer-panel-footer-height: 44px;
@transfer-item-height: 32px;