/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
@import '../color/colors';

// 适用于明亮主题

@theme: variable;

// The prefix to use on all css classes from wd.
@wd-prefix: wd;

// An override for the html selector for theme prefixes
@html-selector: html;

@base-primary: @blue-600;
@gray-150: #e7e8ef;
@gray-600-40: fade(@gray-600, 40%);

html {
  // ========= Primary Color =========
  --@{wd-prefix}-brand-primary: @base-primary;
  --@{wd-prefix}-brand-hover: @blue-500;
  --@{wd-prefix}-brand-active: @blue-700;
  --@{wd-prefix}-brand-primary-outline: fade(@base-primary, @outline-fade); // 非自主定义的
  --@{wd-prefix}-brand-disable: @blue-200;
  --@{wd-prefix}-brand-extra-light: @blue-sp-8;
  --@{wd-prefix}-brand-lighter: @blue-sp-30;
  --@{wd-prefix}-brand-text: @blue-600;
  --@{wd-prefix}-brand-light: @blue-sp-18;

  // Legacy
  @legacy-primary-1: @blue-100;

  --@{wd-prefix}-primary-1: @legacy-primary-1;
  --@{wd-prefix}-primary-2: color(~`colorPalette('@{base-primary}', 2) `);
  --@{wd-prefix}-primary-3: color(~`colorPalette('@{base-primary}', 3) `);
  --@{wd-prefix}-primary-4: color(~`colorPalette('@{base-primary}', 4) `);
  --@{wd-prefix}-primary-5: color(~`colorPalette('@{base-primary}', 5) `);
  --@{wd-prefix}-primary-6: @base-primary;
  --@{wd-prefix}-primary-7: color(~`colorPalette('@{base-primary}', 7) `);

  // Deprecated
  --@{wd-prefix}-brand-primary-deprecated-pure: ~'';
  --@{wd-prefix}-brand-primary-deprecated-l-35: lighten(@base-primary, 35%);
  --@{wd-prefix}-brand-primary-deprecated-l-20: lighten(@base-primary, 20%);
  --@{wd-prefix}-brand-primary-deprecated-t-20: tint(@base-primary, 20%);
  --@{wd-prefix}-brand-primary-deprecated-t-50: tint(@base-primary, 50%);
  --@{wd-prefix}-brand-primary-deprecated-f-12: fade(@base-primary, 12%);
  --@{wd-prefix}-brand-primary-active-deprecated-f-30: fade(@legacy-primary-1, 30%);
  --@{wd-prefix}-brand-primary-active-deprecated-d-02: darken(@legacy-primary-1, 2%);

  // ========= Success Color =========
  --@{wd-prefix}-fluctuation-fall-fall: @green-500;
  --@{wd-prefix}-fluctuation-fall-hover: @green-400;
  --@{wd-prefix}-fluctuation-fall-active: @green-600;
  --@{wd-prefix}-fluctuation-fall-disable: @green-200;
  --@{wd-prefix}-fluctuation-fall-light-1: @green-sp-6;
  --@{wd-prefix}-fluctuation-fall-light-2: @green-100;
  --@{wd-prefix}-fluctuation-fall-text: @green-700;
  --@{wd-prefix}-fluctuation-fall-fall-outline: fade(@green-6, @outline-fade);
  --@{wd-prefix}-fluctuation-fall-deprecated-bg: ~`colorPalette('@{green-6}', 1) `;
  --@{wd-prefix}-fluctuation-fall-deprecated-border: ~`colorPalette('@{green-6}', 3) `;

  // ========== rise Color ==========
  --@{wd-prefix}-fluctuation-rise-rise: @red-500;
  --@{wd-prefix}-fluctuation-rise-hover: @red-400;
  --@{wd-prefix}-fluctuation-rise-active: @red-600;
  --@{wd-prefix}-fluctuation-rise-disable: @red-200;
  --@{wd-prefix}-fluctuation-rise-light-1: @red-sp-6;
  --@{wd-prefix}-fluctuation-rise-light-2: @red-100;
  --@{wd-prefix}-fluctuation-rise-text: @red-700;
  --@{wd-prefix}-fluctuation-rise-rise-outline: fade(@red-5, @outline-fade);
  --@{wd-prefix}-fluctuation-rise-rise-deprecated-bg: ~`colorPalette('@{red-5}', 1) `;
  --@{wd-prefix}-fluctuation-rise-rise-deprecated-border: ~`colorPalette('@{red-5}', 3) `;

  // ========= Warning Color =========
  --@{wd-prefix}-trade-selling-sellinging: @orange-500;
  --@{wd-prefix}-trade-selling-hover: @orange-400;
  --@{wd-prefix}-trade-selling-active: @orange-600;
  --@{wd-prefix}-trade-selling-disable: @orange-200;
  --@{wd-prefix}-trade-selling-light-1: @orange-sp-4;
  --@{wd-prefix}-trade-selling-light-2: @orange-100;
  --@{wd-prefix}-trade-selling-text: @orange-600;

  --@{wd-prefix}-trade-selling-sellinging-outline: fade(@gold-6, @outline-fade);
  --@{wd-prefix}-trade-selling-sellinging-deprecated-bg: ~`colorPalette('@{gold-6}', 1) `;
  --@{wd-prefix}-trade-selling-sellinging-deprecated-border: ~`colorPalette('@{gold-6}', 3) `;

  // ========== Info Color ===========
  --@{wd-prefix}-trade-buy-buy: @blue-500;
  --@{wd-prefix}-trade-buy-hover: @blue-400;
  --@{wd-prefix}-trade-buy-active: @blue-600;
  --@{wd-prefix}-trade-buy-disable: @blue-200;
  --@{wd-prefix}-trade-buy-light-1: @blue-sp-6;
  --@{wd-prefix}-trade-buy-light-2: @blue-100;
  --@{wd-prefix}-trade-buy-text: @blue-600;
  --@{wd-prefix}-trade-buy-buy-deprecated-bg: ~`colorPalette('@{base-primary}', 1) `;
  --@{wd-prefix}-trade-buy-buy-deprecated-border: ~`colorPalette('@{base-primary}', 3) `;

  // =========== Gray Color ===========
  --@{wd-prefix}-fluctuation-flat-flat: @gray-400;
  --@{wd-prefix}-fluctuation-flat-hover: @gray-300;
  --@{wd-prefix}-fluctuation-flat-active: @gray-500;
  --@{wd-prefix}-fluctuation-flat-disable: @gray-200;
  --@{wd-prefix}-fluctuation-flat-light-1: @gray-50;
  --@{wd-prefix}-fluctuation-flat-light-2: @gray-100;
  --@{wd-prefix}-fluctuation-flat-text: @gray-700;

  // ========== Text Color ===========
  --@{wd-prefix}-text-primary: @gray-900;
  --@{wd-prefix}-text-secondary: @gray-600;
  --@{wd-prefix}-text-tertiary: @gray-500;
  --@{wd-prefix}-text-disable: @gray-300;
  --@{wd-prefix}-text-white: @gray-1000;
  --@{wd-prefix}-text-white-disable: @gray-1000;
  --@{wd-prefix}-text-tab: @blue-600;

  // ========== Background Color ===========
  --@{wd-prefix}-bg-dialog: @gray-1000;
  --@{wd-prefix}-bg-tooltip: @gray-1000;
  --@{wd-prefix}-bg-dropdown: @gray-1000;
  --@{wd-prefix}-bg-page: @gray-1000;
  --@{wd-prefix}-bg-base: @gray-150;
  // loading 背景色 token
  --@{wd-prefix}-bg-page-90: fade(@gray-1000, 90%);

  // ========== Icon Color ===========
  --@{wd-prefix}-icon-tertiary: @gray-500;
  --@{wd-prefix}-icon-secondary: @gray-600;
  --@{wd-prefix}-icon-primary: @gray-900;
  --@{wd-prefix}-icon-disable: @gray-300;
  --@{wd-prefix}-icon-white: @gray-1000;
  --@{wd-prefix}-icon-white-disable: @gray-1000;

  // ========== Line Color ===========
  --@{wd-prefix}-line-table: fade(@gray-100, 80%);
  --@{wd-prefix}-line-devide: @gray-150;
  --@{wd-prefix}-line-border: @gray-200;

  // ========== filled Color ===========
  --@{wd-prefix}-fill-blank: @gray-1000;
  --@{wd-prefix}-fill-blank-lighter: @gray-1000;
  --@{wd-prefix}-fill-fill: @gray-50;
  --@{wd-prefix}-fill-fill-deep: @gray-sp-12;
  --@{wd-prefix}-fill-fill-deeper: @gray-sp-16;
  // 新增
  --@{wd-prefix}-fill-white: @gray-1000;
  --@{wd-prefix}-fill-black: @gray-00;
  --@{wd-prefix}-fill-fill-light: @gray-sp-4;
  --@{wd-prefix}-fill-fill-even-deeper: @gray-sp-18;
  --@{wd-prefix}-fill-fill-much-deeper: @gray-sp-20;

  // ========== Special Color ===========
  --@{wd-prefix}-sp-shadow: @gray-00;
  --@{wd-prefix}-sp-scroll-bar: @gray-sp-16;
  --@{wd-prefix}-sp-overlay: @gray-600-40;
  --@{wd-prefix}-sp-sider: @gray-150;
  --@{wd-prefix}-sp-hover-bar: @gray-500-10;
  --@{wd-prefix}-sp-hover-bar-active: @gray-500-20;
  --@{wd-prefix}-sp-tooltips: @gray-900;
  --@{wd-prefix}-sp-tooltips-text: @gray-1000;
  --@{wd-prefix}-sp-hover-bar-select: @blue-sp-t15;
  --@{wd-prefix}-sp-tb-hover-bar: @gray-50; // 与tb-color-hover-bar一致，只是名称修改了

  // ======= Table Color ==============
  --@{wd-prefix}-table-hover-bar: @gray-sp-6;
  --@{wd-prefix}-table-hover-bar-active: @gray-sp-12;
  --@{wd-prefix}-table-hover-bar-select: @blue-sp-8;

  // ========== Dorger Color ===========
  --@{wd-prefix}-charts-dorger-dorger: @dorger-500;
  --@{wd-prefix}-charts-dorger-text: @dorger-600;
  --@{wd-prefix}-charts-dorger-light: @dorger-50;
  // 新增
  --@{wd-prefix}-charts-dorger-light-alpha: @dorger-500-7;

  // ========== heliotrope Color ===========
  --@{wd-prefix}-charts-heliotrope-heliotrope: @heliotrope-500;
  --@{wd-prefix}-charts-heliotrope-text: @heliotrope-600;
  --@{wd-prefix}-charts-heliotrope-light: @heliotrope-50;
  // 新增
  --@{wd-prefix}-charts-heliotrope-light-alpha: @heliotrope-500-7;

  // ========== violet Color ===========
  --@{wd-prefix}-charts-violet-violet: @violet-500;
  --@{wd-prefix}-charts-violet-text: @violet-600;
  --@{wd-prefix}-charts-violet-light: @violet-50;
  // 新增
  --@{wd-prefix}-charts-violet-light-alpha: @violet-500-7;

  // ========== purple Color ===========
  --@{wd-prefix}-charts-purple-purple: @purple-500;
  --@{wd-prefix}-charts-purple-text: @purple-600;
  --@{wd-prefix}-charts-purple-light: @purple-50;
  // 新增
  --@{wd-prefix}-charts-purple-light-alpha: @purple-500-7;

  // ========== rosein Color ===========
  --@{wd-prefix}-charts-rosein-rosein: @rosein-500;
  --@{wd-prefix}-charts-rosein-text: @rosein-600;
  --@{wd-prefix}-charts-rosein-light: @rosein-50;
  // 新增
  --@{wd-prefix}-charts-rosein-light-alpha: @rosein-500-7;

  // ========== red Color ===========
  --@{wd-prefix}-charts-red-red: @red-500;
  --@{wd-prefix}-charts-red-text: @red-700;
  --@{wd-prefix}-charts-red-light: @red-50;
  --@{wd-prefix}-charts-red-foundation: @red-700;
  --@{wd-prefix}-charts-red-foundation-deep: @red-500;
  --@{wd-prefix}-charts-red-foundation-deeper: @red-300;
  --@{wd-prefix}-charts-red-foundation-even-deeper: @red-100;

  // 新增red
  --@{wd-prefix}-charts-red-heatmap: @red-400;
  --@{wd-prefix}-charts-red-heatmap-deep: @red-500;
  --@{wd-prefix}-charts-red-heatmap-deeper: @red-900;
  --@{wd-prefix}-charts-red-light-alpha: @red-500-7;

  // ========== sunset Color ===========
  --@{wd-prefix}-charts-sunset-sunset: @sunset-500;
  --@{wd-prefix}-charts-sunset-text: @sunset-600;
  --@{wd-prefix}-charts-sunset-light: @sunset-50;
  // 新增
  --@{wd-prefix}-charts-sunset-light-alpha: @sunset-500-7;

  // ========== sunglow Color ===========
  --@{wd-prefix}-charts-sunglow-sunglow: @sunglow-500;
  --@{wd-prefix}-charts-sunglow-text: @sunglow-700;
  --@{wd-prefix}-charts-sunglow-light: @sunglow-50;
  // 新增
  --@{wd-prefix}-charts-sunglow-light-alpha: @sunglow-500-7;

  // ========== shamrock Color ===========
  --@{wd-prefix}-charts-shamrock-shamrock: @shamrock-500;
  --@{wd-prefix}-charts-shamrock-text: @shamrock-600;
  --@{wd-prefix}-charts-shamrock-light: @shamrock-50;
  // 新增
  --@{wd-prefix}-charts-shamrock-light-alpha: @shamrock-500-7;

  // ========== green Color ===========
  --@{wd-prefix}-charts-green-green: @green-500;
  --@{wd-prefix}-charts-green-text: @green-700;
  --@{wd-prefix}-charts-green-light: @green-50;
  --@{wd-prefix}-charts-green-foundation: @green-700;
  --@{wd-prefix}-charts-green-foundation-deep: @green-500;
  --@{wd-prefix}-charts-green-foundation-deeper: @green-300;
  --@{wd-prefix}-charts-green-foundation-even-deeper: @green-100;
  // 新增green
  --@{wd-prefix}-charts-green-heatmap: @green-500;
  --@{wd-prefix}-charts-green-heatmap-deep: @green-700;
  --@{wd-prefix}-charts-green-heatmap-deeper: @green-900;
  --@{wd-prefix}-charts-green-light-alpha: @green-500-7;

  // ========== viking Color ===========
  --@{wd-prefix}-charts-viking-viking: @viking-500;
  --@{wd-prefix}-charts-viking-text: @viking-600;
  --@{wd-prefix}-charts-viking-light: @viking-50;
  // 新增
  --@{wd-prefix}-charts-viking-light-alpha: @viking-500-7;

  // ========== malibu Color ===========
  --@{wd-prefix}-charts-malibu-malibu: @malibu-500;
  --@{wd-prefix}-charts-malibu-text: @malibu-600;
  --@{wd-prefix}-charts-malibu-light: @malibu-50;
  // 新增
  --@{wd-prefix}-charts-maibu-light-alpha: @malibu-500-7;

  // ========== Gray Color ===========
  --@{wd-prefix}-charts-gray-gray: @gray-500;
  --@{wd-prefix}-charts-gray-text: @gray-600;
  --@{wd-prefix}-charts-gray-light: @gray-100;
  // 新增
  --@{wd-prefix}-charts-gray-light-alpha: @gray-500-7;

  // shadow
  --@{wd-prefix}-shadow-100-canvas: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
  --@{wd-prefix}-shadow-200-drop: 0px 0px 1px 0px rgba(0, 0, 0, 0.2),
    0px 8px 28px 4px rgba(0, 0, 0, 0.08), 0px 6px 12px 0px rgba(0, 0, 0, 0.05);
  --@{wd-prefix}-shadow-300-modal: 0px 6px 12px 0px rgba(0, 0, 0, 0.04),
    0px 9px 28px 4px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
  --@{wd-prefix}-shadow-module-top: 0px 2px 4px -1px rgba(0, 0, 0, 0.02),
    0px 4px 16px 0px rgba(0, 0, 0, 0.05), 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.05);
  --@{wd-prefix}-shadow-module-bottom: 0px -2px 4px -1px rgba(0, 0, 0, 0.02),
    0px -4px 16px 0px rgba(0, 0, 0, 0.05), 0px -0.5px 0px 0px rgba(0, 0, 0, 0.05);
  --@{wd-prefix}-shadow-module-right: 2px 0px 4px -1px rgba(0, 0, 0, 0.02),
    4px 0px 16px 0px rgba(0, 0, 0, 0.05);
  --@{wd-prefix}-shadow-module-left: -2px 0px 4px -1px rgba(0, 0, 0, 0.02),
    -4px 0px 16px 0px rgba(0, 0, 0, 0.05);
  --@{wd-prefix}-shadow-card-normal: 0px 2px 5px 0px rgba(29, 47, 92, 0.03),
    0px 2px 24px 0px rgba(29, 47, 92, 0.05), 0px 0px 1px 0px rgba(0, 0, 0, 0.18);
  --@{wd-prefix}-shadow-card-active: 0px 2px 5px 0px rgba(29, 47, 92, 0.03),
    0px 8px 24px 0px rgba(29, 47, 92, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.18);
  --@{wd-prefix}-shadow-tab: -20px 0px 10px 0px rgba(255, 255, 255, 0.8);
}

// -------- Colors -----------
// >>> Primary
@brand-primary: ~'var(--@{wd-prefix}-brand-primary)';
@brand-hover: ~'var(--@{wd-prefix}-brand-hover)';
@brand-active: ~'var(--@{wd-prefix}-brand-active)';
@brand-primary-outline: ~'var(--@{wd-prefix}-brand-primary-outline)';
@brand-disable: ~'var(--@{wd-prefix}-brand-disable)';
@brand-extra-light: ~'var(--@{wd-prefix}-brand-extra-light)';
@brand-lighter: ~'var(--@{wd-prefix}-brand-lighter)';
// @brand-primary-light-active: ~'var(--@{wd-prefix}-brand-primary-light-active)';
@brand-text: ~'var(--@{wd-prefix}-brand-text)';
@processing-color: @brand-primary;

// >>> Info
@trade-buy-buy: ~'var(--@{wd-prefix}-trade-buy-buy)';
@trade-buy-hover: ~'var(--@{wd-prefix}-trade-buy-hover)';
@trade-buy-active: ~'var(--@{wd-prefix}-trade-buy-active)';
@trade-buy-disable: ~'var(--@{wd-prefix}-trade-buy-disable)';
@trade-buy-light-1: ~'var(--@{wd-prefix}-trade-buy-light-1)';
@trade-buy-light-2: ~'var(--@{wd-prefix}-trade-buy-light-2)';
// @trade-buy-buy-light-hover: ~'var(--@{wd-prefix}-trade-buy-buy-light-hover)';
@trade-buy-text: ~'var(--@{wd-prefix}-trade-buy-text)';

@trade-buy-buy-deprecated-bg: ~`colorPalette('@{base-primary}', 1) `;
@trade-buy-buy-deprecated-border: ~`colorPalette('@{base-primary}', 3) `;
@trade-buy-buy-deprecated-bg: ~'var(--@{wd-prefix}-trade-buy-buy-deprecated-bg)';
@trade-buy-buy-deprecated-border: ~'var(--@{wd-prefix}-trade-buy-buy-deprecated-border)';

// >>> Success
@fluctuation-fall-fall: ~'var(--@{wd-prefix}-fluctuation-fall-fall)';
@fluctuation-fall-hover: ~'var(--@{wd-prefix}-fluctuation-fall-hover)';
@fluctuation-fall-active: ~'var(--@{wd-prefix}-fluctuation-fall-active)';
@fluctuation-fall-disable: ~'var(--@{wd-prefix}-fluctuation-fall-disable)';
@fluctuation-fall-light-1: ~'var(--@{wd-prefix}-fluctuation-fall-light-1)';
@fluctuation-fall-light-2: ~'var(--@{wd-prefix}-fluctuation-fall-light-2)';
@fluctuation-fall-text: ~'var(--@{wd-prefix}-fluctuation-fall-text)';
@fluctuation-fall-fall-outline: ~'var(--@{wd-prefix}-fluctuation-fall-fall-outline)';
@fluctuation-fall-deprecated-bg: ~'var(--@{wd-prefix}-fluctuation-fall-deprecated-bg)';
@fluctuation-fall-deprecated-border: ~'var(--@{wd-prefix}-fluctuation-fall-deprecated-border)';

// >>> Warning
@trade-selling-sellinging: ~'var(--@{wd-prefix}-trade-selling-sellinging)';
@trade-selling-hover: ~'var(--@{wd-prefix}-trade-selling-hover)';
@trade-selling-active: ~'var(--@{wd-prefix}-trade-selling-active)';
@trade-selling-disable: ~'var(--@{wd-prefix}-trade-selling-disable)';
@trade-selling-light-1: ~'var(--@{wd-prefix}-trade-selling-light-1)';
@trade-selling-light-2: ~'var(--@{wd-prefix}-trade-selling-light-2)';
@trade-selling-text: ~'var(--@{wd-prefix}-trade-selling-text)';

@trade-selling-sellinging-outline: ~'var(--@{wd-prefix}-trade-selling-sellinging-outline)';
@trade-selling-sellinging-deprecated-bg: ~'var(--@{wd-prefix}-trade-selling-sellinging-deprecated-bg)';
@trade-selling-sellinging-deprecated-border: ~'var(--@{wd-prefix}-trade-selling-sellinging-deprecated-border)';

// >>> Error
@fluctuation-rise-rise: ~'var(--@{wd-prefix}-fluctuation-rise-rise)';
@fluctuation-rise-hover: ~'var(--@{wd-prefix}-fluctuation-rise-hover)';
@fluctuation-rise-active: ~'var(--@{wd-prefix}-fluctuation-rise-active)';
@fluctuation-rise-disable: ~'var(--@{wd-prefix}-fluctuation-rise-disable)';
@fluctuation-rise-light-1: ~'var(--@{wd-prefix}-fluctuation-rise-light-1)';
@fluctuation-rise-light-2: ~'var(--@{wd-prefix}-fluctuation-rise-light-2)';
@fluctuation-rise-text: ~'var(--@{wd-prefix}-fluctuation-rise-text)';

@fluctuation-rise-rise-outline: ~'var(--@{wd-prefix}-fluctuation-rise-rise-outline)';
@fluctuation-rise-rise-deprecated-bg: ~'var(--@{wd-prefix}-fluctuation-rise-rise-deprecated-bg)';
@fluctuation-rise-rise-deprecated-border: ~'var(--@{wd-prefix}-fluctuation-rise-rise-deprecated-border)';

@highlight-color: @red-5;
@normal-color: #d9d9d9;
@white: #fff;
@black: rgb(156, 111, 111);

// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
@primary-1: ~'var(--@{wd-prefix}-primary-1)'; // replace tint(@brand-primary, 90%)
@primary-2: ~'var(--@{wd-prefix}-primary-2)'; // replace tint(@brand-primary, 80%)
@primary-3: ~'var(--@{wd-prefix}-primary-3)'; // unused
@primary-4: ~'var(--@{wd-prefix}-primary-4)'; // unused
@primary-5: ~'var(--@{wd-prefix}-primary-5)'; // color used to control the text color in many active and hover states, replace tint(@brand-primary, 20%)
@primary-6: ~'var(--@{wd-prefix}-primary-6)'; // color used to control the text color of active buttons, don't use, use @brand-primary
@primary-7: ~'var(--@{wd-prefix}-primary-7)'; // replace shade(@brand-primary, 5%)
@primary-8: color(~`colorPalette('@{brand-primary}', 8) `); // unused
@primary-9: color(~`colorPalette('@{brand-primary}', 9) `); // unused
@primary-10: color(~`colorPalette('@{brand-primary}', 10) `); // unused

// >>> Gray
@fluctuation-flat-flat: ~'var(--@{wd-prefix}-fluctuation-flat-flat)';
@fluctuation-flat-hover: ~'var(--@{wd-prefix}-fluctuation-flat-hover)';
@fluctuation-flat-active: ~'var(--@{wd-prefix}-fluctuation-flat-active)';
@fluctuation-flat-disable: ~'var(--@{wd-prefix}-fluctuation-flat-disable)';
@fluctuation-flat-light-1: ~'var(--@{wd-prefix}-fluctuation-flat-light-1)';
@fluctuation-flat-light-2: ~'var(--@{wd-prefix}-fluctuation-flat-light-2)';
@fluctuation-flat-text: ~'var(--@{wd-prefix}-fluctuation-flat-text)';

// >>> Text
@text-primary: ~'var(--@{wd-prefix}-text-primary)';
@text-secondary: ~'var(--@{wd-prefix}-text-secondary)';
@text-tertiary: ~'var(--@{wd-prefix}-text-tertiary)';
@text-disable: ~'var(--@{wd-prefix}-text-disable)';
@text-white: ~'var(--@{wd-prefix}-text-white)';
@text-white-disable: ~'var(--@{wd-prefix}-text-white-disable)';
@text-tab: ~'var(--@{wd-prefix}-text-tab)';

// >>> Bg
@bg-dialog: ~'var(--@{wd-prefix}-bg-dialog)';
@bg-tooltip: ~'var(--@{wd-prefix}-bg-tooltip)';
@bg-dropdown: ~'var(--@{wd-prefix}-bg-dropdown)';
@bg-page: ~'var(--@{wd-prefix}-bg-page)';
@bg-base: ~'var(--@{wd-prefix}-bg-base)';
@bg-page-90: ~'var(--@{wd-prefix}-bg-page-90)';

// >>> Icon
@icon-tertiary: ~'var(--@{wd-prefix}-icon-tertiary)';
@icon-secondary: ~'var(--@{wd-prefix}-icon-secondary)';
@icon-primary: ~'var(--@{wd-prefix}-icon-primary)';
@icon-disable: ~'var(--@{wd-prefix}-icon-disable)';
@icon-white: ~'var(--@{wd-prefix}-icon-white)';
@icon-white-disable: ~'var(--@{wd-prefix}-icon-white-disable)';

// >>> Line
@line-table: ~'var(--@{wd-prefix}-line-table)';
@line-devide: ~'var(--@{wd-prefix}-line-devide)';
@line-border: ~'var(--@{wd-prefix}-line-border)';

// filled
@fill-blank: ~'var(--@{wd-prefix}-fill-blank)';
@fill-blank-lighter: ~'var(--@{wd-prefix}-fill-blank-lighter)';
@fill-fill: ~'var(--@{wd-prefix}-fill-fill)';
@fill-fill-deep: ~'var(--@{wd-prefix}-fill-fill-deep)';
@fill-fill-deeper: ~'var(--@{wd-prefix}-fill-fill-deeper)';
@fill-white: ~'var(--@{wd-prefix}-fill-white)';
@fill-black: ~'var(--@{wd-prefix}-fill-black)';
@fill-fill-light: ~'var(--@{wd-prefix}-fill-fill-light)';
@fill-fill-even-deeper: ~'var(--@{wd-prefix}-fill-even-deeper)';
@fill-fill-much-deeper: ~'var(--@{wd-prefix}-fill-much-deeper)';

// >>> Special
@sp-shadow: ~'var(--@{wd-prefix}-sp-shadow)';
@sp-scroll-bar: ~'var(--@{wd-prefix}-sp-scroll-bar)';
@sp-overlay: ~'var(--@{wd-prefix}-sp-overlay)';
@sp-sider: ~'var(--@{wd-prefix}-sp-sider)';
@sp-hover-bar: ~'var(--@{wd-prefix}-sp-hover-bar)';
@sp-hover-bar-active: ~'var(--@{wd-prefix}-sp-hover-bar-active)';
@sp-tooltips: ~'var(--@{wd-prefix}-sp-tooltips)';
@sp-tooltips-text: ~'var(--@{wd-prefix}-sp-tooltips-text)';
@sp-hover-bar-select: ~'var(--@{wd-prefix}-sp-hover-bar-select)';
@sp-tb-hover-bar: ~'var(--@{wd-prefix}-sp-tb-hover-bar)';

@table-hover-bar: ~'var(--@{wd-prefix}-table-hover-bar)';
@table-hover-bar-active: ~'var(--@{wd-prefix}-table-hover-bar-active)';
@table-hover-bar-select: ~'var(--@{wd-prefix}-table-hover-bar-select)';

// >>> dorger Color
@charts-dorger-dorger: ~'var(--@{wd-prefix}-charts-dorger-dorger)';
@charts-dorger-text: ~'var(--@{wd-prefix}-charts-dorger-text)';
@charts-dorger-light: ~'var(--@{wd-prefix}-charts-dorger-light)';
@charts-dorger-light-alpha: ~'var(--@{wd-prefix}-charts-dorger-light-alpha)';

// >>> heliotrope Color
@charts-heliotrope-heliotrope: ~'var(--@{wd-prefix}-charts-heliotrope-heliotrope)';
@charts-heliotrope-text: ~'var(--@{wd-prefix}-charts-heliotrope-text)';
@charts-heliotrope-light: ~'var(--@{wd-prefix}-charts-heliotrope-light)';
@charts-heliotrope-light-alpha: ~'var(--@{wd-prefix}-charts-heliotrope-light-alpha)';

// >>> violet Color
@charts-violet-violet: ~'var(--@{wd-prefix}-charts-violet-violet)';
@charts-violet-text: ~'var(--@{wd-prefix}-charts-violet-text)';
@charts-violet-light: ~'var(--@{wd-prefix}-charts-violet-light)';
@charts-violet-light-alpha: ~'var(--@{wd-prefix}-charts-violet-light-alpha)';

// >>> purple Color
@charts-purple-purple: ~'var(--@{wd-prefix}-charts-purple-purple)';
@charts-purple-text: ~'var(--@{wd-prefix}-charts-purple-text)';
@charts-purple-light: ~'var(--@{wd-prefix}-charts-purple-light)';
@charts-purple-light-alpha: ~'var(--@{wd-prefix}-charts-purple-light-alpha)';

// >>> rosein Color
@charts-rosein-rosein: ~'var(--@{wd-prefix}-charts-rosein-rosein)';
@charts-rosein-text: ~'var(--@{wd-prefix}-charts-rosein-text)';
@charts-rosein-light: ~'var(--@{wd-prefix}-charts-rosein-light)';
@charts-rosein-light-alpha: ~'var(--@{wd-prefix}-charts-rosein-light-alpha)';

// >>> red Color
@charts-red-red: ~'var(--@{wd-prefix}-charts-red-red)';
@charts-red-text: ~'var(--@{wd-prefix}-charts-red-text)';
@charts-red-light: ~'var(--@{wd-prefix}-charts-red-light)';
@charts-red-foundation: ~'var(--@{wd-prefix}-charts-red-foundation)';
@charts-red-foundation-deep: ~'var(--@{wd-prefix}-charts-red-foundation-deep)';
@charts-red-foundation-deeper: ~'var(--@{wd-prefix}-charts-red-foundation-deeper)';
@charts-red-foundation-even-deeper: ~'var(--@{wd-prefix}-charts-red-foundation-even-deeper)';
@charts-red-heatmap: ~'var(--@{wd-prefix}-charts-red-heatmap)';
@charts-red-heatmap-deep: ~'var(--@{wd-prefix}-charts-red-heatmap-deep)';
@charts-red-heatmap-deeper: ~'var(--@{wd-prefix}-charts-red-heatmap-deeper)';
@charts-red-light-alpha: ~'var(--@{wd-prefix}-charts-red-light-alpha)';

// >>> sunset Color
@charts-sunset-sunset: ~'var(--@{wd-prefix}-charts-sunset-sunset)';
@charts-sunset-text: ~'var(--@{wd-prefix}-charts-sunset-text)';
@charts-sunset-light: ~'var(--@{wd-prefix}-charts-sunset-light)';
@charts-sunset-light-alpha: ~'var(--@{wd-prefix}-charts-sunset-light-alpha)';

// >>> sunglow Color
@charts-sunglow-sunglow: ~'var(--@{wd-prefix}-charts-sunglow-sunglow)';
@charts-sunglow-text: ~'var(--@{wd-prefix}-charts-sunglow-text)';
@charts-sunglow-light: ~'var(--@{wd-prefix}-charts-sunglow-light)';
@charts-sunglow-light-alpha: ~'var(--@{wd-prefix}-charts-sunglow-light-alpha)';

// >>> shamrock Color
@charts-shamrock-shamrock: ~'var(--@{wd-prefix}-charts-shamrock-shamrock)';
@charts-shamrock-text: ~'var(--@{wd-prefix}-charts-shamrock-text)';
@charts-shamrock-light: ~'var(--@{wd-prefix}-charts-shamrock-light)';
@charts-shamrock-light-alpha: ~'var(--@{wd-prefix}-charts-shamrock-light-alpha)';

// >>> green Color
@charts-green-green: ~'var(--@{wd-prefix}-charts-green-green)';
@charts-green-text: ~'var(--@{wd-prefix}-charts-green-text)';
@charts-green-light: ~'var(--@{wd-prefix}-charts-green-light)';
@charts-green-foundation: ~'var(--@{wd-prefix}-charts-green-foundation)';
@charts-green-foundation-deep: ~'var(--@{wd-prefix}-charts-green-foundation-deep)';
@charts-green-foundation-deeper: ~'var(--@{wd-prefix}-charts-green-foundation-deeper)';
@charts-green-foundation-even-deeper: ~'var(--@{wd-prefix}-charts-green-foundation-even-deeper)';
@charts-green-heatmap: ~'var(--@{wd-prefix}-charts-green-heatmap)';
@charts-green-heatmap-deep: ~'var(--@{wd-prefix}-charts-green-heatmap-deep)';
@charts-green-heatmap-deeper: ~'var(--@{wd-prefix}-charts-green-heatmap-deeper)';
@charts-green-light-alpha: ~'var(--@{wd-prefix}-charts-green-light-alpha)';

// >>> viking Color
@charts-viking-viking: ~'var(--@{wd-prefix}-charts-viking-viking)';
@charts-viking-text: ~'var(--@{wd-prefix}-charts-viking-text)';
@charts-viking-light: ~'var(--@{wd-prefix}-charts-viking-light)';
@charts-viking-light-alpha: ~'var(--@{wd-prefix}-charts-viking-light-alpha)';

// >>> malibu Color
@charts-malibu-malibu: ~'var(--@{wd-prefix}-charts-malibu-malibu)';
@charts-malibu-text: ~'var(--@{wd-prefix}-charts-malibu-text)';
@charts-malibu-light: ~'var(--@{wd-prefix}-charts-malibu-light)';
@charts-maibu-light-alpha: ~'var(--@{wd-prefix}-charts-maibu-light-alpha)';

// >>> gray Color
@charts-gray-gray: ~'var(--@{wd-prefix}-charts-gray-gray)';
@charts-gray-text: ~'var(--@{wd-prefix}-charts-gray-text)';
@charts-gray-light: ~'var(--@{wd-prefix}-charts-gray-light)';
@charts-gray-light-alpha: ~'var(--@{wd-prefix}-charts-gray-light-alpha)';
// Base Scaffolding Variables
// 条件筛选默认宽度
@component-condition-width: 260px;

// Background color for `<body>`
@body-background: #fff;
// Base background color for most components
@component-background: #fff;
// Base background transparency 0.9
@component-background-9: rgba(255, 255, 255, 0.9);
// Popover background color
@popover-background: @component-background;
@popover-customize-border-color: @border-color-split;
@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';
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@text-color: @gray-900;
@text-color-secondary: @gray-700;
@text-color-inverse: @white;
@icon-color: inherit;
@icon-color-hover: fade(@black, 75%);
@heading-color: @text-primary;
@text-color-dark: fade(@white, 85%);
@text-color-secondary-dark: fade(@white, 65%);
@text-selection-bg: @brand-primary;
@font-variant-base: tabular-nums;
@font-feature-settings-base: 'tnum';
// 字体大小
@font-size-base: 14px;
@font-size-base-15: 15px;
@font-size-lg: @font-size-base + 2px;
@font-size-bg: @font-size-base;
@font-size-sm: 12px;
// 图标大小
@icon-size-base: 14px;
@icon-size-lg: @icon-size-base + 2px;
@icon-size-bg: @icon-size-base;
@icon-size-sm: 12px;
@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);
// https://github.com/wd-design/wd-design/issues/20210
@line-height-normal: 22px;
@line-height-base: 18px;
@border-radius-big: 8px;
@border-radius-base: 6px;
@border-radius-bg: 12px;
@border-radius-sm: 4px;
@border-radius-xs: 2px;

// vertical paddings
@padding-lg: 24px; // containers
@padding-md: 16px; // small containers and buttons
@padding-sm: 12px; // Form controls and items
@padding-xs: 8px; // small items
@padding-xss: 4px; // more small

// vertical padding for all form controls
@control-padding-horizontal: @padding-sm;
@control-padding-horizontal-xs: @padding-xs;
@control-padding-horizontal-md: @padding-md;
@control-padding-horizontal-sm: @padding-sm;
@control-padding-horizontal-xss: @padding-xs - 2px;

// vertical margins
@margin-lg: 24px; // containers
@margin-md: 16px; // small containers and buttons
@margin-sm: 12px; // Form controls and items
@margin-xs: 8px; // small items
@margin-xss: 4px; // more small

// weight-base
@base-weight-font: 600;

// height rules
@height-base: 32px;
@height-lg: 40px;
@height-bg: 36px;
// @height-smd: 28px;
@height-sm: 28px;
@height-xs: 24px;

// The background colors for active and hover states for things like
// list items or table cells.
@item-active-bg: @primary-1;
@item-hover-bg: @sp-hover-bar;

// ICONFONT
@iconfont-css-prefix: wdicon;

// LINK
@link-color: @brand-text;
@link-hover-color: @brand-hover;
@link-active-color: @brand-active;
@link-decoration: none;
@link-hover-decoration: none;
@link-focus-decoration: none;
@link-focus-outline: 0;

// Animation
@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);

// Border color
@border-color-base: @line-border; // base border outline a component
@border-color-split: @line-border; // split border inside a component
@border-color-inverse: @white;
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border
@border-color-primary: @brand-primary;

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

@background-color-light: hsv(0, 0, 98%); // background of header and selected item
@background-color-base: hsv(0, 0, 96%); // Default grey background color

// Disabled states
@disabled-color: @text-disable;
@disabled-bg: #fff;
@disabled-color-border: @line-border;

@disabled-active-bg: tint(@black, 90%);
@disabled-color-dark: fade(#fff, 35%);

@disable-primary-color: @text-white-disable;
@disable-primary-bg: @brand-disable;

@disable-secondary-color: @brand-disable;
@disable-secondary-bg: @brand-extra-light;

@disable-text-color: @disabled-color;
@disable-text-bg: #fff;

@disable-link-color: @brand-disable;
@disable-link-bg: #fff;

// Shadow
@shadow-color: rgba(0, 0, 0, 0.15);
@shadow-color-inverse: @component-background;
@box-shadow-base: @shadow-2;
@box-shadow-200-drop: @shadow-200-drop;
@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
  0 -12px 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
  0 12px 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),
  -12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),
  12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(122, 90, 90, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
@shadow-component-3:0px 3px 14px 2px rgba(106, 113, 136, 0.05), 0px 8px 10px 1px rgba(106, 113, 136, 0.06), 0px 5px 5px -3px rgba(106, 113, 136, 0.1);
// new shadow
@shadow-100-canvas: ~'var(--@{wd-prefix}-shadow-100-canvas)';
@shadow-200-drop: ~'var(--@{wd-prefix}-shadow-200-drop)';
@shadow-300-modal: ~'var(--@{wd-prefix}-shadow-300-modal)';
@shadow-module-top: ~'var(--@{wd-prefix}-shadow-module-top)';
@shadow-module-bottom: ~'var(--@{wd-prefix}-shadow-module-bottom)';
@shadow-module-right: ~'var(--@{wd-prefix}-shadow-module-right)';
@shadow-module-left: ~'var(--@{wd-prefix}-shadow-module-left)';
@shadow-card-normal: ~'var(--@{wd-prefix}-shadow-card-normal)';
@shadow-card-active: ~'var(--@{wd-prefix}-shadow-card-active)';
@shadow-tab: ~'var(--@{wd-prefix}-shadow-tab)';

// Buttons
@btn-font-weight: 400;
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-sm: @border-radius-sm;
@btn-border-width: @border-width-base;
@btn-border-style: @border-style-base;
@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);

@btn-primary-color: @text-white;
@btn-primary-bg: @brand-primary;

@btn-secondary-color: @brand-text;
@btn-secondary-bg: @brand-extra-light;

@btn-default-color: @text-primary;
@btn-default-bg: transparent;
@btn-default-border: @border-color-base;

@btn-icon-bg: transparent;
// 中性色 - 灰底黑字
@btn-icon-solid-color: @icon-secondary;
@btn-icon-solid-color-hover: @icon-primary;
@btn-icon-solid-color-active: @icon-primary;
@btn-icon-solid-color-disabled: @icon-disable;
@btn-icon-solid-bg: @fill-fill;
@btn-icon-solid-bg-hover: @sp-hover-bar;
@btn-icon-solid-bg-active: @sp-hover-bar-active;
@btn-icon-solid-bg-disabled: @fill-fill;

// button icon no bg have border -- primary
@btn-icon-primary: @brand-text;
@btn-icon-primary-hover: @brand-hover;
@btn-icon-primary-active: @brand-active;
@btn-icon-primary-disabled: @brand-disable;
// button icon no bg have border -- neutral
@btn-icon-neutral: @icon-secondary;
@btn-icon-neutral-hover: @icon-primary;
@btn-icon-neutral-active: @icon-primary;
@btn-icon-neutral-disabled: @icon-disable;

// 热区 品牌色 -- hot
@btn-icon-hot-color: @brand-text;
@btn-icon-hot-color-hover: @brand-hover;
@btn-icon-hot-color-active: @brand-active;
@btn-icon-hot-color-disabled: @brand-disable;
@btn-icon-hot-bg-hover: @brand-extra-light;
@btn-icon-hot-bg-active: @brand-lighter;

// 热区 品牌色 -- 中性色
@btn-icon-default-color: @icon-secondary;
@btn-icon-default-color-hover: @icon-primary;
@btn-icon-default-color-active: @icon-primary;
@btn-icon-default-bg-hover: @sp-hover-bar;
@btn-icon-default-bg-active: @sp-hover-bar-active;
@btn-icon-default-color-disabled: @icon-disable;

// 灰底蓝字
@btn-icon-gray-color: @brand-text;
@btn-icon-gray-color-hover: @brand-text;
@btn-icon-gray-color-active: @brand-text;
@btn-icon-gray-color-disabled: @icon-disable;
@btn-icon-gray-bg: @fill-fill;
@btn-icon-gray-bg-hover: @fill-fill-deep;
@btn-icon-gray-bg-active: @brand-extra-light;
@btn-icon-gray-bg-disabled: @fill-fill;

@btn-danger-color: #fff;
@btn-danger-bg: @fluctuation-rise-rise;
@btn-danger-border: @fluctuation-rise-rise;
@btn-danger-disable-bg: @fluctuation-rise-disable;

@btn-warning-color: @text-white;
@btn-warning-bg: @trade-selling-sellinging;
@btn-warning-hover-bg: @trade-selling-hover;
@btn-warning-active-bg: @trade-selling-active;
@btn-warning-disable-bg: @trade-selling-disable;

@btn-disable-color: @disabled-color;
@btn-disable-bg: transparent;
@btn-disable-border: @border-color-base;

@btn-default-ghost-color: @component-background;
@btn-default-ghost-bg: transparent;
@btn-default-ghost-border: @component-background;

@btn-font-size-lg: @font-size-lg;
@btn-font-size-bg: @font-size-bg;
@btn-font-size-smd: @font-size-sm;
@btn-font-size-sm: @font-size-sm;
@btn-font-size-xs: @font-size-sm;
@btn-padding-horizontal-base: @padding-md - 1px;
@btn-padding-horizontal-lg: 20px - 1px;
@btn-padding-horizontal-bg: 18px - 1px;
@btn-padding-horizontal-smd: @padding-md - 1px;
@btn-padding-horizontal-sm: @padding-xs - 1px;
@btn-padding-horizontal-xs: @padding-xs - 1px;

@btn-height-base: @height-base;
@btn-height-lg: @height-lg;
@btn-height-bg: @height-bg;
// @btn-height-smd: @height-smd;
@btn-height-sm: @height-sm;
@btn-height-xs: @height-xs;

@btn-line-height: @line-height-base;

@btn-circle-size: @btn-height-base;
@btn-circle-size-lg: @btn-height-lg;
@btn-circle-size-bg: @btn-height-bg;
// @btn-circle-size-smd: @btn-height-smd;
@btn-circle-size-sm: @btn-height-sm;
@btn-circle-size-xs: @btn-height-xs;

@btn-square-size: @btn-height-base;
@btn-square-size-lg: @btn-height-lg;
@btn-square-size-bg: @btn-height-bg;
// @btn-square-size-smd: @btn-height-smd;
@btn-square-size-sm: @btn-height-sm;
@btn-square-size-xs: @btn-height-xs;
@btn-square-only-icon-size: @font-size-base + 4px;
@btn-square-only-icon-size-xs: @font-size-base;
@btn-square-only-icon-size-sm: @font-size-base + 2px;
@btn-square-only-icon-size-md: @font-size-base + 4px;
@btn-square-only-icon-size-bg: @font-size-base + 6px;
@btn-square-only-icon-size-lg: @font-size-base + 8px;

@btn-group-border: @primary-5;

@btn-text-color: @text-primary;
@btn-link-hover-bg: @sp-hover-bar;
@btn-link-hover-color: @brand-hover;
@btn-link-active-bg: @sp-hover-bar-active;
@btn-text-hover-bg: @sp-hover-bar;
@btn-text-active-bg: @sp-hover-bar-active;
@btn-text-hover-color: @text-secondary;

@btn-no-padding-height-normal: @line-height-normal;
@btn-no-padding-line-height-normal: @line-height-normal;
@btn-no-padding-font-size-normal: 15px;
@btn-no-padding-height-xs: @line-height-base;
@btn-no-padding-line-height-xs: @line-height-base;
@btn-no-padding-font-size-xs: @font-size-sm;
@btn-no-padding-font-size-sm: @font-size-base;

// Checkbox
@checkbox-size: @font-size-base;
@checkbox-label-size: @font-size-base - 2px;
@checkbox-color: @brand-primary;
@checkbox-hover-color: @brand-hover;
@checkbox-check-color: @icon-white;
@checkbox-check-bg: transparent;
@checkbox-border-width: @border-width-base + 0.5px;
@checkbox-border-radius: @border-radius-xs;
@checkbox-group-item-margin-right: 8px;
@checkbox-border-color: @icon-tertiary;
@checkbox-label-padding: @base-num-zero @base-num-zero @base-num-zero @padding-xs;
@checkbox-label-color: @text-primary;
@checkbox-wrapper-hover-bg: @sp-hover-bar;
@checkbox-padding-hover: @padding-xss - 2px;
@checkbox-indeter-bg: @icon-white;
@checkbox-label-padding-horizontal: @padding-xss + 2px;
@checkbox-label-line-height: @line-height-base + 6px;
@checkbox-label-height: @checkbox-label-line-height;
@checkbox-inner-disable-border-color: @icon-disable;
@checkbox-inner-disable-bg-color: @charts-gray-light;
@checkbox-inner-disable-checked-border-color: @brand-disable;
@checkbox-inner-disable-checked-bg-color: @brand-disable;
@checkbox-inner-disable-checked-icon-color: @text-white-disable;
@checkbox-text-disable-color: @text-disable;

// Descriptions
@descriptions-bg: #fafafa;
@descriptions-title-margin-bottom: 20px;
@descriptions-default-padding: @padding-md @padding-lg;
@descriptions-middle-padding: @padding-sm @padding-lg;
@descriptions-small-padding: @padding-xs @padding-md;
@descriptions-item-padding-bottom: @padding-md;
@descriptions-item-trailing-colon: true;
@descriptions-item-label-colon-margin-right: 8px;
@descriptions-item-label-colon-margin-left: 2px;
@descriptions-extra-color: @text-color;

// Divider
//----
@base-num-zero: 0;
@divider-text-padding: 1em;
@divider-orientation-margin: 5%;
@divider-color: @line-devide;
@divider-vertical-gutter: 8px;
@divider-color-line: @border-width-base @border-style-base @line-devide;
@divider-color-text: @text-color;
@divider-font-weight: 400;
// font-size 14
@divider-text-size: @font-size-base;
@divider-line-height: @line-height-base + 4px;
@divider-padding-text: @padding-xss - 4px @padding-md;
@divider-margin: @margin-lg @base-num-zero;
@divider-margin-md: @margin-md @base-num-zero;
@divider-height: 0.9em;

// Dropdown
@dropdown-selected-color: @brand-text;
@dropdown-menu-submenu-disabled-bg: transparent;
@dropdown-selected-bg: @sp-hover-bar-select;

// Empty
@empty-font-size: @font-size-base;
@empty-font-color: @text-secondary;
@empty-font-disabled-color: @text-tertiary;
@empty-font-line-height-bg: 22px;
@empty-font-line-height-md: 18px;
@empty-image-width: 100px;
@empty-image-height: 70px;
@empty-image-shadow: @shadow-card-normal;
@empty-image-module-width: 70px;
@empty-image-module-height: 49px;
@empty-image-module-color: @text-tertiary;
@empty-image-message-width: 105px;
@empty-image-message-height: 105px;
@empty-image-account-width: 106px;
@empty-image-account-height: 72px;
@empty-image-found-width: 400px;
@empty-image-found-height: 200px;
@empty-image-search-width: 138px;
@empty-image-search-height: 92px;
@empty-refresh-btn-color: @brand-text;
@empty-refresh-btn-color-hover: @brand-hover;
@empty-refresh-btn-color-active: @brand-active;
@empty-refresh-btn-color-disable: @brand-disable;

// Radio
@radio-size: 14px;
@radio-top: 0.2em;
@radio-border-width: 2px;
@radio-dot-size: @radio-size - 8px;
@radio-dot-color: @brand-primary;
@radio-solid-checked-color: @component-background;
@radio-dot-disabled-color: @brand-disable;
@radio-disabled-checked-color: @brand-disable;
@radio-disabled-checked-bg: @fill-blank;
@radio-disabled-color: @line-border;
@radio-disabled-bg: @fluctuation-flat-light-1;

// Radio buttons
@radio-button-bg: @btn-default-bg;
@radio-button-checked-bg: @btn-default-bg;
@radio-button-color: @btn-default-color;
@radio-button-hover-color: @primary-5;
@radio-button-active-color: @primary-7;
@radio-button-padding-horizontal: @padding-md - 1px;
@radio-disabled-button-checked-bg: @disabled-active-bg;
@radio-disabled-button-checked-color: @disabled-color;
@radio-wrapper-margin-right: 12px;
@radio-wrapper-line-height: @line-height-base + 6px;
@radio-wrapper-height: @radio-wrapper-line-height;
@radio-wrapper-color: @text-primary;
@radio-wrapper-padding-horizontal: @padding-xss + 2px;
@radio-inner-bg: @icon-white;

// Radio tab
@radio-tab-color: @text-secondary;
@radio-tab-color-checked: @text-primary;
// @radio-tab-bg: @fill-fill-deep;
// @radio-tab-hover-bg: @fill-blank-lighter;

// Media queries breakpoints
// @screen-xs and @screen-xs-min is not used in Grid
// smallest break point is @screen-md
@screen-xs: 480px + 1px;
@screen-xs-min: @screen-xs;
// 👆 Extra small screen / phone

// 👇 Small screen / tablet
@screen-sm: 576px + 1px;
@screen-sm-min: @screen-sm;

// Medium screen / desktop
@screen-md: 768px + 1px;
@screen-md-min: @screen-md;

// Large screen / wide desktop
@screen-lg: 992px + 1px;
@screen-lg-min: @screen-lg;

// Extra large screen / full hd
@screen-xl: 1440px + 1px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1680px + 1px;
@screen-xxl-min: @screen-xxl;
@screen-xxxl: 1920px + 1px;
@screen-xxxl-min: @screen-xxxl;

// provide a 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);
@screen-xxl-max: (@screen-xxxl-min - 1px);

// Grid system
@grid-columns: 24;

// Layout
@layout-body-background: #f0f2f5;
@layout-header-background: #001529;
@layout-header-height: 64px;
@layout-header-padding: 0 50px;
@layout-header-color: @text-color;
@layout-footer-padding: 24px 50px;
@layout-footer-background: @layout-body-background;
@layout-sider-background: @layout-header-background;
@layout-trigger-height: 48px;
@layout-trigger-background: #002140;
@layout-trigger-color: #fff;
@layout-zero-trigger-width: 36px;
@layout-zero-trigger-height: 42px;
// Layout light theme
@layout-sider-background-light: #fff;
@layout-trigger-background-light: #fff;
@layout-trigger-color-light: @text-color;

// z-index list, order by `z-index`
@zindex-badge: auto;
@zindex-table-fixed: 2;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-picker-panel: 10;
@zindex-popup-close: 10;

@zindex-popup-base: 2000;
@zindex-modal: @zindex-popup-base;
@zindex-modal-mask: @zindex-popup-base;
@zindex-message: 2010;
@zindex-notification: 2010;
@zindex-popover: @zindex-popup-base;
@zindex-dropdown: @zindex-popup-base;
@zindex-picker: 2050;
@zindex-popoconfirm: @zindex-popup-base;
@zindex-tooltip: 2070;
@zindex-image: 2080;

// Animation
@animation-duration-slow: 0.3s; // Modal
@animation-duration-base: 0.2s;
@animation-duration-fast: 0.1s; // Tooltip

//CollapsePanel
@collapse-panel-border-radius: @border-radius-base;

//Dropdown
@dropdown-menu-bg: @bg-dropdown;
@dropdown-vertical-padding: 7px;
@dropdown-horizontal-padding: 8px;
@dropdown-edge-child-vertical-padding: 4px;
@dropdown-edge-child-horizontal-padding: 8px;
@dropdown-font-size: @font-size-sm;
@dropdown-line-height: 32px;

// Form
// ---
@label-required-color: @highlight-color;
@label-color: @text-secondary;
@form-warning-input-bg: @input-bg;
@form-item-margin-bottom: 20px;
@form-item-trailing-colon: true;
@form-vertical-label-padding: 0 0 8px;
@form-vertical-label-margin: 0;
@form-item-label-font-size: @font-size-sm;
@form-item-label-height: @input-height-base;
@form-item-label-colon-margin-right: 8px;
@form-item-label-colon-margin-left: 2px;
@form-error-input-bg: @input-bg;
@form-error-input-border-color: @fluctuation-rise-rise;
@form-error-input-border-hover-color: @fluctuation-rise-hover;
// Input
// ---
@input-height-base: @height-base;
@input-height-lg: @height-lg;
@input-height-bg: @height-bg;
@input-height-sm: @height-sm;
@input-height-xs: @height-xs;
@input-line-height-base: 18px;
@input-line-height-bg: @height-xs - 2px;
@input-line-height-lg: @height-xs - 2px;
@input-padding-horizontal: @control-padding-horizontal - 1px;
@input-padding-horizontal-base: @control-padding-horizontal - 1px;
@input-padding-horizontal-xs: @control-padding-horizontal-xs - 1px;
@input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px;
@input-padding-horizontal-md: @control-padding-horizontal-sm - 1px;
@input-padding-horizontal-bg: @control-padding-horizontal-md - 1px;
@input-padding-horizontal-lg: @padding-md - 1px;
@input-padding-vertical-base: 6px;
@input-padding-vertical-lg: 8px;
@input-show-count-line-height: 20px;
// max(
//   (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) -
//     @border-width-base,
//   3px
// );
@input-padding-vertical-xs: 2px;
@input-padding-vertical-sm: 4px;
// max(
//   (round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) -
//     @border-width-base,
//   0
// );
@input-padding-vertical-bg: @input-padding-vertical-base;

@input-padding-vertical-lg: 8px;
// (
//     ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2) * 10) / 10
//   ) - @border-width-base;
@input-placeholder-color: @text-tertiary;
@input-color: @text-primary;
@input-icon-color: @input-color;
@input-border-color: @border-color-base;
@input-bg: @bg-page;
@input-number-hover-border-color: @input-hover-border-color;
@input-number-handler-active-bg: #f4f4f4;
@input-number-handler-hover-bg: @brand-hover;
@input-number-handler-bg: @component-background;
@input-number-handler-border-color: @border-color-base;
@input-addon-bg: @background-color-light;
@input-hover-border-color: @brand-hover;
@input-disabled-bg: @disabled-bg; // 这个不能修改 其他地方用到了这个变量并且禁用是白色
@input-disabled-bg-color: @fill-fill;
@input-outline-offset: 0 0;
@input-icon-hover-color: fade(@black, 85%);
@input-disabled-color: @text-disable;
@input-disabled-color-borderless: @text-tertiary;
@input-disabled-icon-color: @icon-disable;
@input-disabled-bg-borderless: @fill-fill;
@input-focused-bg-color: @bg-page; // TODO 有问题 目前没有使用到 可暂时不改

@input-condition-bg-color: @fill-fill-deeper;
@input-condition-bg-hover-color: @sp-hover-bar-active;
@input-suffix-line-height: @height-xs - 8px;
@input-suffix-color: @icon-tertiary;
@input-condition-fill-color: @brand-text;
@input-show-count-color: @text-tertiary;
@input-affix-size: @font-size-lg;
@input-suffix-icon-margin-left: @margin-xss;

// @input-line-height: @height-xs - 2px;

// Mentions
// ---
@mentions-dropdown-bg: @component-background;
@mentions-dropdown-menu-item-hover-bg: @mentions-dropdown-bg;

// Select
// ---
@select-disable-icon-color: @icon-disable;
@select-border-color: @border-color-base;
@select-item-selected-color: @brand-text;
@select-item-selected-font-weight: 600;
@select-dropdown-bg: @bg-dropdown;
@select-item-selected-bg: @sp-hover-bar-select;
@select-item-active-bg: @item-hover-bg;
@select-item-margin-bottom: 4px;
@select-item-border-radius: (@border-radius-base / 2);
@select-item-color: @text-primary;
@select-dropdown-vertical-padding: @dropdown-vertical-padding;
@select-dropdown-horizontal-padding: @dropdown-horizontal-padding;
@select-dropdown-font-size: @dropdown-font-size;
@select-dropdown-line-height: @dropdown-line-height - 10px;
@select-dropdown-height: 28px;
@select-background: transparent;
@select-clear-background: @select-background;
@select-selection-item-bg: @fill-fill-deeper;
@select-selection-item-border-color: @border-color-split;
@select-selection-line-height: @input-height-base - 12px;
@select-selection-line-height-lg: @input-height-lg - 10px;
@select-selection-line-height-bg: @input-height-bg - 10px;
@select-selection-line-height-sm: @input-height-sm - 10px;
@select-selection-line-height-xs: @input-height-xs - 10px;
@select-selection-show-prefix-left: 29px;
@select-single-item-height-lg: 40px;
@select-multiple-item-height: @input-height-base - @input-padding-vertical-base - 2px; // Normal 24px
// @select-multiple-item-height-normal: @input-height-xs; // Normal 20px
@select-multiple-item-height-lg: @input-height-base;
@select-multiple-item-height-bg: @input-height-sm;
@select-multiple-item-height-sm: @input-height-xs - 4px;
@select-multiple-item-height-xs: @input-height-xs - 6px;
@select-multiple-item-radius: @border-radius-xs;
@select-multiple-item-radius-lg: @border-radius-xs + 1px;
@select-multiple-item-radius-bg: @border-radius-xs + 1px;
@select-multiple-item-radius-sm: @border-radius-xs;
@select-multiple-item-radius-xs: @border-radius-xs;
@select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2));
@select-multiple-item-option-disabled-background: @input-disabled-bg;
@select-multiple-disabled-background: @fill-fill;
@select-multiple-item-disabled-bg: @fill-fill-deep;
@select-multiple-item-disabled-color: @text-disable;
@select-multiple-item-disabled-border-color: @select-border-color;
@select-multiple-item-focus-bg-color: @brand-extra-light;
@select-multiple-item-focus-color: @brand-text;
@select-multiple-condition-item-max-width: 90px;
@select-multiple-condition-item-bg-color: @fill-blank-lighter;
@select-multiple-condition-item-border-color: @line-border;
@select-multiple-condition-item-border-radius: @border-radius-xs + 1px;
@select-multiple-tag-margin-right: @margin-xss;
@select-multiple-tag-margin-vertical: @margin-xss - 2px;
@select-multiple-tag-padding-vertical: @padding-xss - 3px;
@select-multiple-tag-padding-horizontal: @padding-xss - 1px;
@select-multiple-placeholder-left: 8px;
@select-multiple-checkall-width: calc(100% - 6px);
@select-multiple-checkall-padding: 0 8px;
@select-multiple-checkall-margin-top: 8px;
@select-multiple-checkall-after-top: -4px;
@select-multiple-checkall-after-height: 1px;
@select-multiple-checkall-after-background-color: @line-devide;
@select-multiple-checkall-text-padding-left: 8px;
@select-option-multiple-padding: 0 8px 0 0;
@select-clear-color: @icon-tertiary;
@select-arrow-color: @icon-tertiary;
@select-condition-bg-color: @fill-fill;
@select-label-color: @text-secondary;
@select-condition-radius: @border-radius-sm;
@select-condition-padding: 0 @padding-sm;
@select-label-margin-right: @margin-xs;
@select-condition-bg-hover-color: @sp-hover-bar-active;
@select-condition-focus-border-color: @brand-primary;
@select-condition-focus-bg-color: @bg-page;
@select-condition-color: @brand-text;
@select-condition-disable-color: @text-disable;
@select-condition-multiple-item-hover-color: @brand-primary;
@select-tree-treenode-padding: @padding-xs - 1px @padding-xss;
@select-dropdown-stock-search-width: 260px;
@select-dropdown-stock-search-list-height: 320px;
@select-dropdown-stock-search-header-height: 30px;
@select-dropdown-stock-search-tabs-height: 30px;
@select-dropdown-stock-search-place-height: 8px;
@select-dropdown-stock-search-code-width: 60px;
@select-dropdown-stock-search-history-padding: 6px;
@select-dropdown-stock-search-margin: 0 8px;
@select-dropdown-stock-search-code-color: @text-tertiary;
@select-dropdown-stock-search-code-margin-right: @margin-xs;
@select-dropdown-stock-search-name-line-height: @line-height-base;
@select-dropdown-stock-search-name-color: @text-primary;
@select-dropdown-stock-search-name-margin-left: 8px;
@select-dropdown-stock-search-select-item-padding: 5px 8px;
// Cascader
// ---
@cascader-bg: @component-background;
@cascader-item-selected-bg: @sp-hover-bar-select;
@cascader-menu-bg: @component-background;
@cascader-menu-border-color-split: @border-color-split;
@cascader-menu-expand-icon-color: @text-secondary;

// Cascader
// ----
@cascader-dropdown-vertical-padding: @dropdown-vertical-padding;
@cascader-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
@cascader-dropdown-edge-child-horizontal-padding: @dropdown-edge-child-horizontal-padding;
@cascader-dropdown-font-size: @dropdown-font-size;
@cascader-dropdown-line-height: @line-height-base;
@cascader-dropdown-item-border-radius: @border-radius-sm;
@cascader-dropdown-active-font-weight: 600;
@cascader-dropdown-item-margin-top: @margin-xss;
// Anchor
// ---
@anchor-bg: transparent;
@anchor-border-color: @border-color-split;
@anchor-link-top: 7px;
@anchor-link-left: 16px;
@anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left;

// Tooltip
// ---
// Tooltip max width
@tooltip-max-width: 250px;
// Tooltip text color
@tooltip-color: @sp-tooltips-text;
// Tooltip background color
@tooltip-bg: @sp-tooltips;
// Tooltip arrow width
@tooltip-arrow-width: 5px;
// Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width - 1px;
// Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
@tooltip-font-size: @font-size-sm;
@tooltip-line-height: @line-height-base;
@tooltip-padding: @padding-xs @padding-sm;

// Popover
// ---
// Popover body background color
@popover-bg: @bg-tooltip;
// Popover text color
@popover-color: @text-color;
// Popover maximum width
@popover-min-width: 200px;
@popover-min-height: 18px;
// Popover arrow width
@popover-arrow-width: 6px;
// Popover arrow color
@popover-arrow-color: @popover-bg;
// Popover outer arrow width @sp-tooltips
// Popover outer arrow color
@popover-arrow-outer-color: @popover-bg;
// Popover distance with trigger
@popover-distance: @popover-arrow-width + 4px;
@popover-padding-horizontal: @padding-md;
// Popover inner padding
@popover-padding-out-layer: @padding-md;
@popover-font-weight-bold: 600;
@popover-title-color: @text-primary;
@popover-content-color: @text-secondary;
@popover-line-height: @line-height-base;
@popover-font-size: @font-size-sm;
@popover-title-margin-bottom: @margin-xs;
@popover-border-shadow: inset 0 0 @border-width-base @line-table;
@popover-shadow: @shadow-200-drop;

// Modal
// --
@modal-header-padding-vertical: @padding-lg;
@modal-header-padding-horizontal: @padding-lg;
@modal-body-padding: 0 @padding-lg;
@modal-header-bg: @bg-dialog;
@modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
@modal-header-border-width: @border-width-base;
@modal-header-border-style: @border-style-base;
@modal-header-title-line-height: 22px;
@modal-header-title-padding-left: 8px;
@modal-header-title-font-size: @font-size-lg;
@modal-header-border-color-split: @border-color-split;
@modal-header-close-size: 22px;
@modal-header-close-font-size: @icon-size-lg + 2px;
@modal-wdicon: 20px;
@modal-content-bg: @bg-dialog;
@modal-heading-color: @heading-color;
@modal-close-color: @icon-secondary;
@modal-close-hover-color: @icon-primary;
@modal-close-hover-bg: @sp-hover-bar;
@modal-close-active-bg: @sp-hover-bar-active;
@modal-close-position: 24px;
@modal-close-radius: @border-radius-xs + 1px;
@modal-footer-bg: @bg-dialog;
@modal-footer-border-color-split: @border-color-split;
@modal-footer-border-style: @border-style-base;
@modal-footer-padding-vertical: @padding-lg;
@modal-footer-padding-horizontal: @padding-lg;
@modal-footer-border-width: @border-width-base;
@modal-mask-bg: @sp-overlay;
@modal-confirm-body-padding: @padding-lg;
@modal-confirm-footer-margin-top: @margin-md;
@modal-confirm-title-font-size: @font-size-lg;
@modal-title-font-weight: @base-weight-font;
// 侧边栏
@modal-side-padding: @padding-md;
@modal-side-max-width: 248px;
// Progress
// --
@progress-default-color: @processing-color;
@progress-remaining-color: @background-color-base;
@progress-info-text-color: @progress-text-color;
@progress-radius: 100px;
@progress-steps-item-bg: #f3f3f3;
@progress-text-font-size: 1em;
@progress-text-color: @text-color; // This is for circle text color, should be renamed better
@progress-circle-text-font-size: 1em;
// Menu
// ---
@menu-inline-toplevel-item-height: 40px;
@menu-item-height: 40px;
@menu-item-group-height: @line-height-base;
@menu-collapsed-width: 80px;
@menu-bg: @component-background;
@menu-popup-bg: @component-background;
@menu-item-color: @text-color;
@menu-inline-submenu-bg: @background-color-light;
@menu-highlight-color: @brand-primary;
@menu-highlight-danger-color: @fluctuation-rise-rise;
@menu-item-active-bg: @primary-1;
@menu-item-active-danger-bg: @red-1;
@menu-item-active-border-width: 3px;
@menu-item-group-title-color: @text-color-secondary;
@menu-item-vertical-margin: 4px;
@menu-item-font-size: @font-size-base;
@menu-item-boundary-margin: 8px;
@menu-item-padding-horizontal: 20px;
@menu-item-padding: 0 @menu-item-padding-horizontal;
@menu-horizontal-line-height: 46px;
@menu-icon-margin-right: 10px;
@menu-icon-size: @menu-item-font-size;
@menu-icon-size-lg: @font-size-lg;
@menu-item-group-title-font-size: @menu-item-font-size;

// dark theme
@menu-dark-color: @text-color-secondary-dark;
@menu-dark-danger-color: @fluctuation-rise-rise;
@menu-dark-bg: @layout-header-background;
@menu-dark-arrow-color: #fff;
@menu-dark-inline-submenu-bg: #000c17;
@menu-dark-highlight-color: #fff;
@menu-dark-item-active-bg: @brand-primary;
@menu-dark-item-active-danger-bg: @fluctuation-rise-rise;
@menu-dark-selected-item-icon-color: @white;
@menu-dark-selected-item-text-color: @white;
@menu-dark-item-hover-bg: transparent;
// Spin
// ---
@spin-dot-size-sm: 14px;
@spin-dot-size: 24px;
@spin-dot-size-lg: 32px;
@spin-container-bg: @bg-page-90;

// Table
// --
@table-bg: @bg-page;
@table-header-bg: @fluctuation-flat-light-1;
@table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base;
@table-body-sort-bg: @bg-page;
@table-row-hover-bg: @table-hover-bar;
@table-selected-row-color: inherit;
@table-selected-row-bg: @table-hover-bar-select;
@table-body-selected-sort-bg: @table-selected-row-bg;
@table-selected-row-hover-bg: ~'var(--@{wd-prefix}-brand-primary-active-deprecated-d-02)';
@table-expanded-row-bg: @bg-page;
@table-padding-vertical: 16px;
@table-padding-horizontal: 16px;
@table-padding-vertical-md: (@table-padding-vertical * 3 / 4);
@table-padding-horizontal-md: (@table-padding-horizontal / 2);
@table-padding-vertical-sm: (@table-padding-vertical / 2);
@table-padding-horizontal-sm: (@table-padding-horizontal / 2);
@table-border-color: @border-color-split;
@table-border-primary-color: @border-color-primary;
// @table-expand-icon-top: -1px;
@table-expand-icon-color: @brand-text;
@table-expand-icon-margin-right: 4px;
@table-border-radius-base: @border-radius-base;
@table-footer-bg: @background-color-light;
@table-footer-color: @heading-color;
@table-header-bg-sm: @table-header-bg;
@table-font-size: @font-size-sm;
@table-font-size-md: @table-font-size;
@table-font-size-sm: @table-font-size;
@table-header-cell-split-color: rgba(0, 0, 0, 0.06);
@table-header-padding-vertical: 4px;
@table-header-padding-horizontal: 12px;
@table-header-cell-action-padding: @padding-xss @padding-sm - 1;
@table-body-padding-vertical: 7px;
@table-header-font-color: @text-secondary;
// @table-header-backgroound: @fill-fill-deep;
@table-header-border-color: @line-table;
@table-body-border-color: @line-table;
@table-left-box-shadow: @shadow-module-left;
@table-right-box-shadow: @shadow-module-right;
@table-operation-left: 8px;

// Sorter
// Legacy: `table-header-sort-active-bg` is used for hover not real active
@table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
@table-fixed-header-sort-active-bg: hsv(0, 0, 96%);

// Filter
@table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
@table-filter-btns-bg: inherit;
@table-filter-dropdown-bg: @dropdown-menu-bg;
@table-filter-active-color: @brand-text;
@table-filter-hover-background-color: @sp-hover-bar;
@table-filter-active-background-color: @sp-hover-bar-active;
@table-filter-dropdown-min-width: 140px;
@table-filter-dropdown-max-width: 260px;
@table-filter-dropdown-input-width: 244px;
@table-filter-dropdown-menu-padding: 8px 8px 0;
@table-filter-dropdown-menu-item-padding: 0 8px;
@table-filter-dropdown-menu-item-line-height: 28px;
@table-filter-dropdown-btns-padding: 4px 8px 8px;
@table-filter-dropdown-wrapper-span-padding-left: 8px;
@table-filter-dropdown-menu-title-content-padding: 0 8px;
@table-filter-dropdown-btns-button-font-size: 12px;
@table-filter-dropdown-wrapper-height: 14px;
@table-filter-dropdown-multiple-wrapper-padding: 0 8px;
@table-filter-dropdown-radio-wrapper-padding: 0 4px;
@table-filter-dropdown-radio-btns-button-margin: 4px 0 0;
@table-filter-dropdown-btns-margin-top: 4px;
@table-filter-dropdown-item-selected-background-color: @primary-1;
@table-expand-icon-bg: @component-background;
@table-selection-column-width: 32px;
// Sticky
@table-sticky-scroll-bar-bg: fade(#000, 35%);
@table-sticky-scroll-bar-radius: 4px;
// body
@table-body-cell-operability-bg: @table-hover-bar-active;
@table-body-cell-action-padding: @padding-xss @padding-xs @padding-xss - 1px;
// module
@table-module-empty-table-height: 228px;
// view
@table-view-empty-height: 306px;

// Scroll
@scroll-bar-width: 4px;
@scroll-bar-height: 4px;

// Tag
// --
@tag-default-bg: @background-color-light;
@tag-default-color: @text-color;
@tag-font-size: @font-size-sm;
@tag-line-height: @line-height-base;
@tag-border-radius: @border-radius-xs;
@tag-region-type-width: 21px;
@tag-region-type-height: @tag-line-height - 4px;
@tag-region-type-big-width: 24px;
@tag-region-type-big-height: @tag-line-height - 2px;
@tag-popover-height: @tag-line-height - 2px;
@tag-popover-padding: 0 @padding-xss - 2px;
@tag-popover-border-color: @line-border;
@tag-popover-font-size: @font-size-sm;
@tag-popover-color: @text-tertiary;
@tag-popover-font-weight: @base-weight-font + 100;
@tag-popover-bg-color: @bg-page;
@tag-long-padding: 0 @padding-xs;
@tag-short-padding: 0 @padding-xss;
// TimePicker
// ---
@picker-bg: transparent;
@picker-active-bg: @bg-page;
@picker-basic-cell-hover-color: @item-hover-bg;
@picker-basic-cell-active-with-range-color: @brand-extra-light;
@picker-basic-cell-hover-with-range-color: @brand-lighter;
@picker-basic-cell-disabled-bg: @sp-hover-bar;
@picker-basic-today-padding: 7px 18px;
@picker-border-color: @line-devide;
@picker-date-hover-range-border-color: ~'var(--@{wd-prefix}-brand-primary-deprecated-l-20)';
@picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color;
@picker-date-active-range-color: @sp-hover-bar;
@picker-time-panel-column-width: 64px;
@picker-month-panel-column-width: 72px;
@picker-month-panel-before-left: -4px;
@picker-range-hover-start-border-radius: 16px 0 0 16px;
@picker-range-hover-end-border-radius: 0 16px 16px 0;

@picker-year-panel-cell-before-height: 30px;
@picker-year-panel-cell-before-line-height: 30px;
@picker-year-panel-range-hover-start-border-radius: 15px 0 0 15px;

@picker-month-panel-width: 208px;
@picker-month-panel-height: 156px;
@picker-year-panel-height: 144px;
@picker-quarter-panel-width: 272px;
// month
@picker-month-panel-cell-padding: 4px;
@picker-month-panel-today-bottom: 0px;
@picker-month-panel-today-border: 2px;
@picker-month-panel-today-brfore-bottom: 1px;
@picker-month-panel-padding: 20px 16px;
@picker-month-panel-cell-td-padding: @padding-xss + 2px 0;
@picker-month-panel-cell-td-height: @height-bg - 2px;
@picker-month-year-panel-cell-before-height: @height-base - 2px;
@picker-month-year-panel-body-padding: @padding-xs + 1px @padding-sm;

@picker-year-panel-cell-td-height: @height-base;
@picker-year-panel-body-padding: @padding-xs + 1px @padding-sm;

@picker-time-panel-column-height: 224px;
@picker-time-panel-cell-height: 24px;
@picker-time-panel-cell-padding: 0 0 4px;
@picker-time-panel-cell-margin-top: @margin-xs;
@picker-quarter-panel-cell-height: 24px;
@picker-panel-after-top: -4px;
@picker-panel-after-bottom: -4px;
@picker-panel-after-left: -4px;
@picker-panel-cell-height: 32px;
@picker-panel-cell-td-height: 36px;
@picker-panel-cell-td-before-height: 32px;
@picker-panel-cell-td-padding-bottom: 4px;
@picker-panel-cell-width: 32px;
@picker-panel-cell-margin-top: @margin-xss;
@picker-month-panel-tbody-tr-padding: 6px 0;
@picker-year-panel-tbody-tr-padding: 4px 0;
@picker-text-height: 40px;
@picker-panel-without-time-cell-height: 66px;

@picker-panel-cell-today-width: 4px;
@picker-suffix-color: @icon-tertiary;
@picker-suffix-hover-color: @icon-primary;
@picker-panel-header-verical-padding: @padding-xss - 2px;
@picker-panel-header-title-color: @brand-text;
@picker-panel-header-color: @text-secondary;
@picker-panel-header-height: 32px;
@picker-panel-header-font-size: @font-size-sm;
@picker-panel-header-icon-size: @font-size-lg;
@picker-panel-header-icon-color: @icon-secondary;
@picker-panel-header-icon-hover-color: @icon-primary;
@picker-panel-header-button-size: 24px;
@picker-panel-header-button-hover-color: @icon-primary;
@picker-panel-header-button-bg-hover-color: @sp-hover-bar;
@picker-panel-body-verical-padding: @padding-md + 4px;
@picker-panel-body-selected-color: @text-white;
@picker-panel-body-today-color: @brand-text;
@picker-panel-body-today-padding: 3px @padding-xs;
@picker-panel-body-today-margin: 0 12px;
@picker-panel-body-today-width: calc(100% - 24px);
@picker-panel-footer-height: 40px;
@picker-condition-disable-color: @text-disable;
@picker-condition-bg-color: @fill-fill;
@picker-condition-bg-hover-color: @sp-hover-bar-active;
@picker-condition-label-color: @text-secondary;
@picker-condition-bg-focused-color: @bg-page;
@picker-condition-border-color: @brand-primary;
@picker-separator-color: @icon-tertiary;
@picker-shortcuts-padding: @padding-sm @padding-xs;
@picker-shortcuts-border-color: @line-devide;
@picker-shortcuts-width: 80px;
@picker-panel-today-font-size: @font-size-sm;
@picker-range-height: 46px;
@picker-show-time-footer-bottom: 0;
@picker-show-time-footer-right: 0;
@picker-show-time-footer-width: 194px;
@picker-show-time-footer-border-top: 1px solid var(--wd-line-devide);
@picker-show-time-now-btn-padding: 4px 8px;
@picker-show-time-ranges-padding: 3px 8px;
@picker-show-time-ranges-min-padding: 2px 3px;
@picker-show-time-footer-now-btn-border-radius: 4px;
@picker-show-time-footer-now-btn-height: 18px;
@picker-show-time-time-panel-width: 194px;
@picker-show-time-panel-content-margin-bottom: 40px;
@picker-show-time-panel-column-margin-top: 8px;
@picker-show-time-columns-2-width: 129px;
@picker-show-time-columns-1-width: 128px;
@picker-scroll-bar-padding: 2px;

// Calendar
// ---
@calendar-bg: @bg-page;
@calendar-input-bg: @input-bg;
@calendar-border-color: @border-color-inverse;
@calendar-item-active-bg: @item-active-bg;
@calendar-column-active-bg: ~'var(--@{wd-prefix}-brand-primary-active-deprecated-f-30)';
@calendar-full-bg: @calendar-bg;
@calendar-full-panel-bg: @calendar-full-bg;
@calendar-cell-margin: 2px;
@calendar-thead-line-height: 32px;
@calendar-date-content-padding: 8px 0 18px;
@calendar-date-content-line-height: 40px;
@calendar-month-tr-margin: 2px;
@calendar-picker-body-th-padding: 0 12px 5px 0;
@calendar-picker-body-th-line-height: 18px;
@calendar-date-padding: 8px;
@calendar-date-value-line-height: 26px;
@calendar-date-value-width: 26px;
@calendar-date-today-border-radius: 13px;
@calendar-mini-th-height: 256px;
@calendar-mini-content-th-height: 18px;
@calendar-mini-tbody-td-height: 60px;
@calendar-mini-date-content-line-height: 18px;
@calendar-header-date-picker-width: 100px;
@calendar-header-mode-switch-margin-right: 12px;
@calendar-header-mode-switch-height: 28px;
@calendar-full-date-width: 100%;
@calendar-picker-btn-current-time-color: @brand-text;
@calendar-picker-btn-current-time-font-size: @font-size-sm;
@calendar-picker-btn-current-time-hover-color: @brand-text;
@calendar-date-content-padding-top: 8px;
@calendar-close-market-color: @text-tertiary;
@calendar-date-content-background-color: @fill-fill;
@calendar-date-content-background-color-hover: @fluctuation-flat-light-2;
@calendar-date-content-future-color: @text-secondary;
@calendar-date-content-error-background-color: @fluctuation-rise-light-1;
@calendar-date-content-error-background-color-hover: @fluctuation-rise-light-2;
@calendar-date-content-error-color: @fluctuation-rise-text;
@calendar-date-content-success-background-color: @fluctuation-fall-light-1;
@calendar-date-content-success-background-color-hover: @fluctuation-fall-light-2;
@calendar-date-content-success-color: @fluctuation-fall-text;
@calendar-date-content-shadow-hover: @shadow-100-canvas;
@calendar-date-panel-border: 2px solid @bg-page;
@calendar-date-panel-border-radius: @border-radius-base;
@calendar-date-panel-padding-none: 0;
@calendar-date-panel-padding: 2px;
@calendar-full-content-height: 100%;
@calendar-date-panel-thead-th-padding:0 2px 2px;

// Carousel
// ---
@carousel-dot-width: 16px;
@carousel-dot-height: 3px;
@carousel-dot-active-width: 24px;

// Badge
// ---
@badge-height: 20px;
@badge-height-sm: 14px;
@badge-dot-size: 6px;
@badge-font-size: @font-size-sm;
@badge-font-size-sm: @font-size-sm;
@badge-font-weight: normal;
@badge-status-size: 6px;
@badge-text-color: @component-background;
@badge-color: @highlight-color;

// Rate
// ---
@rate-star-color: @yellow-6;
@rate-star-bg: @border-color-split;
@rate-star-size: 20px;
@rate-star-hover-scale: scale(1.1);

// Card
// ---
@card-head-color: @heading-color;
@card-head-background: transparent;
@card-head-font-size: @font-size-lg;
@card-head-font-size-sm: @font-size-base;
@card-head-padding: 16px;
@card-head-padding-sm: (@card-head-padding / 2);
@card-head-height: 48px;
@card-head-height-sm: 36px;
@card-inner-head-padding: 12px;
@card-padding-base: 24px;
@card-padding-base-sm: (@card-padding-base / 2);
@card-actions-background: @component-background;
@card-actions-li-margin: 12px 0;
@card-skeleton-bg: #cfd8dc;
@card-background: @component-background;
@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),
  0 5px 12px 4px rgba(0, 0, 0, 0.09);
@card-radius: @border-radius-base;
@card-head-tabs-margin-bottom: -17px;
@card-head-extra-color: @text-color;

// Comment
// ---
@comment-bg: inherit;
@comment-padding-base: @padding-md 0;
@comment-nest-indent: 44px;
@comment-font-size-base: @font-size-base;
@comment-font-size-sm: @font-size-sm;
@comment-author-name-color: @text-color-secondary;
@comment-author-time-color: #ccc;
@comment-action-color: @text-color-secondary;
@comment-action-hover-color: #595959;
@comment-actions-margin-bottom: inherit;
@comment-actions-margin-top: @margin-sm;
@comment-content-detail-p-margin-bottom: inherit;

// Tabs
// ---
@tabs-card-head-background: @background-color-light;
@tabs-card-height: 40px;
@tabs-card-active-color: @brand-primary;
@tabs-card-horizontal-padding: (
    (@tabs-card-height - floor(@font-size-base * @line-height-base)) / 2
  ) - @border-width-base @padding-md;
@tabs-card-horizontal-padding-sm: 6px @padding-md;
@tabs-card-horizontal-padding-lg: 7px @padding-md 6px;
@tabs-button-horizontal-padding-md: 4px 8px;
@tabs-button-horizontal-padding-sm: 2px 6px;
@tabs-title-font-size: @font-size-base;
@tabs-title-font-size-lg: @font-size-lg - 1px;
@tabs-title-font-size-sm: @font-size-base;
@tabs-title-font-size-xs: @font-size-sm;
@tabs-title-line-line-height-xs: @line-height-base + 6px;
@tabs-ink-bar-color: @brand-primary;
@tabs-bar-margin: 0 0 @margin-md 0;
@tabs-horizontal-gutter: 32px;
@tabs-horizontal-margin: 0 0 0 @tabs-horizontal-gutter;
@tabs-horizontal-margin-rtl: 0 0 0 32px;
@tabs-horizontal-padding: @padding-sm 0;
@tabs-horizontal-padding-lg: @padding-xs 0;
@tabs-horizontal-padding-bg: 2px 0;
@tabs-horizontal-padding-sm: @padding-xss 0;
@tabs-horizontal-padding-xs: 1px 0;
@tabs-vertical-padding: @padding-xs @padding-lg;
@tabs-vertical-margin: @margin-md 0 0 0;
@tabs-scrolling-size: 32px;
@tabs-highlight-color: @brand-primary;
@tabs-hover-color: @brand-primary;
@tabs-active-color: @primary-7;
@tabs-card-gutter: 2px;
@tabs-button-big-gutter: 4px;
@tabs-card-tab-active-border-top: 2px solid transparent;
@tabs-font-line-height: @line-height-base + 10px;
@tabs-padding-aside: @padding-sm - 6px 0;
@tabs-btn-hover: @fluctuation-flat-light-1;
@tabs-padding-sm: @padding-sm - 8px 0;
@tabs-position-border-color: @line-devide;

@tabs-tab-nav-wrap-width: 20px;
@tabs-tab-nav-wrap-before-left: 20px;
@tabs-tab-nav-wrap-after-right: -20px;
@tabs-tab-nav-wrap-height: 20px;
@tabs-tab-nav-wrap-after-height: 20px;
@tabs-tab-nav-wrap-after-top: 4px;
@tabs-tab-nav-wrap-before-top: 20px;
@tabs-tab-nav-wrap-after-bottom: -20px;
@tabs-tab-padding: 5px 9px;
@tabs-tab-margin-left: 12px;
@tabs-tab-btn-line-height: @line-height-base;
@tabs-dropdown-border-radius: @border-radius-big;
@tabs-dropdown-menu-padding: 4px;
@tabs-dropdown-menu-item-min-width: 110px;
@tabs-dropdown-menu-item-max-width: 172px;
@tabs-dropdown-menu-item-padding: 5px 8px;
@tabs-dropdown-menu-item-line-height: @line-height-base;
@tabs-dropdown-menu-item-border-radius: @border-radius-base;
@tabs-dropdown-menu-item-margin-bottom: 4px;
@tabs-dropdown-menu-item-height: 28px;
@tabs-tab-last-margin-right: 16px;
@tabs-nav-operations-margin-right: 16px;
@tabs-nav-operations-nav-add-margin-left: 10px;
@tabs-nav-operations-nav-more-width: 20px;
@tabs-nav-operations-nav-more-height: 20px;
@tabs-nav-operations-nav-more-font-size: @font-size-sm;
@tabs-button-nav-operations-nav-more-width: 28px;
@tabs-button-nav-operations-nav-more-height: 28px;
@tabs-button-nav-operations-nav-more-font-size: 16px;
@tabs-text-nav-operations-nav-more-width: 20px;
@tabs-text-nav-operations-nav-more-height: 20px;
@tabs-text-nav-operations-nav-more-font-size: @font-size-sm;
@tabs-nav-operations-nav-more-border-radius: 4px;
@tabs-nav-operations-nav-more-color: @brand-text;
@tabs-nav-operations-nav-more-background-color: @fill-fill;
@tabs-nav-operations-nav-more-hover-background-color: @fill-fill-deep;
@tabs-nav-operations-nav-more-focus-background-color: @brand-extra-light;
@tabs-tab2-padding: 5px 0;
@tabs-tab2-btn-line-height: @line-height-base;
@tabs-right-tab-padding: 1px 8px;
@tabs-right-tab-last-margin: 0 0 16px;
@tabs-right-nav-add-margin-top: 10px;

@tabs-extra-small-tab-padding: 1px 0;
@tabs-extra-small-tab-after-padding: 2px;
@tabs-extra-small-tab-font-size: @font-size-sm;
@tabs-extra-small-tab-btn-line-height: @line-height-base;
@tabs-extra-small-nav-more-font-size: @font-size-sm - 2px;
@tabs-extra-small-nav-more-width: 16px;
@tabs-extra-small-nav-more-height: 16px;
@tabs-extra-small-button-nav-more-font-size: @font-size-sm;
@tabs-extra-small-button-nav-more-width: 20px;
@tabs-extra-small-button-nav-more-height: 20px;
@tabs-extra-small-text-nav-more-font-size: @font-size-sm - 2px;
@tabs-extra-small-text-nav-more-width: 16px;
@tabs-extra-small-text-nav-more-height: 16px;
@tabs-extra-small-button-tab-padding: 1px 5px;
@tabs-extra-small-button-tab-margin-left: 10px;
@tabs-extra-small-text-tab-padding: 1px 0;
@tabs-extra-small-text-font-size: @font-size-sm;
@tabs-extra-small-text-line-height: @line-height-base;
@tabs-extra-small-card-padding: 1px 5px;
@tabs-extra-small-ink-bar-height: 1px;

@tabs-small-tab-padding: 3px 0;
@tabs-small-tab-after-padding: 3px;
@tabs-small-nav-more-font-size: @font-size-base - 2px;
@tabs-small-nav-more-width: 18px;
@tabs-small-nav-more-height: 18px;
@tabs-small-button-nav-more-font-size: @font-size-sm + 2px;
@tabs-small-button-nav-more-width: 24px;
@tabs-small-button-nav-more-height: 24px;
@tabs-small-text-nav-more-font-size: @font-size-sm - 2px;
@tabs-small-text-nav-more-width: 18px;
@tabs-small-text-nav-more-height: 18px;
@tabs-small-button-tab-padding: 3px 7px;
@tabs-small-button-tab-margin-left: 12px;
@tabs-small-text-tab-padding: 3px 0;
@tabs-small-card-padding: 3px 7px;
@tabs-small-ink-bar-height: 1px;

@tabs-big-tab-padding: 5px 0;
@tabs-big-tab-after-padding: 6px;
@tabs-big-nav-tab-font-size: @font-size-base-15;
@tabs-big-tab-btn-line-height: @line-height-normal;
@tabs-big-nav-more-font-size: @font-size-bg;
@tabs-big-nav-more-width: 20px;
@tabs-big-nav-more-height: 20px;
@tabs-big-button-nav-more-font-size: 20px;
@tabs-big-button-nav-more-width: 32px;
@tabs-big-button-nav-more-height: 32px;
@tabs-big-text-nav-more-font-size: @font-size-sm;
@tabs-big-text-nav-more-width: 20px;
@tabs-big-text-nav-more-height: 20px;
@tabs-big-button-tab-padding: 5px 11px;
@tabs-big-button-tab-btn-line-height: @line-height-normal;
@tabs-big-button-tab-margin-left: 14px;
@tabs-big-text-tab-padding: 5px 0;
@tabs-big-card-padding: 5px 11px;
@tabs-big-card-font-size: @font-size-base-15;
@tabs-big-text-font-size: @font-size-base-15;
@tabs-big-card-tab-btn-line-height: @line-height-normal;

@tabs-large-tab-padding: 11px 0;
@tabs-large-tab-after-padding: 12px;
@tabs-large-nav-tab-font-size: @font-size-base-15;
@tabs-large-tab-btn-line-height: @line-height-normal;
@tabs-large-nav-more-font-size: @font-size-bg;
@tabs-large-nav-more-width: 20px;
@tabs-large-nav-more-height: 20px;
@tabs-large-button-nav-more-font-size: 24px;
@tabs-large-button-nav-more-width: 44px;
@tabs-large-button-nav-more-height: 44px;
@tabs-large-text-nav-more-font-size: @font-size-sm;
@tabs-large-text-nav-more-width: 20px;
@tabs-large-text-nav-more-height: 20px;
@tabs-large-button-tab-padding: 11px 15px;
@tabs-large-button-tab-btn-line-height: @line-height-normal;
@tabs-large-button-tab-margin-left: 16px;
@tabs-large-text-tab-padding: 11px 0;
@tabs-large-card-padding: 11px 15px;
@tabs-large-card-font-size: @font-size-base-15;
@tabs-large-text-font-size: @font-size-base-15;
@tabs-large-card-tab-btn-line-height: @line-height-normal;

@tabs-text-tab-margin-left: 24px;
@tabs-text-tab-padding: 5px 0;
@tabs-text-tab-btn-line-height: @line-height-base;

// BackTop
// ---
@back-top-color: #fff;
@back-top-bg: @text-color-secondary;
@back-top-hover-bg: @text-color;

// Avatar
// ---
@avatar-size-base: 32px;
@avatar-size-lg: 40px;
@avatar-size-sm: 24px;
@avatar-font-size-base: 18px;
@avatar-font-size-lg: 24px;
@avatar-font-size-sm: 14px;
@avatar-bg: #ccc;
@avatar-color: #fff;
@avatar-border-radius: @border-radius-base;
@avatar-group-overlapping: -8px;
@avatar-group-space: 3px;
@avatar-group-border-color: #fff;

// Switch
// ---
@switch-height: @height-xs;
@switch-sm-height: 16px;
@switch-min-width: 44px;
@switch-sm-min-width: 28px;
@switch-disabled-opacity: 0.4;
@switch-disabled-color: @icon-disable;
@switch-disabled-bg: @fill-fill-deeper;
@switch-disabled-color-checked: @brand-disable;
@switch-disabled-bg-checked: @brand-disable;
@switch-color: @brand-primary;
@switch-bg: @icon-white;
@switch-shadow: @shadow-200-drop;
@switch-padding: @padding-xss;
@switch-small-padding: @padding-xss - 2px;
@switch-inner-margin-min: ceil(@switch-height * 0.3);
@switch-inner-margin-max: ceil(@switch-height * 1.1);
@switch-sm-inner-margin-min: ceil(@switch-sm-height * 0.3);
@switch-sm-inner-margin-max: ceil(@switch-sm-height * 1.1);

// Pagination
// ---
@pagination-item-bg: transparent;
@pagination-item-size: @height-base - 2px;
@pagination-item-size-sm: 24px;
@pagination-font-family: @font-family;
@pagination-font-weight-active: 500;
@pagination-item-bg-active: transparent;
@pagination-item-link-bg: transparent;
@pagination-item-disabled-color-active: @disabled-color;
@pagination-item-disabled-bg-active: @disabled-active-bg;
@pagination-item-input-bg: transparent;
@pagination-mini-options-size-changer-top: 0px;
@pagination-border-radius: @border-radius-base;
@pagination-total-text-color: @text-secondary;
@pagination-total-text-right: 16px;
@pagination-font-size: @font-size-sm;
@pagination-item-ellipsis-size: @font-size-lg;

// PageHeader
// ---
@page-header-line-height: 32px;
@page-header-title-margin-right: @margin-xs + 2px;
@page-header-bg-color: @bg-page;
@page-header-padding: @padding-xs + 1px;
@page-header-padding-vertical: @padding-sm + 1px;
@page-header-padding-breadcrumb: @padding-sm;
@page-header-content-padding-vertical: @padding-sm;
@page-header-back-color: #000;
@page-header-ghost-bg: inherit;
@page-header-heading-title: @font-size-lg;
@page-header-heading-sub-title: 14px;
@page-header-tabs-tab-font-size: 16px;

// Breadcrumb
// ---
@breadcrumb-base-color: @text-color-secondary;
@breadcrumb-last-item-color: @text-color;
@breadcrumb-font-size: @font-size-base;
@breadcrumb-icon-font-size: @font-size-base;
@breadcrumb-link-color: @text-color-secondary;
@breadcrumb-link-color-hover: @primary-5;
@breadcrumb-separator-color: @text-color-secondary;
@breadcrumb-separator-margin: 0 @padding-xs;

// Slider
// ---
@slider-margin: 10px 6px 10px;
@slider-rail-background-color: @background-color-base;
@slider-rail-background-color-hover: #e1e1e1;
@slider-track-background-color: @primary-3;
@slider-track-background-color-hover: @primary-4;
@slider-handle-border-width: 2px;
@slider-handle-background-color: @component-background;
@slider-handle-color: @primary-3;
@slider-handle-color-hover: @primary-4;
@slider-handle-color-focus: ~'var(--@{wd-prefix}-brand-primary-deprecated-t-20)';
@slider-handle-color-focus-shadow: ~'var(--@{wd-prefix}-brand-primary-deprecated-f-12)';
@slider-handle-color-tooltip-open: @brand-primary;
@slider-handle-size: 14px;
@slider-handle-margin-top: -5px;
@slider-handle-shadow: 0;
@slider-dot-border-color: @border-color-split;
@slider-dot-border-color-active: ~'var(--@{wd-prefix}-brand-primary-deprecated-t-50)';
@slider-disabled-color: @disabled-color;
@slider-disabled-background-color: @component-background;

// Tree
// ---
@tree-bg: transparent;
@tree-font-size: @font-size-sm;
@tree-title-height: (@height-sm / 2);
@tree-title-color: @icon-secondary;
@tree-title-margin: (@padding-xs / 2) + 1px;
@tree-child-padding: @padding-md + 2px;
@tree-directory-selected-color: #fff;
@tree-directory-selected-bg: @brand-primary;
@tree-node-hover-bg: @sp-hover-bar;
@tree-node-selected-bg: @sp-hover-bar-select;
@tree-node-height: @height-base;
@tree-node-radius: @border-radius-sm;
@tree-node-margin: (@padding-xs / 2);
@tree-node-base-padding: 0 @padding-xss;
@tree-node-indent-unit-margin-right: @margin-xss;

// Collapse
// ---
@collapse-header-padding: @padding-sm @padding-md;
@collapse-header-padding-extra: 40px;
@collapse-header-bg: @background-color-light;
@collapse-content-padding: @padding-md;
@collapse-content-bg: @component-background;
@collapse-header-arrow-left: 16px;
@collapse-item-margin-left: @margin-sm;
@collapse-button-margin-left: @margin-xs;
@collapse-button-box-margin-left: @margin-md + 2px;

// Skeleton
// ---
@skeleton-color: rgba(190, 190, 190, 0.2);
@skeleton-to-color: shade(@skeleton-color, 5%);
@skeleton-paragraph-margin-top: 28px;
@skeleton-paragraph-li-margin-top: @margin-md;
@skeleton-paragraph-li-height: 16px;
@skeleton-title-height: 16px;
@skeleton-title-paragraph-margin-top: @margin-lg;

// Transfer
// ---
@transfer-header-height: 40px;
@transfer-item-height: @height-base;
@transfer-disabled-bg: @disabled-bg;
@transfer-list-height: 200px;
@transfer-item-hover-bg: @item-hover-bg;
@transfer-item-selected-hover-bg: ~'var(--@{wd-prefix}-brand-primary-active-deprecated-d-02)';
@transfer-item-padding-vertical: 6px;
@transfer-list-search-icon-top: 12px;

// Message
// ---
@message-notice-content-padding: 12px 16px;
@message-notice-content-bg: @bg-tooltip;
@message-notice-content-title-padding: 16px;
@message-line-height: 22px;
@message-icon-font-size: 20px;
@message-notice-content-color: @text-primary;
@message-notice-content-message-color: @text-secondary;
@message-close-icon-color: @icon-secondary;
@message-notive-content-shadow: @shadow-300-modal;
// Motion
// ---
@wave-animation-width: 6px;

// Alert
// ---
@alert-success-border-color: @fluctuation-fall-deprecated-border;
@alert-success-bg-color: @fluctuation-fall-light-1;
@alert-success-icon-color: @fluctuation-fall-fall;
@alert-info-border-color: @trade-buy-buy-deprecated-border;
@alert-info-bg-color: @trade-buy-light-1;
@alert-info-icon-color: @trade-buy-buy;
@alert-warning-border-color: @trade-selling-sellinging-deprecated-border;
@alert-warning-bg-color: @trade-selling-light-1;
@alert-warning-icon-color: @trade-selling-sellinging;
@alert-error-border-color: @fluctuation-rise-rise-deprecated-border;
@alert-error-bg-color: @fluctuation-rise-light-1;
@alert-error-icon-color: @fluctuation-rise-rise;
@alert-message-color: @heading-color;
@alert-text-color: @text-color;
@alert-close-color: @text-color-secondary;
@alert-close-hover-color: @icon-color-hover;
@alert-no-icon-padding-vertical: @padding-xs;
@alert-with-description-no-icon-padding-vertical: @padding-md - 1px;
@alert-with-description-padding-vertical: @padding-md - 1px;
@alert-with-description-padding: 12px 24px 12px 16px;
@alert-icon-top: 8px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2);
@alert-with-description-icon-size: 24px;
@alert-header-close-size: 18px;
@alert-icon-size: 18px;
@alert-icon-width: 20px;
@alert-icon-margin-right: 8px;

// List
// ---
@list-header-background: transparent;
@list-footer-background: transparent;
@list-empty-text-padding: @padding-md;
@list-item-padding: @padding-sm 0;
@list-item-padding-sm: @padding-xs @padding-md;
@list-item-padding-lg: 16px 24px;
@list-item-meta-margin-bottom: @padding-md;
@list-item-meta-avatar-margin-right: @padding-md;
@list-item-meta-title-margin-bottom: @padding-sm;
@list-customize-card-bg: @component-background;
@list-item-meta-description-font-size: @font-size-base;

// Statistic
// ---
@statistic-title-font-size: @font-size-base;
@statistic-content-font-size: 24px;
@statistic-unit-font-size: 24px;
@statistic-font-family: @font-family;

// Drawer
// ---
@drawer-header-padding: @padding-sm + 2px @padding-md;
@drawer-body-padding: @padding-xs @padding-md @padding-lg;
@drawer-bg: @bg-dialog;
@drawer-footer-padding-vertical: @modal-footer-padding-vertical;
@drawer-footer-padding-horizontal: @modal-footer-padding-horizontal;
@drawer-header-close-size: 56px;
@drawer-title-font-size: @font-size-lg;
@drawer-title-line-height: 22px;
@drawer-header-border-color: @line-table;
@drawer-header-close-margin: @margin-xss;
// Timeline
// ---
@timeline-width: 2px;
@timeline-color: @border-color-split;
@timeline-dot-border-width: 2px;
@timeline-dot-color: @brand-primary;
@timeline-dot-bg: @component-background;
@timeline-item-padding-bottom: 20px;

// Typography
// ---
@typography-title-font-weight: 600;
@typography-title-margin-top: 1.2em;
@typography-title-margin-bottom: 0.5em;

// Upload
// ---
@upload-actions-color: @text-color-secondary;

// Steps
// ---
@process-tail-color: @border-color-split;
@steps-nav-arrow-color: fade(@black, 25%);
@steps-background: @bg-dialog;
@steps-icon-size: @font-size-lg * 2;
@steps-icon-custom-size: @steps-icon-size;
@steps-icon-custom-top: 0px;
@steps-icon-custom-font-size: @font-size-lg + 8px;
@steps-icon-top: -1px;
@steps-icon-font-size: @font-size-lg;
@steps-icon-margin: 0 @margin-xs 0 0;
@steps-title-line-height: @height-base;
@steps-small-icon-size: @font-size-lg + 8px;
@steps-small-icon-margin: 0 @margin-xs 0 0;
@steps-dot-size: @font-size-sm - 2px;
@steps-dot-top: 2px;
@steps-current-dot-size: @font-size-sm - 2px;
@steps-description-max-width: 140px;
@steps-nav-content-max-width: auto;
@steps-vertical-icon-width: 16px;
@steps-vertical-tail-width: 16px;
@steps-vertical-tail-width-sm: 12px;
@steps-line-height: 2px;
@steps-title-font-size: @font-size-base-15;
@steps-description-line-height: 22px;
@steps-description-margin-top: 2px;
@steps-item-padding-left: @padding-xs;
@steps-item-padding-right: @padding-xs;
@steps-nav-item-after-width: 6px;
@steps-nav-item-after-height: 6px;
@steps-nav-item-after-margin-top: -(@margin-xss - 1px);
@steps-nav-item-after-margin-left: -(@margin-xs + 1px);
@steps-item-tail-top: 4px;
@steps-item-tail-line-height: 2px;
@steps-item-tail-after-margin-left: @margin-sm;
@steps-icon-dot-top: -12px;
@steps-icon-dot-left: -26px;
@steps-icon-dot-width: 60px;
@steps-icon-dot-height: 10px;
@steps-vertical-item-tail-width: 3px;
@steps-vertical-item-tail-after-width: 2px;

// Notification
// ---
@notification-bg: @component-background;
@notification-padding-vertical: 16px;
@notification-padding-horizontal: 24px;

//  Result
// ---
@result-title-font-size: 24px;
@result-subtitle-font-size: @font-size-base;
@result-icon-font-size: 72px;
@result-extra-margin: 24px 0 0 0;

// Image
// ---
@image-size-base: 48px;
@image-font-size-base: 24px;
@image-bg: #f5f5f5;
@image-color: #fff;
@image-mask-font-size: 16px;
@image-preview-operation-size: 18px;
@image-preview-operation-color: @text-color-dark;
@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%);

// popconfirm
@popconfirm-padding-vertical: 16px;
@popconfirm-padding-horizontal: 16px;
@popconfirm-bg-color: @bg-dropdown;
@popconfirm-content-color: @text-secondary;
@popconfirm-content-font-size: @font-size-sm;
@popconfirm-message-line-height: @line-height-base + 4px;
@popconfirm-message-horizontal: 24px;
@popconfirm-message-color: @text-primary;

// segmented
@segmented-bg-color: @fill-fill;
@segmented-color: @text-secondary;
@segmented-selected-bg-color: @fill-blank-lighter;
@segmented-selected-color: @text-primary;
@segmented-padding: 2px;
// @segmented-height-lg: @height-lg - 2px;
@segmented-height-bg: @height-bg - 4px;
@segmented-height: @height-base - 4px;
@segmented-height-sm: @height-sm - 4px;
@segmented-height-xs: @height-xs - 4px;
@segmented-border-radius: @border-radius-sm;
@segmented-font-size-base: @font-size-base + 1px;
// @segmented-font-size-lg: @segmented-font-size-base;
@segmented-font-size-bg: @segmented-font-size-base;
@segmented-font-size-sm: @font-size-sm;
@segmented-font-size-xs: @segmented-font-size-sm;
@segmented-item-horizontal-padding-base: @padding-sm - 2px;
@segmented-item-horizontal-padding-bg: @padding-sm;
@segmented-item-horizontal-padding-sm: @padding-xs;
@segmented-item-horizontal-padding-xs: @padding-xs;
@segmented-item-active-shadow: @shadow-100-canvas;
@segmented-item-hover-bg-color: @sp-hover-bar;
@segmented-item-hover-color: @text-primary;
@segmented-item-disable-bg-color: transparent;
@segmented-item-disable-color: @text-disable;
@segmented-item-selected-disable-bg-color: @sp-hover-bar;

@item-margin-padding-left: 2px;
@icon-font-size: 16px;
@chart-legend-more-width: 84px;
@symbol-margin-right: 9px;
@symbol-width: 8px;
@symbol-line-width: 10px;
@symbol-line-height: 3px;
@symbol-line-margin: 1px;
@symbol-line-margin-right: 10px;

@xaxis-font-size: @font-size-sm;
@xaxis-font-height: @line-height-base;
@xaxis-item-color: @text-secondary;

@chart-legend-font-size: @font-size-sm;
@chart-legend-icon-font-size: @icon-font-size;
@chart-legend-height: @line-height-base;
@chart-legend-margin-left: @margin-sm;
@chart-legend-color: @text-primary;
@chart-legend-symbol-color: @text-secondary;
@chart-legend-default-color: @text-disable;
@chart-legend-icon-color: @icon-secondary;
@chart-legend-display-color: @icon-disable;
@chart-legend-item-margin-padding-left: @item-margin-padding-left;
@chart-legend-item-margin: @margin-sm;
@chart-legend-symbol-margin-right: @symbol-margin-right;
@chart-legend-symbol-width: @symbol-width;
@chart-legend-symbol-height: @symbol-width;
@chart-legend-symbol-line-width: @symbol-line-width;
@chart-legend-symbol-line-height: @symbol-line-height;
@chart-legend-symbol-line-margin: @symbol-line-margin;
@chart-legend-symbol-line-margin-right: @symbol-line-margin-right;

@pie-height: 300px;
@center-number-margin-bottom: 6px;
@symbol-flex-basis: 8px;
@pie-symbol-margin-right: 8px;

@pie-chart-height: @pie-height;
@pie-chart-center-font-size: @font-size-sm;
@pie-chart-center-line-height: @line-height-base;
@pie-chart-center-title-color: @text-primary;
@pie-chart-center-number-margin-bottom: @center-number-margin-bottom;
@pie-chart-center-text-font-size: @font-size-base;

@pie-chart-legend-margin-bottom: @margin-sm;
@pie-chart-legend-padding-right: @padding-md;
@pie-chart-legend-font-size: @font-size-sm;
@pie-chart-legend-line-height: @line-height-base;
@pie-chart-legend-disabled: @text-disable;
@pie-chart-symbol-width: @symbol-width;
@pie-chart-symbol-height: @symbol-width;
@pie-chart-symbol-flex-basis: @symbol-flex-basis;
@pie-chart-symbol-margin-right: @pie-symbol-margin-right;

// 交易模型
@stgy-graph-node-light-border-radius: @border-radius-xs;
@stgy-graph-node-wrap-border-radius: @border-radius-xs;
@stgy-graph-node-border-radius: @border-radius-big;
@stgy-graph-node-dragging-border-radius: @border-radius-sm;
@stgy-graph-node-header-height: @height-base;
@stgy-graph-node-header-padding: @padding-xs - 1px @padding-sm;
@stgy-graph-node-header-font-size: @font-size-sm;
@stgy-graph-node-header-line-height: @line-height-base;
@stgy-graph-node-bottom-min-height: @height-sm;
@stgy-graph-node-bottom-padding: @padding-xss + 1px @padding-sm;
@stgy-graph-node-bottom-font-size: @font-size-sm;
@stgy-graph-delete-size: @icon-size-base + 4px;
@stgy-graph-btn-line-height: @line-height-base + 2px;
@stgy-graph-btn-size: @stgy-graph-delete-size + 2px;
@stgy-graph-shrink-text: @font-size-sm;
@stgy-graph-shrink-expand: @font-size-sm - 2px;
@stgy-graph-shrink-expand-border-radius: @border-radius-xs;
@stgy-graph-shrink-expand-icon-font-size: @font-size-lg;
@stgy-graph-shrink-expand-text-font-size: @font-size-sm;