@white: #fff;
@black: #000;
@light: #f8f9fa;
@dark: #343a40;
@theme: 'light';

// >>> Text
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';
@font-family-compact: Lato, Helvetica Neue, Arial, Helvetica, sans-serif;
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@font-variant-base: tabular-nums;
@font-feature-settings-base: 'tnum';

// Animation
@animation-duration-slow: 0.3s; // Modal
@animation-duration: 0.2s;
@animation-duration-base: 0.2s;
@animation-duration-fast: 0.1s; // Tooltip
@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-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

// Motion
@wave-animation-width: 6px;

// 字体
@font-size-xs: 11px;
@font-size-sm: 13px;
@font-size-ssm: 13px;
// @font-size-base: 16px;
@font-size-md: @font-size-base;
@font-size-lg: @font-size-base + 2px;
@font-size-xl: @font-size-base + 6px;

// 间隙
@gap-xs: 4px;
@gap-sm: 8px;
@gap-base: 12px;
@gap-md: 16px;
@gap-lg: 20px;
@gap-xl: 24px;

// 圆角
@border-radius: 2px;
@border-radius-xs: 0px;
@border-radius-sm: 1px;
@border-radius-md: 2px;
@border-radius-lg: 4px;
@border-radius-xl: 6px;

@heading-1-size: ceil(@font-size-base * 2.71);
@heading-2-size: ceil(@font-size-base * 2.14);
@heading-3-size: ceil(@font-size-base * 1.71);
@heading-4-size: ceil(@font-size-base * 1.42);
@heading-5-size: ceil(@font-size-base * 1.14);

@line-height-base: 1.5715;
@body-line-height: @line-height-base;
@border-width: 1px;
@font-weight-normal: 400;
@font-weight-base: @font-weight-normal;
@font-weight-md: 500;
@font-weight-bold: 700;

// Zindex
@zindex-affix: 900;
@zindex-dropdown: 1000;
@zindex-sticky: 1100;
@zindex-fixed: 1200;
@zindex-popover: 1300;
@zindex-modal: 1400;
@zindex-contextmenu: 1500;
@zindex-tooltip: 1600;
@zindex-toast: 2000;
@zindex-top: 3000;
@zindex-popover: 1300;

@box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
@box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.075);

// >>> Text Color
@icon-color: inherit;
@icon-onHover-color: var(--primary-color);
@heading-color: fade(@black, 85%);

// Label
@label--default-bg: var(--secondary-color);
@label--primary-bg: var(--primary-color);
@label--success-bg: var(--success-color);
@label--info-bg: var(--primary-5);
@label--warning-bg: var(--warning-color);
@label--danger-bg: var(--danger-color);
@label-color: @white;
@label-link--hover-color: @white;

// Base background color for most components
@component-background: #fff;
// Popover background color
@popover-background: var(--color-bg-2);

@text--muted-color: var(--color-text-3);
@text--loud-color: var(--color-text-1);

// Disabled states
@disabled-color: var(--color-text-3);

// Outline
@outline-blur-size: 0;
@outline-width: 2px;
@outline-color: var(--primary-color); // No use anymore
@outline-fade: 20%;

// Layout
@Layout-header-bg: var(--color-bg-2);
@Layout-header-boxShadow: 0 2px 2 rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
@Layout-brand-bg: @dark;
@Layout-brandbar-color: var(--color-border-3);
@layout-asideLabel-color: var(--secondary-color);
@layout-asideLink-color: var(--secondary-color);
@layout-asideLink-onActive-color: var(--color-bg-2);
@layout-asideLink-onActive-arrowColor: @layout-asideLink-onActive-color;
@layout-asideLink-onHover-color: var(--primary-color);
@layout-asideLink-onHover-iconColor: inherit;
@layout-asideLink-onHover-iconSize: inherit;
@layout-aside-subList-bg: #000c17;
@layout-aside-onHover-bg: none;
@layout-aside-onAcitve-bg: var(--primary-color);
@layout-aside-onAcitve-onHover-bg: @layout-aside-onAcitve-bg;
@Layout-asideDivider-bg: #2e3344;
@Layout-brand-color: var(--color-border-3);
@Layout-headerBar-borderBottom: none;
@Layout-aside-bg: #001529;
@Layout-aside-color: var(--color-border-3);
// Tooltip
@Tooltip--attr-fontSize: @font-size-sm;
@Tooltip--attr-lineHeigt: @line-height-base;
@Tooltip--attr-borderWidth: 0;
@Tooltip--attr-borderColor: var(--color-border);
@Tooltip--attr-bg: rgba(0, 0, 0, 0.7);
@Tooltip--attr-boxShadow: @box-shadow;
@Tooltip--attr-color: @white;

// Form

@Form-description-color: var(--text-color-description);
@Form-input-addOnBg: #edf1f2;
@Form-input-addOnColor: var(--color-text-1);
@Form-input-bg: var(--color-bg-2);
@Form-input-borderColor: var(--color-border);
@Form-input-boxShadow: none;
@Form-input-color: var(--color-text-1);
@Form-input-iconColor: @icon-color;
@Form-input-onActive-color: var(--primary-5);
@Form-input-onDisabled-bg: var(--color-fill-2);
@Form-input-onDisabled-borderColor: var(--color-border-2);
@Form-input-onError-bg: @Form-input-bg;
@Form-input-onError-borderColor: var(--danger-6);
@Form-input-onFocus-addOnColor: var(--primary-color);
// @Form-input-onFocused-bg: @white !default;
@Form-input-onFocused-bg: @Form-input-bg;
@Form-input-onFocused-borderColor: var(--primary-5);
@Form-input-onHover-iconColor: darken(@gray-6, 20%);
@Form-input-onHover-bg: rgba(var(--color-bg-2), 0.6);
@Form-input-onHover-borderColor: @Form-input-onFocused-borderColor;
@Form-input-placeholderColor: @text--muted-color;
@Form-input-onDisabled-color: @text--muted-color;

@Form-input-clearBtn-color: rgba(0, 0, 0, 0.25);
@Form-input-clearBtn-color-onHover: rgba(0, 0, 0, 0.45);
@Form-input-clearBtn-color-onActive: rgba(0, 0, 0, 0.45);

@Form-select-bg: var(--color-bg-2);
@Form-select-borderColor: @Form-input-borderColor;
@Form-select-borderRadius: @Form-input-borderRadius;
@Form-select-borderWidth: @Form-input-borderWidth;
@Form-select-caret-iconColor: @icon-color;
@Form-select-caret-onHover-iconColor: @icon-onHover-color;
@Form-select-checkall-bottomBorder: #eceff8;
@Form-select-color: var(--color-text-1);
@Form-select-input-fontSize: @font-size-sm;
@Form-select-menu-bg: var(--color-bg-2);
@Form-select-menu-color: @Form-select-color;
@Form-select-menu-height: @Form-input-height;
@Form-select-menu-onActive-bg: transparent;
@Form-select-menu-onActive-color: var(--primary);
@Form-select-menu-onDisabled-bg: transparent;
@Form-select-menu-onDisabled-color: @text--muted-color;
@Form-select-menu-onHover-bg: #f5f5f5;
@Form-select-menu-onHover-color: #000;
@Form-select-group-color: @Form-select-caret-iconColor;
@Form-select-onError-borderColor: @Form-input-onError-borderColor;
@Form-select-onFocused-borderColor: @Form-input-onFocused-borderColor;
@Form-select-onFocused-color: @Form-select-color;
@Form-select-onHover-bg: var(--color-bg-2);
@Form-select-onHover-borderColor: var(--primary-onHover-border);
@Form-select-outer-boxShadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%),
  0 9px 28px 8px rgb(0 0 0 / 5%);
@Form-select-paddingX: @Form-input-paddingX;
@Form-select-placeholderColor: @Form-input-placeholderColor;
@Form-select-search-height: @Form-select-menu-height;
@Form-select-value-bgColor: var(--color-fill-2);
@Form-select-value-borderColor: transparent;
@Form-select-valueIcon-color: ''; //暂定
@Form-select-valueIcon-onHover-color: @Form-select-color;
@Form-selectValue-bg: var(--info-color-bg);
@Form-selectValue-onHover-bgColor: var(--color-fill-3);
@Form-selectValue-borderColor: var(--info-borderColor);
@Form-selectValue-color: var(--primary-5);
@Form-selectValue-onDisable-bg: var(--info-onDisable-bg);
@Form-selectValue-onHover-bg: var(--info-onHover-bg);
@Form-selectValue-onDisabled-color: @Form-select-caret-iconColor;
@Form-selectValue-onInvalid-color: ''; //暂定
@Form-select-onFocus-boxShadow: 0 0 0 3px rgb(24 144 255 / 8%);

// Modal
@Modal-bg: var(--color-bg-2);

//Button

@button-color: var(--color-bg-2);
@Button--danger-bg: var(--danger-color);
@Button--danger-border: @Button--danger-bg;
@Button--danger-color: @button-color;
@Button--danger-onActive-bg: var(--danger-onActive);
@Button--danger-onActive-border: var(--danger-onHover-border);
@Button--danger-outline-color: var(--danger-outline);
@Button--danger-onActive-color: @Button--danger-color;
@Button--danger-onHover-bg: var(--danger-onHover);
@Button--danger-onHover-border: var(--danger-onHover);
@Button--danger-onHover-color: @Button--danger-color;
@Button--error-bg: var(--danger-6);
@Button--error-border: @Button--error-bg;
@Button--error-color: @button-color;
@Button--error-onActive-bg: var(--error-onActive);
@Button--error-onActive-border: var(--error-onHover-border);
@Button--error-outline-color: var(--error-outline);
@Button--error-onActive-color: @Button--error-color;
@Button--error-onHover-bg: var(--error-onHover);
@Button--error-onHover-border: var(--error-onHover);
@Button--error-onHover-color: @Button--error-color;

@Button--dark-bg: @dark;
@Button--dark-border: @Button--dark-bg;
@Button--dark-color: @button-color;
@Button--dark-onActive-bg: darken(@dark, 10%);
@Button--dark-onActive-border: darken(@dark, 12.5%);
@Button--dark-outline-color: var(--dark-outline);
@Button--dark-onActive-color: @Button--dark-color;
@Button--dark-onHover-bg: darken(@dark, 7.5%);
@Button--dark-onHover-border: darken(@dark, 10%);
@Button--dark-onHover-color: @Button--dark-color;
@Button--default-bg: var(--body-bg);
@Button--default-border: var(--color-border);
@Button--default-color: var(--color-text-1);
@Button--default-onActive-bg: var(--color-bg-2);
@Button--default-onActive-border: var(--primary-onActive);
@Button--default-onActive-color: var(--primary-onActive);
@Button--default-outline-color: var(--primary-outline);
@Button--default-onHover-bg: transparent;
@Button--default-onHover-border: var(--primary-color);
@Button--default-onHover-color: var(--primary-color);
@Button--iconOnly-minWidthRate: 4 / 3;
@Button--info-bg: var(--primary-5);
@Button--info-border: @Button--info-bg;
@Button--info-color: @button-color;
@Button--info-onActive-bg: var(--info-onActive);
@Button--info-onActive-border: var(--info-onHover-border);
@Button--info-outline-color: var(--info-outline);
@Button--info-onActive-color: @Button--info-color;
@Button--info-onHover-bg: var(--info-onHover);
@Button--info-onHover-border: var(--info-onHover);
@Button--info-onHover-color: @Button--info-color;

@Button--light-bg: @light;
@Button--light-border: var(--color-border);
@Button--light-color: var(--color-text-1);
@Button--light-onActive-bg: darken(@light, 10%);
@Button--light-onActive-border: darken(@light, 12.5%);
@Button--light-outline-color: var(--light-outline);
@Button--light-onActive-color: @Button--light-color;
@Button--light-onHover-bg: darken(@light, 7.5%);
@Button--light-onHover-border: darken(@light, 10%);
@Button--light-onHover-color: @Button--light-color;
@Button--link-color: var(--primary-color);
@Button--link-onDisabled-color: @gray-6;
@Button--link-onDisabled-bg: darken(@gray-6, 7.5%);
@Button--link-onHover-color: var(--primary-onHover);
@Button--link-onActive-color: var(--primary-onActive);
@Button--primary-bg: var(--primary-color);
@Button--primary-border: var(--color-border);
@Button--primary-color: @button-color;
@Button--primary-onActive-bg: var(--primary-onActive);
@Button--primary-onActive-border: var(--primary-onActive);
@Button--primary-outline-color: var(--primary-outline);
@Button--primary-onActive-color: @Button--primary-color;
@Button--primary-onHover-bg: var(--primary-onHover);
@Button--primary-onHover-border: var(--primary-onHover-borderColor);
@Button--primary-onHover-color: @Button--primary-color;
@Button--secondary-bg: var(--secondary-color);
@Button--secondary-border: @Button--secondary-bg;
@Button--secondary-color: @button-color;
@Button--secondary-onActive-bg: var(--secondary-onActive);
@Button--secondary-outline-color: var(--secondary-outline);
@Button--secondary-onActive-border: var(--secondary-onHover-border);
@Button--secondary-onActive-color: @Button--secondary-color;
@Button--secondary-onHover-bg: var(--secondary-onHover);
@Button--secondary-onHover-border: var(--secondary-onHover);
@Button--secondary-onHover-color: @Button--secondary-color;

@Button--success-bg: var(--success-color);
@Button--success-border: @Button--success-bg;
@Button--success-color: @button-color;
@Button--success-onActive-bg: var(--success-onActive);
@Button--success-onActive-border: var(--success-onHover-border);
@Button--success-outline-color: var(--success-outline);
@Button--success-onActive-color: @Button--success-color;
@Button--success-onHover-bg: var(--success-onHover);
@Button--success-onHover-border: var(--success-onHover);
@Button--success-onHover-color: @Button--success-color;
@Button--enhance-bg: var(--primary-color);
@Button--enhance-border: @Button--enhance-bg;
@Button--enhance-color: @Button--enhance-bg;
@Button--enhance-onActive-bg: var(--color-bg-2);
@Button--enhance-onActive-border: var(--primary-onActive);
@Button--enhance-outline-color: var(--primary-outline);
@Button--enhance-onActive-color: var(--primary-onActive);
@Button--enhance-onHover-bg: var(--color-bg-2);
@Button--enhance-onHover-border: var(--primary-onHover);
@Button--enhance-onHover-color: var(--primary-onHover);
@Button--warning-bg: var(--warning-color);
@Button--warning-border: @Button--warning-bg;
@Button--warning-color: @button-color;
@Button--warning-onActive-bg: var(--warning-onActive);
@Button--warning-onActive-border: var(--warning-onHover-border);
@Button--warning-outline-color: var(--warning-outline);
@Button--warning-onActive-color: @Button--warning-color;
@Button--warning-onHover-bg: var(--warning-onHover);
@Button--warning-onHover-border: var(--warning-onHover);
@Button--warning-onHover-color: @Button--warning-color;

// @Button-boxShadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
@Button-textShadow: none;

@Button-onActive-boxShadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@Button-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
@Button-animation-spin: spin 1s infinite linear;
@Button-onActive-color: var(--primary-color);
@Button-onActive-border: var(--primary-color);
@Button-onDisabled-borderColor: #dee2e6;
@Button-onDisabled-opacity: 0.65;
@Button-onDisabled-bg: var(--color-fill-2);
@Button-onFocus-boxShadow: none;

@Button-transition: color @animation-duration ease-in-out,
  background-color @animation-duration ease-in-out, border-color @animation-duration ease-in-out,
  box-shadow @animation-duration ease-in-out;

// ButtonGroup
@ButtonGroup--primary-isActive-color: var(--color-bg-2);
@ButtonGroup--primary-isActive-bg: var(--primary-color);

//Tooltip

@Tooltip--attr-bg: rgba(0, 0, 0, 0.7);
@Tooltip--attr-borderColor: var(--color-border);

@Tooltip--attr-boxShadow: @box-shadow;
@Tooltip--attr-color: var(--color-bg-2);
@Tooltip--attr-transition: all @animation-duration ease-in-out;
@Tooltip-arrow-color: @Tooltip-bg;
@Tooltip-arrow-color--dark: rgba(0, 0, 0, 0.65);
@Tooltip-arrow-outerColor: fade-in(var(--color-border), 0.05);
@Tooltip-bg: var(--color-bg-2);
@Tooltip-bg--dark: rgba(0, 0, 0, 0.65);
@Tooltip-body-color: var(--color-text-1);
@Tooltip-body-color--dark: var(--color-bg-2);
@Tooltip-borderColor: var(--color-border);
@Tooltip-boxShadow--dark: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
@Tooltip-fontWeight: @font-weight-md;
@Tooltip-title-fontWeight: bold;
// @Tooltip-title-bg: darken(@white, 3%);
// @Tooltip-title-borderBottom-color: darken(darken(@white, 3%), 5%);
@Tooltip-title-color: @text--loud-color;
@Tooltip-title-color--dark: var(--color-bg-2);

//Toast

@Toast-color: var(--color-text-1);
@Toast--danger-bgColor: var(--color-bg-2);
@Toast--danger-borderColor: transparent;
// @Toast--danger-color: @Toast-color;
@Toast--danger-color: var(--danger-color);
@Toast--info-bgColor: var(--color-bg-2);
@Toast--info-borderColor: transparent;
// @Toast--info-color: @Toast-color;
@Toast--info-color: var(--primary-5);
@Toast--success-bgColor: var(--color-bg-2);
@Toast--success-borderColor: transparent;
// @Toast--success-color: @Toast-color;
@Toast--success-color: var(--success-color);
@Toast--warning-bgColor: var(--color-bg-2);
@Toast--warning-borderColor: transparent;
// @Toast--warning-color: @Toast-color;
@Toast--warning-color: var(--warning-color);
@Toast-box-shadow: @box-shadow;

@Toast-close-color: @icon-color;
@Toast-close--onHover-color: @Toast-close-color;

// Drawer
@Drawer-bg: var(--color-bg-2);
@Drawer-body-padding: @gap-base;
@Drawer-close-color: rgba(0, 0, 0, 0.2);
@Drawer-close-onHover-color: rgba(255, 255, 255, 1);
@Drawer-content-borderColor: var(--color-border);
@Drawer-content-borderWidth: @border-width;
@Drawer-footer-borderColor: var(--border-color-light);
@Drawer-header-bg: var(--color-bg-2);
@Drawer-header-borderColor: var(--border-color-light);
@Drawer-header-padding: @gap-base;
@Drawer-overlay-bg: rgba(0, 0, 0, 0.6);
@Drawer-title-fontColor: @text--loud-color;

// List
// --List--unsaved-heading-bg: #e8f0fe;
// --List--unsaved-heading-color: #4285f4;
// --List-bg: var(--white);
// --List-borderColor: var(--color-border);
// --List-borderRadius: var(--borderRadius);
// --List-borderWidth: var(--borderWidth);
// --List-fixedTop-boxShadow: var(--boxShadow);
// --List-placeholder-height: 30px)};
// --List-toolbar-marginX: 0;
// --List-toolbar-marginY: @gap-base;

// --ListControl-fontSize: var(@Form-fontSize);
// --ListControl-gutterWidth: 10px)};
// --ListControl-item-bg: var(--white);
// --ListControl-item-borderColor: var(--color-border);
// --ListControl-item-borderWidth: var(--borderWidth);
// --ListControl-item-borderRadius: 3px)};
// --ListControl-item-color: var(--color-text-1);
// --ListControl-item-onActive-after-borderColor: var(--primary-color);
// --ListControl-item-onActive-before-bg: var(--white);
// --ListControl-item-onActive-bg: var(--primary-color);
// --ListControl-item-onActive-borderColor: #{darken($primary, 10%)};
// --ListControl-item-onActive-color: var(--white);
// --ListControl-item-onActive-onHover-bg: var(--primary-color);
// --ListControl-item-onDisabled-bg: var(--ListControl-item-bg);
// --ListControl-item-onDisabled-borderColor: #{lighten($borderColor, 5%)};
// --ListControl-item-onDisabled-color: var(--ListControl-item-color);
// --ListControl-item-onDisabled-opacity: 0.6;
// --ListControl-item-onHover-bg: #{darken($white, 7.5%)};
// --ListControl-item-onHover-borderColor: #{darken($borderColor, 10%)};
// --ListControl-item-onHover-color: var(--ListControl-item-color);
// --ListControl-item-paddingX: 12px)};
// --ListControl-item-paddingY: 6px)};
// --ListControl-item-transition: none;

// --ListItem--strip-bg: #f6f8f8;
// --ListItem-borderColor: #{lighten($borderColor, 5%)};
// --ListItem-borderWidth: var(--List-borderWidth);
// --ListItem-onChecked-bg: #d9f3fb;
// --ListItem-onChecked-borderColor: #{darken(#d9f3fb, 10%)};
// --ListItem-onChecked-color: #{darken(#d9f3fb, 40%)};
// --ListItem-onChecked-fieldLabel-color: #{lighten(darken(#d9f3fb, 40%), 20%)};
// --ListItem-onDragging-opacity: 0.1;
// --ListItem-onModified-bg: #e8f0fe;
// --ListItem-onModified-borderColor: #{darken(#e8f0fe, 10%)};
// --ListItem-onModified-color: #4285f4;
// --ListItem-onModified-fieldLabel-color: #{lighten(#4285f4, 20%)};
// --ListItem-paddingX: @gap-base;
// --ListItem-paddingY: @gap-sm;
// --ListItem--onHover-bg: rgba(0, 126, 255, 0.08);
// --ListItem--onHover-color: var(--info);

// @listMenu--onActive-borderColor: var(--info);
// @listMenu-borderRadius: 2px)};
// @listMenu-borderWidth: 1px)};
// @listMenu-bordrColor: var(--color-border);
// @listMenu-divider-color: var(--borderColorLight);
// @listMenu-item--onActive-bg: transparent;
// @listMenu-item--onActive-color: var(--info);
// @listMenu-item--onDisabled-bg: transparent;
// @listMenu-item--onDisabled-color: var(--text-onDisabled;
@ListMenu-item--onHover-bg: rgba(0, 126, 255, 0.08);
// @listMenu-item--onHover-color: var(--info);
// @listMenu-item-bg: var(--white);
// @listMenu-item-color: var(--color-text-1);
// @listMenu-item-height: 34px)};

// DropDown
@DropDown-caret-marginLeft: @gap-sm;
@DropDown-menu-bg: var(--color-bg-2);
@DropDown-menu-borderColor: var(--color-border);
@DropDown-menu-borderRadius: @border-radius;
@DropDown-menu-borderWidth: @border-width;
@DropDown-menu-boxShadow: @box-shadow;
@DropDown-menu-height: 34px;
@DropDown-menu-minWidth: 160px;
@DropDown-menu-paddingX: 0;
@DropDown-menu-paddingY: @gap-xs;
@DropDown-menuItem-onHover-bg: @ListMenu-item--onHover-bg;
@DropDown-group-color: var(--text-color-secondary);
@DropDown-menuItem-color: var(--color-text-1);
@DropDown-menuItem-onHover-color: var(--primary-onHover);
@DropDown-menuItem-onActive-color: var(--primary-onActive);
@DropDown-menuItem-onDisabled-color: var(--color-text-3);
@DropDown-menuItem-paddingX: @gap-sm;
@DropDown-menuItem-paddingY: calc((@DropDown-menu-height - @font-size-ssm * @line-height-base) / 2);

// Checkbox
@Checkbox-bg: var(--text-color-inverse);
@Checkbox-onHover-color: var(--primary-onHover-border);
@Checkbox-onActive-bg: var(--primary-onActive);
@Checkbox-onDisabled-bg: var(--color-fill-2);
@Checkbox-onDisabled-color: var(--color-text-3);
@Checkbox-inner-onDisabled-bg: var(--color-fill-2);
@Checkbox-color: @Form-input-borderColor;
@Checkbox-disabled-unchecked-bg: var(--color-fill-2);

// Radio
@Radio-color: @Checkbox-color;
@Radio-onHover-color: @Checkbox-onHover-color;
@Radio-onActive-bg: var(--primary-color);
@Radio-onDisabled-bg: var(--color-fill-2);
@Radio-onDisabled-color: @text--muted-color;
@Radio-button-border: var(--color-border-2);
@Radio-button-border-width: 0.5px;
@Radio-button-color: var(--text-color-inverse);

// Picker
@Picker-iconColor: @icon-color;
@Picker-onHover-iconColor: @icon-onHover-color;
// PickerColumns
@PickerColumns-bg: var(--color-bg-2);
@PickerColumns-toolbar-height: 50px;
@PickerColumns-title-fontSize: @font-size-lg;
@PickerColumns-title-color: #222;
@PickerColumns-title-lineHeight: 1.5;
@PickerColumns-action-padding: 0 @gap-md;
@PickerColumns-action-fontSize: @font-size-lg;
@PickerColumns-confirmAction-color: #2468f2;
@PickerColumns-cancelAction-color: #666;
@PickerColumns-option-fontSize: @font-size-lg;
@PickerColumns-optionText-color: var(--color-text-1);
@PickerColumns-optionDisabled-opacity: 0.3;
@PickerColumns-loadingIcon-color: @icon-color;
@PickerColumns-loadingMask-Color: rgba(255, 255, 255, 0.9);

// PopOver
@PopOver-bg: var(--color-bg-2);
@PopOverAble-iconColor: inherit;
@PopOverAble-onHover-iconColor: inherit;

// PopUp
@PopUp-cancelAction-color: #666;

// Switch
@Switch-bgColor: @gray-6;
@Switch-borderColor: darken(@gray-6, 10%);
@Switch-onActive-bgColor: var(--primary-5);
@Switch-onDisabled-bgColor: #ccc;
@Switch-onDisabled-circle-BackgroundColor: var(--color-bg-2);
@Switch-onDisabled-color: var(--color-bg-2);
@Switch-valueColor: var(--color-bg-2);

// Calendar
@Calendar-btn-bg: var(--primary-5);
@Calendar-borderColor: var(--primary-5);
@Calendar-btn-border: @Calendar-btn-bg;
@Calendar-btn-borderRadius: @Button-borderRadius;
@Calendar-btn-color: var(--color-bg-2);
@Calendar-btn-fontSize: @font-size-sm;
@Calendar-btn-height: 30px;
@Calendar-btn-lineHeight: @line-height-base;
@Calendar-btn-onActive-bg: var(--info-onActive);
@Calendar-btn-onActive-border: var(--info-onHover-border);
@Calendar-btn-onActive-color: @Calendar-btn-color;
@Calendar-btn-onHover-bg: var(--info-onHover);
@Calendar-btn-onHover-border: var(--info-onActive);
@Calendar-btn-onHover-color: @Calendar-btn-color;
@Calendar-btn-paddingX: 10px;
@Calendar-btn-paddingY: calc(
  (@Calendar-btn-height - @Calendar-btn-lineHeight * @Calendar-btn-fontSize) / 2
);
@Calendar-btnCancel-bg: @light;
@Calendar-btnCancel-border: @Button--default-border;
@Calendar-btnCancel-borderRadius: @Button-borderRadius;
@Calendar-btnCancel-color: var(--color-text-1);
@Calendar-btnCancel-onActive-bg: @Button--default-onActive-bg;
@Calendar-btnCancel-onActive-border: @Button--default-onActive-border;
@Calendar-btnCancel-onActive-color: @Button--default-onActive-color;
@Calendar-btnCancel-onHover-bg: @Button--default-onHover-bg;
@Calendar-btnCancel-onHover-border: @Button--default-onHover-border;
@Calendar-btnCancel-onHover-color: @Button--default-onHover-color;
@Calendar-cell-bg: var(--color-bg-2);
@Calendar-cell-onActive-bg: var(--primary-5);
// @Calendar-cell-onBetween-bg: rgba(@blue-6, 0.1);
@Calendar-cell-onBetween-bg: var(--primary-1);
@Calendar-cell-onDisabled-bg: @light;
@Calendar-cell-onHover-bg: var(--color-fill-3);
@Calendar-color: var(--color-text-1);
@Calendar-fontSize: @font-size-ssm;
@Calendar-input-borderColor: var(--color-border);
@Calendar-input-borderRadius: @border-radius;
@Calendar-input-color: var(--primary-5);
@Calendar-input-fontSize: @font-size-ssm;
@Calendar-input-height: 30px;
@Calendar-input-lineHeight: @line-height-base;
@Calendar-input-onFocused-borderColor: var(--primary-5);
@Calendar-input-paddingX: 10px;
@Calendar-input-paddingY: calc(
  (@Calendar-input-height - @Calendar-input-lineHeight * @Calendar-input-fontSize) / 2
);
@Calendar-shortcut-color: var(--primary-5);
@Calendar-shortcut-decoration: none;
@Calendar-shortcut-onHover-color: var(--info-shortcut-onHover-color);
@Calendar-shortcut-onHover-decoration: none;
@Calendar-shortcuts-bg: transparent;
@Calendar-shortcuts-height: 30px;
@Calendar-wLabel-color: #999;

@Calendar-icon-bottom: -4px;
@Calendar-icon-width: 10px;
@Calendar-icon-height: 10px;
@Calendar-borderWidth: 1px;
@Calendar-rdt-day: 100px;
@Calendar-schedule-content-padding: 0 4px;
@Calendar-schedule-content-height: 20px;
@Calendar-schedule-content-color: var(--color-bg-2);

// DatePicker
@DatePicker-bg: var(--color-bg-2);
@DatePicker-borderColor: @Form-input-borderColor;
@DatePicker-borderRadius: @Form-input-borderRadius;
@DatePicker-borderWidth: @Form-input-borderWidth;
@DatePicker-color: @Form-input-color;
@DatePicker-fontSize: @Form-input-fontSize;
@DatePicker-header-select-borderColor: var(--color-bg-2);
@DatePicker-height: @Form-input-height;
@DatePicker-iconColor: @icon-color;
@DatePicker-lineHeight: @Form-input-lineHeight;
@DatePicker-onFocused-borderColor: @Form-input-onFocused-borderColor;
@DatePicker-onHover-bg: @DatePicker-bg;
@DatePicker-onHover-borderColor: @Form-input-onFocused-borderColor;
@DatePicker-onHover-iconColor: @icon-onHover-color;
@DatePicker-paddingX: 8px;
@DatePicker-paddingY: calc(
  (@DatePicker-height - @DatePicker-lineHeight * @DatePicker-fontSize) / 2 - @DatePicker-borderWidth
);
@DatePicker-placeholderColor: @Form-input-placeholderColor;

// Breadcrumb

@Breadcrumb-item-fontSize: @font-size-md;
@Breadcrumb-item-default-color: @gray-5;
@Breadcrumb-item-hover-color: @blue-5;
@Breadcrumb-item-active-color: @blue-4;
@Breadcrumb-item-last-color: #151a26;
@BreadcrumbDropdown-item-default-color: @blue-2;
@BreadcrumbDropdown-item-default-bg: @blue-6;
@BreadcrumbDropdown-item-hover-bg: @blue-4;
@Breadcrumb-item-disabled-color: @gray-6;
@BreadcrumbDropdown-item-fontSize: @font-size-sm;
@BreadcrumbDropdown-item-height: 32px;
@BreadcrumbDropdown-item-paddingX: @gap-sm;
@BreadcrumbDropdown-item-paddingY: calc((@BreadcrumbDropdown-item-height - @font-size-sm) / 2);

// Number
@Number-bg: @Form-input-bg;
@Number-borderColor: #d5d4d9;
@Number-borderRadius: @Form-input-borderRadius;
@Number-borderWidth: 1px;
@Number-handler--up-transform: rotate(180deg);
@Number-handler-bg: var(--color-bg-2);
@Number-handler-borderBottom: 1px solid @Form-input-borderColor;
@Number-handler-color: @Form-input-color;
@Number-handler-fontFamily: 'iconfont';
@Number-handler-onActive-bg: @Number-handler-onHover-bg;
@Number-handler-onDisabled-bg: @Form-input-onDisabled-bg;
@Number-onDisabled-bg: @Form-input-onDisabled-bg;
@Number-handler-width: 22px;
@Number-handler-onHover-color: var(--color-text-1);

@Number-handler-onDisabled-color: @text--muted-color;
@Number-handler-onHover-bg: var(--color-bg-2);
@Number-handler-fontSize: 8px;

// Table
@Table--unsaved-heading-bg: #e8f0fe;
@Table--unsaved-heading-color: #4285f4;
@Table-bg: var(--color-bg-2);
@Table-borderColor: var(--color-border);
@Table-borderRadius: var(--border-radius);
@Table-borderWidth: 1px;
@Table-color: var(--color-text-1);
@Table-expandBtn-color: var(--primary-5);
@Table-fixed-zIndex: 5;
@Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15);
@Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15);
@Table-fixedTop-boxShadow: var(--boxShadow);
@Table-fontSize: @font-size-ssm;
@Table-heading-bg: var(--color-bg-2);
@Table-heading-height: 40px;
@Table-lineHeight: var(--lineHeightBase);
@Table-onChecked-bg: var(--primary-1);
@Table-onChecked-borderColor: darken(#d9f3fb, 10%);
@Table-onChecked-color: darken(#d9f3fb, 40%);
@Table-onDragging-opacity: 0.1;
// 背景用到了 rgba，所以必须再提供这种写法，搜一下这个变量就知道为什么了
@Table-onHover-bg-rgb: 243, 246, 246;
@Table-onHover-bg: var(--color-fill-1);
@Table-onHover-borderColor: var(--color-fill-3);
@Table-onHover-boxShadow: var(--boxShadow);
@Table-onHover-color: var(--color-text-1);
@Table-onModified-bg: #e8f0fe;
@Table-onModified-borderColor: darken(#e8f0fe, 5%);
@Table-onModified-color: #4285f4;
@Table-placeholder-height: 100px;
@Table-strip-bg: var(--color-fill-3);
@Table-tbody-borderTopColor: var(--color-fill-3);
// @Table-thead-bg: var(--Table-thead-bg);
@Table-thead-bg: var(--color-bg-2);
@Table-thead-borderColor: @Table-borderColor;
@Table-thead-borderWidth: @Table-borderWidth;
@Table-thead-color: @text--loud-color;
@Table-thead-fontSize: @font-size-ssm;
@Table-thead-iconColor: var(--icon-color);
@Table-toolbar-marginX: 0;
@Table-toolbar-marginY: 0;
@Table-action-marginY: @gap-sm;
@Table-tree-borderColor: @Table-borderColor;
@Table-searchableForm-backgroundColor: #f6f7f8;
@Table-searchableForm-borderRadius: 4px;

@TableCell--edge-paddingX: @gap-md;
@TableCell-filterBtn--onActive-color: var(--primary-color);
@TableCell-filterBtn-width: 16px;
@TableCell-filterPopOver-dropDownItem-height: 34px;
@TableCell-filterPopOver-dropDownItem-padding: 0 12px;
@TableCell-height: 40px;
@TableCell-paddingX: @gap-base;
@TableCell-paddingY: 8px;
@TableCell-searchBtn--onActive-color: var(--primary-color);
@TableCell-searchBtn-width: 16px;
@TableCell-sortBtn--default-onActive-opacity: 1;
@TableCell-sortBtn--default-opacity: 0;
@TableCell-sortBtn--onActive-color: var(--primary-color);
@TableCell-sortBtn-width: 8px;

@ColumnToggler-backgroundColor: var(--color-bg-2);
@ColumnToggler-borderRadius: 4px;
@ColumnToggler-lineHeight: 24px;
@ColumnToggler-title-fontColor: #080e1a;
@ColumnToggler-fontColor: #151a26;
@ColumnToggler-item-backgroundColor: #f6f7f8;
@ColumnToggler-item-backgroundColor-onHover: rgba(36, 104, 242, 0.1);

// pagination
@Pagination-height: 24px;
@Pagination-minWidth: 24px;
@Pagination-padding: auto 4px;
@Pagination-fontSize: @font-size-ssm;
@Pagination-onActive-backgroundColor: var(--primary-color);
@Pagination-onActive-border: 0;
@Pagination-onActive-color: var(--color-bg-2);

// Tabs
@Tabs--card-bg: #f6f8f8;
@Tabs--card-borderTopColor: var(--color-border);
@Tabs--card-linkMargin: 0 10px 0 0;
@Tabs--card-linkPadding: 10px 10px;
@Tabs--card-onActive-bg: var(--color-bg-2);
@Tabs--card-onActive-borderColor: var(--color-border);
@Tabs--card-padding: 6px 0 0 10px;
@Tabs--card-add-gap: @gap-md;
@Tabs--card-add-gap-top: 7px;
@Tabs--card-arrow-gap: @gap-sm;
@Tabs--line-borderColor: var(--color-border);
@Tabs--line-borderWidth: 2px;
@Tabs--line-content-bg: transparent;
@Tabs--line-content-padding: @gap-base 0;
@Tabs--line-linkMargin: 0 32px 0 0;
@Tabs--line-linkPadding: 0 0 8px;
@Tabs--line-addPadding: 0 0 10px;
@Tabs--line-padding: @gap-md;
@Tabs--line-onHover-borderColor: var(--primary-color);
@Tabs--line-onHover-color: var(--primary-color);
@Tabs--radio-bg: #eaf6fe;
@Tabs--vertical-onActive-borderColor: var(--primary-color);
@Tabs--tiled-add-gap: @gap-base;
@Tabs--simple-split-width: 1px;
@Tabs--strong-add-size: 32px;
@Tabs--strong-arrow-size: 24px;

@Tabs-borderColor: var(--color-border);
@Tabs--simple-split-color: @Tabs-borderColor;
@Tabs-borderRadius: var(--borderRadius);
@Tabs-borderWidth: 1px;
@Tabs-color: var(--color-text-1);
@Tabs-content-bg: var(--color-bg-2);
@Tabs-linkFontSize: @font-size-ssm;
@Tabs-linkMargin: 0 3px 0 0;
@Tabs-linkPadding: @gap-sm @gap-base;
@Tabs-onActive-bg: var(--color-bg-2);
@Tabs-onActive-borderColor: var(--color-border);
@Tabs-onActive-color: @gray-7;
@Tabs-onDisabled-color: @gray-6;
@Tabs-onHover-borderColor: @gray-2;
@Tabs-add-icon-size: 15px;
@Tabs-add-icon-padding: 1px;
@Tabs-add-icon-margin: @gap-xs;
@Tabs-add-margin: @gap-lg;
@Tabs-gray-color: #83868c;
@Tabs-close-margin: @gap-xs;
@Tabs-close-marginTop: 1px;
@Tabs-close-size: 12px;
@Tabs-link-maxWidth: 160px;

@Tabs--sidebar-sideWidth: 62px;
@Tabs--sidebar-sidePadding: 27px;
@Tabs--sidebar-sideMargin: 0 0 22px 0;
@Tabs--sidebar-iconSize: 24px;
@Tabs--sidebar-iconMargin: 5px;

// @Tabs--vertical-bg: var(--Table-thead-bg);
@Tabs--vertical-bg: @gray-2;
@Tabs--vertical-width: 140px;
@Tabs--vertical-onActive-color: var(--primary-color);
@Tabs--vertical-onActive-border: var(--primary-color);
@Tabs--vertical-onActive-bg: @Tabs--vertical-bg;
@Tabs--vertical-onActive-borderWidth: 0 0 0 4px;
@Tabs--vertical-onActive-container-borderRight: none;
@Tabs--vertical-onActive-container-bg: @Tabs--vertical-bg;
@Tabs--chrome-onHover-bg: #f6f7f8;
@Tabs--chrome-bg: #e7eaed;
@Tabs--chrome-radius-size: 8px;
@Tabs--chrome-right-boder-color: var(--borderColorDarken);

// Remark
// @Remark-bg: #fff;
// @Remark-borderColor: var(--color-border);
// @Remark-borderWidth: 1px;
@Remark-icon-fontSize: @font-size-ssm;
// @Remark-iconColor: var(--icon-color);
// @Remark-marginLeft: @gap-sm;
// @Remark-onHover-bg: var(--primary);
// @Remark-onHover-borderColor: var(--primary);
// @Remark-onHover-iconColor: #fff;
// @Remark-width: 1rem;

// Transfer
@Transfer2-title-bg: #f6f8f8;
@TabsTransfer-title-bg: var(--color-fill-1);
@TabsTransfer-border-color: var(--color-border);

// FileControl
// @FileControl-danger-color: var(--danger-color);
// @FileControl-drag-color: var(--color-text-1);
// @FileControl-border-color: var(--color-border);
// @FileControl-onDisabled-color: #b8babf;
// @FileControl-onDisabled-bg: var(--color-fill-1);
// @FileControl-onHover-bg: #f2f2f4;
// @FileControl-icon-color: #84868c;
// @FileControl-icon-onHover-color: #5c5f66;
// @FileControl-progress-borderRadius: 0;

// Tree
@Tree-indent: @gap-md;
// @Tree-icon-gap: @gap-xs;
@Tree-icon-margin-right: @gap-xs;
@Tree-inputHeight: calc(@Form-input-height * 0.85);
@Tree-item-onHover-bg: var(--primary-1);
@Tree-itemArrowWidth: 16px;
// @Tree-itemHeight: 30px;
@Tree-itemLabel--onChecked-color: @Form-selectValue-color;
// @Tree-item-onHover-bg-pure: @Tree-item-onHover-bg;
@Tree-item-text-top: 4px;
@Tree-item-arrow-padding-left: 4px;
@Tree-item-onChekced-bg: @Tree-item-onHover-bg;
@Tree-item-onChekced-bg-borderRadius: @border-radius;
@Tree-itemHeight: 24px;
@Tree-icon-gap: @gap-xs;

// ResultBox
@ResultBox-icon--onDisabled-color: var(--color-text-3);
@ResultBox-icon--onHover-color: var(--text-onHover);
@ResultBox-icon-color: var(--color-text-1);
@ResultBox-value--onDisabled-color: var(--color-text-3);
@ResultBox-value--onHover-bg: var(--color-fill-3);
@ResultBox-value-bg: var(--color-fill-2);
@ResultBox-value-color: var(--color-text-1);
@ResultBox-value-clear-bg: #d4d6d9;
@ResultBox-value-clear-hover-bg: #f5f5f5;

// listMenu
@ListMenu--onActive-borderColor: var(--primary-5);
@ListMenu-borderRadius: 2px;
@ListMenu-borderWidth: 1px;
@ListMenu-bordrColor: var(--color-border);
@ListMenu-divider-color: var(--border-color-light);
@ListMenu-item--onActive-bg: transparent;
@ListMenu-item--onActive-color: var(--primary-5);
@ListMenu-item--onDisabled-bg: transparent;
@ListMenu-item--onDisabled-color: @text--muted-color;
@listMenu-item--onHover-bg: rgba(0, 126, 255, 0.08);
@ListMenu-item--onHover-color: var(--primary-5);
@ListMenu-item-bg: var(--color-bg-2);
@ListMenu-item-color: var(--color-text-1);
@ListMenu-item-height: 34px;

// Spinner
@Spinner--lg-height: 50px;
@Spinner--lg-width: 50px;
@Spinner--sm-height: 16px;
@Spinner--sm-width: 16px;
@Spinner-height: 26px;
@Spinner-overlay-bg: rgba(255, 255, 255, 0.4);
@Spinner-width: 26px;

@ImageControl-addBtn-bg: @Button--default-bg;
@ImageControl-addBtn-border: @Button--default-border;
@ImageControl-addBtn-borderRadius: 0;
@ImageControl-addBtn-color: rgb(132, 135, 140);
@ImageControl-addBtn-onActive-bg: var(--color-bg-2);
@ImageControl-addBtn-onActive-border: var(--primary-color);
@ImageControl-addBtn-onActive-color: @ImageControl-addBtn-color;
@ImageControl-addBtn-onDisabled-bg: @Form-input-onDisabled-bg;
@ImageControl-addBtn-onDisabled-border: @Form-input-onDisabled-borderColor;
@ImageControl-addBtn-onDisabled-color: @text--muted-color;
@ImageControl-addBtn-onHover-bg: var(--color-bg-2);
@ImageControl-addBtn-onHover-border: var(--primary-color);
@ImageControl-addBtn-onHover-color: @Button--default-color;
@ImageControl-progress-borderRadius: 0;

// @FileControl-danger-color: var(--danger-color);
// @FileControl-drag-color: var(--color-text-1);
// @FileControl-border-color: var(--color-border);
// @FileControl-onDisabled-color: var(--color-fill-2);
// @FileControl-onDisabled-bg: var(--color-fill-2);
// @FileControl-onHover-bg: #f2f2f4;
@FileControl-icon-color: var(--color-text-1);
// @FileControl-icon-onHover-color: var(--text-onHover);
// @FileControl-progress-borderRadius: 0;

// Quick-static
@Quick-static-color: var(--color-text-1);
@QuickStatic-placeholder-color: @text--muted-color;
@QuickStatic-borderWidth: 0;
@QuickStatic-minHeight: @DatePicker-height;
@QuickStatic-fontSize: @Form-input-fontSize;
@QuickStatic-paddingY: calc(
  (@DatePicker-height - @DatePicker-lineHeight * @DatePicker-fontSize) / 2 - @DatePicker-borderWidth
);
@QuickStatic-paddingX: 8px;

// Taskboard
@Taskboard-head-bg: var(--secondary-onBetween-fade);
@Taskboard-head-padding: 10px 1em;
@Taskboard-fontSize: @font-size-sm;
@Taskboard-main-color: @font-size-sm;
@Taskboard-submain-color: @gray-8;
@taskboard-card-selected-background: #fff9eb;
@taskboard-card-fontSize: 14px;
// @taskboard-taskdrag-drop-background: #e3e3e3;
@taskboard-taskdrag-drop-background: @gray-4;
@taskboard-taskdrag-drop-border: 1px dashed var(--secondary-onHover-border);

// InputColor
@InputColor-bg: var(--color-bg-2);
@InputColor-borderColor: @Form-input-borderColor;
@InputColor-borderRadius: @border-radius;
@InputColor-borderWidth: @border-width;
@InputColor-color: var(--color-text-1);
@InputColor-fontSize: @Form-input-fontSize;
@InputColor-height: @Form-input-height;
@InputColor-lineHeight: @Form-input-lineHeight;
@InputColor-onDisabled-bg: #e9e8eb;
// @InputColor-onDisabled-bg:     @colors-neutral-fill-8;
@InputColor-onDisabled-color: @text--muted-color;
@InputColor-onFocused-borderColor: @Form-input-onFocused-borderColor;
@InputColor-onHover-bg: var(--color-fill-3);
// @InputColor-onHover-bg: @colors-neutral-fill-11;
@InputColor-onHover-borderColor: var(--color-border-3);
// @InputColor-onHover-borderColor: @colors-brand-5;
@InputColor-paddingX: 8px;
@InputColor-paddingY: calc(
  (@InputColor-height - @InputColor-lineHeight * @InputColor-fontSize) / 2 - @InputColor-borderWidth
);
@InputColor-placeholderColor: var(--color-text-3);
// @InputColor-placeholderColor: @colors-neutral-text-6;
@InputColor-boxShadow: @box-shadow-sm;

// Collapse

@collapse-default-top-border-color: var(--color-border);
@collapse-default-top-border-width: 1px;
@collapse-default-top-border-style: solid;
@collapse-default-right-border-color: var(--color-border);
@collapse-default-right-border-width: 1px;
@collapse-default-right-border-style: solid;
@collapse-default-bottom-border-color: var(--color-border);
@collapse-default-bottom-border-width: 1px;
@collapse-default-bottom-border-style: solid;
@collapse-default-left-border-color: var(--color-border);
@collapse-default-left-border-width: 1px;
@collapse-default-left-border-style: solid;
@collapse-default-top-right-border-radius: var(--border-radius);
@collapse-default-top-left-border-radius: var(--border-radius);
@collapse-default-bottom-right-border-radius: var(--border-radius);
@collapse-default-bottom-left-border-radius: var(--border-radius);
@collapse-default-header-paddingTop: @font-size-base;
@collapse-default-header-paddingBottom: @font-size-base;
@collapse-default-header-paddingLeft: @font-size-base;
@collapse-default-header-paddingRight: @font-size-base;
@collapse-default-header-color: var(--color-text-1);
@collapse-default-header-fontSize: @font-size-ssm;
@collapse-default-header-fontWeight: @font-weight-base;
@collapse-default-header-lineHeight: @line-height-base;

@collapse-default-header-bg-color: var(--color-bg-2);

@collapse-default-header-hover-bg-color: var(--color-fill-3);
@collapse-default-header-hover-color: var(--text-onHover);
@collapse-default-disabled-header-bg-color: var(--color-fill-2);
@collapse-default-disabled-color: var(--color-text-3);
@collapse-default-content-color: var(--color-text-1);
@collapse-default-content-fontSize: @font-size-sm;
@collapse-default-content-fontWeight: @font-weight-base;
@collapse-default-content-lineHeight: @line-height-base;
@collapse-default-bg-color: transparent;
@collapse-icon-icon: '<svg viewBox="0 0 99 176" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(-0.132812, 0.304688)" fill="currentColor" fill-rule="nonzero"><path d="M95.6353697,79.4031346 C95.3433678,79.1111326 95.037575,78.8417152 94.7219891,78.5906854 L19.819373,3.29993262 C15.6492004,-0.870040234 8.88818437,-0.870040234 4.71821172,3.29993262 C0.548238867,7.47010527 0.548238867,14.2309215 4.71821172,18.4010939 L72.9329621,87.0041811 L3.25320488,156.617783 C-0.916767969,160.787956 -0.916767969,167.548772 3.25320488,171.719144 C7.42317773,175.889117 14.1841937,175.889117 18.3543662,171.719144 L94.7211895,95.4180764 C95.0369754,95.1668467 95.342968,94.8976293 95.6351697,94.6054273 C97.7329475,92.5076496 98.7744412,89.7539166 98.7615739,87.0043809 C98.7746414,84.2544453 97.7331475,81.5009123 95.6353697,79.4031346 Z" id="路径"></path></g></svg>';
@collapse-icon-size: @font-size-xs;
@collapse-icon-color: var(--color-text-1);
@collapse-icon-margin: @gap-sm;
@collapse-icon-rotate: 90deg;
@Collapse-header-fontSize: @collapse-default-header-fontSize;
@Collapse-header-fontWeight: @collapse-default-header-fontWeight;
@Collapse-header-padding: @gap-sm;
@Collapse-header-bg: @collapse-default-header-bg-color;
@Collapse-header-onHover-bg: @collapse-default-header-hover-bg-color;
@Collapse-header-collapsed-borderTop: none;
@Collapse-header-collapsed-borderBottom: none;
@Collapse-header-wrapper-direction: row-reverse;
@Collapse-header-bg-disabled-color: var(--color-fill-2);

@Collapse-content-padding: @gap-sm;
@Collapse-content-color: @collapse-default-content-color;
@Collapse-content-fontSize: @collapse-default-content-fontSize;
@Collapse-content-fontWeight: @collapse-default-content-fontWeight;

// Result
@Result-title-size: @font-size-lg;
@Result-subTitle-size: @font-size-ssm;
@Result-subTitle-color: @gray-8; //颜色
// 表单

@Form-item-gap: @gap-xl;
@Form-item-color: var(--color-text-1);
@Form-item-fontColor: @Form-item-color;
@Form-item-fontSize: @font-size-ssm;
@Form-item-fontWeight: @font-weight-base;
@Form-item-lineHeight: @line-height-base;
@Form-item-star-color: var(--danger-6);
@Form-item-star-size: @font-size-sm;
@Form-description-color: var(--text-color-description);
@Form-description-fontSize: @font-size-sm;
@Form-description-fontWeight: @font-weight-base;
@Form-description-lineHeight: @line-height-base;
@Form-description-gap: @gap-xs;
@Form-item-onError-color: var(--danger-6);
@Form-item-onError-borderColor: var(--danger-6);
@Form-item-onError-bg: var(--color-bg-2);
@Form-feedBack-color: var(--danger-6);
@Form-feedBack-fontSize: @font-size-sm;
@Form-feedBack-fontWeight: @font-weight-base;
@Form-feedBack-lineHeight: @line-height-base;
@Form-feedBack-gap: @gap-xs;
@Form-mode-default-labelGap: @gap-sm;
@Form-mode-default-width: 100%;
@Form--horizontal-label-gap: @font-size-base;
@Form--horizontal-label-widthBase: 98px;
@Form--horizontal-label-widthXs: 50px;
@Form--horizontal-label-widthSm: 70px;
@Form--horizontal-label-widthMd: 80px;
@Form--horizontal-label-widthLg: 126px;
@Form--horizontal-value-marginTop: 0;
@Form--horizontal-value-marginBottom: 0;
@Form--horizontal-value-marginLeft: @gap-sm;
@Form--horizontal-value-marginRight: 0;
@Form--horizontal-value-maxWidth: 100%;
@Form--horizontal-value-minWidth: 0;
@Form--horizontal-value-minWidth: 0;
@Form-mode-inline-item-gap: @font-size-base;
@Form-mode-inline-label-gap: @font-size-base;

@import './old-base.less';
@import './old-input.less';