@import "color/colors";
@import "color/light-palette";

// Prefix
@css-prefix: haloe-;
@css-prefix-iconfont: haloe-icon;

// color
// 预留颜色变亮，其他组件使用时可根据原型设置颜色值
@primary-color: @color-brand-primary;
@processing-color: @primary-color;
@warning-color: @gold-6;
@error-color: @color-functional-fail;
@error-hover-color: color(~`colorPalette('@{error-color}', 5) `);
@link-color: @primary-color;
@link-hover-color: tint(@link-color, 20%);
@link-active-color: shade(@link-color, 5%);
@selected-color: @primary-color;
@subsidiary-color: @color-complementary-5;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-xs-max: (@screen-xs-min - 1);

// Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;
@screen-sm-max: (@screen-sm-min - 1);

// Medium screen / desktop
@screen-md: 768px;
@screen-md-min: @screen-md;
@screen-md-max: (@screen-md-min - 1);

// Large screen / wide desktop
@screen-lg: 992px;
@screen-lg-min: @screen-lg;
@screen-lg-max: (@screen-lg-min - 1);

// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;
@screen-xl-max: (@screen-xl-min - 1);

// Extra extra large screen / large descktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;
@screen-xxl-max: (@screen-xxl-min - 1);

// Base
@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
  "Source Han Sans CN", sans-serif;
@code-family: Consolas,Menlo,Courier,monospace;
@font-size-base: 12px;
@font-size-small: 12px;
@font-size-middle: 14px;
@font-size-large: 16px;
@font-weight: normal;
@line-height-base: 1.5;
@line-height-computed: floor((@font-size-base * @line-height-base));
@cursor-disabled: not-allowed;
@height-xs: 20px;
@height-small: 28px;
@height-middle: 32px;
@height-base: 36px;
@height-large: 40px;
@text-color: @color-complementary-3;
@title-color: #17233d; // ★待定

// horizontal paddings
@padding-lg: 30px; // modal,notification
@padding-md: @height-xs; // tab,alert,message
@padding-base: 21px; // botton,tag
@padding-sm: 10px; // select,search,input

// Border
@border-width-base: 1px;   // width of the border for a component
@border-style-base: solid; // style of a components border
@border-radius-base: 4px;
@border-color-base: #dcdee2;  // outside ★待定
@color-border-message-info: @color-brand-primary;
@color-border-message-warning: @color-border-warning;
@color-border-message-error: @color-border-fail;
@color-border-message-success: @color-border-success;

@background-color-base:@color-complementary-13;
@border-radius-small: 4px;
@border-radius-big: 8px;
@border-color-base: @color-complementary-7;  // outside
@border-color-split: @color-complementary-8;  // inside

// Shadow
@shadow-color: @color-shadow3;
@shadow-base: @shadow-down;
@shadow-card: 0 1px 6px rgba(0, 0, 0, 0.4);
// @shadow-up              :
@shadow-down: 0 0 10px 0 @shadow-color;
// @shadow-left            :
// @shadow-right           :

// Button
@btn-height-base: 36px;
@btn-height-middle: 32px;
@btn-height-small: 28px;

@btn-padding-base: 0 @padding-base - 1px;
@btn-padding-middle: 0 @padding-base - 5px;
@btn-padding-small: 0 @padding-sm + 2px;

@btn-font-weight: normal;
@btn-padding-base-icon: 5px 15px 6px;
@btn-padding-middle-icon: 5px 15px 6px;
@btn-padding-small-icon: 1px 7px 2px;
@btn-font-size: @font-size-base;
@btn-font-size-middle: @font-size-middle;
// @btn-font-size-middle: @font-size-base;
@btn-font-size-small: @font-size-base;
@btn-font-size-large: @font-size-large;
@btn-border-radius: @border-radius-base;
@btn-border-radius-middle: @border-radius-base;
@btn-border-radius-small: @border-radius-base;
@btn-group-border: shade(@color-brand-primary, 5%);

@btn-active-color: @color-brand-active;
@btn-hover-color: @color-brand-hover;

@btn-disable-color: @color-text-disabled;
@btn-disable-bg: @color-complementary-8;
@btn-disable-border: @color-complementary-7;

@btn-primary-disable-color: @color-functional-white;
@btn-primary-disable-bg: @color-brand-disabled1;
@btn-primary-disable-border: @color-brand-disabled1;

@btn-secondary-disable-color: @color-functional-pause;
@btn-secondary-disable-bg: @color-bg-disable;
@btn-secondary-disable-border: @color-border-disable;

// 新规范：次按钮（没有边框）不可用
@btn-secondary-new-disable-color: @color-brand-disabled2;
@btn-secondary-new-disable-bg: @color-bg-page;
@btn-secondary-new-disable-border: @color-bg-page;

@btn-primary-color: @color-functional-white;
@btn-primary-hover-color: @color-brand-hover;
@btn-primary-bg: @color-brand-primary;
@btn-primary-border: @color-brand-primary;

@btn-secondary-color: @color-text-level1;
@btn-secondary-bg: @color-functional-white;
@btn-secondary-border: @color-scrollbar;

// 新规范：次按钮（没有边框）
@btn-secondary-new-color: @color-text-level4;
@btn-secondary-new-bg: @color-bg-page;
@btn-secondary-new-border: @color-bg-page;
@btn-secondary-new-hover-color: @color-brand-hover;

@btn-error-color: @color-functional-fail;
// @btn-error-bg: @color-functional-white;
// @btn-error-bg:@color-bg-card;
@btn-error-bg:@color-functional-fail;
@btn-error-border: @color-functional-fail;
@btn-error-hover-color: @color-functional-danger-hover;
@btn-error-active-bg: @color-functional-danger-hover;

// @btn-drop-color: @color-brand-primary;
// @btn-drop-hover-color: @color-brand-hover;
// @btn-drop-bg: transparent;
// @btn-drop-border: transparent;
// @btn-drop-active-bg: transparent;

@btn-text-color: @color-brand-primary;
@btn-text-hover-color: @color-brand-hover;
@btn-text-bg: transparent;
@btn-text-border: transparent;
@btn-text-active-bg: transparent;

//btn 页面级别按钮样式
@btn-text-pagelevel-hover-color:@color-brand-hover;
@btn-text-pagelevel-hover-bg:@color-bg-page;
@btn-text-pagelevel-hover-border:@color-bg-page;

@btn-text-pagelevel-active-color: @color-brand-press;
@btn-text-pagelevel-active-bg:@color-bg-info;
@btn-text-pagelevel-active-border:@color-bg-info;
@btn-text-pagelevel-disabled-color: @blue-300;
@btn-ghost-color: @color-functional-white;
@btn-ghost-bg: @color-brand-primary;
@btn-ghost-border: @color-brand-primary;

@btn-circle-size: @btn-height-base;
@btn-circle-size-large: @btn-height-base;
@btn-circle-size-middle: @btn-height-middle;
@btn-circle-size-small: @btn-height-small;

@btn-square-size: @btn-height-base;
@btn-square-size-large: @btn-height-base;
@btn-square-size-middle: @btn-height-middle;
@btn-square-size-small: @btn-height-small;
// @btn-disable-color: @color-complementary-6;


// Layout
@layout-header-height: 64px;
@layout-header-padding: 0 50px;
@layout-footer-padding: @height-small 50px;
@layout-trigger-height: 48px;
@layout-zero-trigger-width: 36px;
@layout-zero-trigger-height: 42px;


// Legend
@legend-color: @color-complementary-5;


// Input
@input-height-base: @height-base;
@input-height-large: @height-base;
@input-height-middle: @height-middle;
@input-height-small: @height-small;
@input-padding-horizontal: 12px;
@input-padding-vertical-base: 12px;
@input-padding-vertical-small: 12px;
@input-padding-vertical-large: 10px;

@input-placeholder-color: @btn-disable-color;
@input-color: @text-color;
@input-border-color: @border-color-base;
@input-border-disabled-color:@font-200;
@input-bg: @color-functional-white;
@input-icon-color:@gray-700;

@input-hover-border-color: @primary-color;
@input-focus-border-color: @primary-color;
@input-disabled-bg: @color-complementary-8;

@input-prefix-bg: @white;
@input-prefix-color: @font-900;

// Input-Number
@input-number-width-base: 80px;

// Z-index
@zindex-spin: 8;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-menu: 1;
@zindex-select: 900;
@zindex-auto-complete-spin: 910;
@zindex-modal: 1000;
@zindex-drawer: 1000;
@zindex-message: 1010;
@zindex-notification: 1010;
@zindex-tooltip: 1060;
@zindex-transfer: 1060;
@zindex-loading-bar: 2000;
@zindex-spin-fullscreen: 2010;

// Animation
@animation-time: .3s;
@animation-time-quick: .15s;
@transition-time: .2s;
@ease-in-out: ease-in-out;

// Slider
@slider-height: 6px;
@slider-margin: 16px 0;
@slider-button-wrap-size: 18px;
@slider-button-wrap-offset: -5px;
@slider-wrap-border-radius: 8px;

// @slider-color              :
@slider-disabled-color: @color-complementary-7;
@slider-color: @primary-color;
@slider-disabled-bar-color: @color-border-disable;
@slider-maker-color:@color-scrollbar;
@slider-bar-color:@color-scrollbar-track;

// 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-border-radius: @border-radius-small;

// Anchor
@anchor-border-width: 2px;

// List
@list-header-background: transparent;
@list-footer-background: transparent;
@list-empty-text-padding: @padding-md;
@list-item-padding: @padding-sm 0;
@list-item-meta-margin-bottom: @padding-md;
@list-item-meta-avatar-margin-right: @padding-md;
@list-item-meta-title-margin-bottom: @padding-sm;

// Radio
@radio-disabled-bg: @color-brand-disabled2;
@radio-checked-bg: @color-bg-normal;
@radio-default-disabled-border-color: @font-200;
@radio-default-disabled-bg-color: @font-50;
@radio-disabled-text-color: @font-500;
@radio-button-checked-shadow: 2px 2px 5px 0 @message-radio-shadow;

//select
@background-color-select-hover:@color-bg-hover;
@background-color-selection:@color-bg-card;
@select-dropdown-shadow: 0 2px 12px 0 @color-shadow2;

// layout
@layout-body-background: #f0f1f5; // ★待定
@layout-header-background: #515a6e; // ★待定
@layout-header-height: 50px;
@layout-header-padding: 0 50px;
@layout-footer-padding: 24px 50px;
@layout-footer-background: @white;
@layout-sider-background: @layout-header-background;
@layout-trigger-height: 48px;
@layout-trigger-color: @white;
@layout-zero-trigger-width: 50px;
@layout-zero-trigger-height: 50px;
@layout-footer-height: 80px;
@layout-title-height: 60px;
@layout-content-margin: 20px;
@layout-content-color: @white;
@layout-zero-trigger-color:#327bff; // ★待定
@layout-trigger-width: 8px;
@layout-trigger-radius: 3px;

//grid
@grid-columns                : 24;
@grid-gutter-width           : 0;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs              : 480px;
@screen-xs-min          : @screen-xs;
@screen-xs-max          : (@screen-xs-min - 1);

// Small screen / tablet
@screen-sm              : 576px;
@screen-sm-min          : @screen-sm;
@screen-sm-max          : (@screen-sm-min - 1);

// Medium screen / desktop
@screen-md              : 768px;
@screen-md-min          : @screen-md;
@screen-md-max          : (@screen-md-min - 1);

// Large screen / wide desktop
@screen-lg              : 992px;
@screen-lg-min          : @screen-lg;
@screen-lg-max          : (@screen-lg-min - 1);

// Extra large screen / full hd
@screen-xl              : 1200px;
@screen-xl-min          : @screen-xl;
@screen-xl-max          : (@screen-xl-min - 1);

// Extra extra large screen / large descktop
@screen-xxl             : 1600px;
@screen-xxl-min         : @screen-xxl;
@screen-xxl-max         : (@screen-xxl-min - 1);

// table
@shadow-right: 1px 0 6px @shadow-color;
@table-td-highlight-bg        : @color-bg-hover;
@table-td-stripe-bg           : @font-50;
@table-thead-bg               : @color-bg-table-head;
@table-common-background      : @color-functional-white;
@table-head-icon      : @gray-700;
@table-expanded-cell-bg       : @gray-50;
@table-td-border-color: @font-100;
@table-th-border-color: @color-divider-level2;
@table-td-hover-bg: #f6f9ff; // ★待定

//popconfirm
@popconfirm-arrow-color: hsla(0,0%,85%,.5);
@popconfirm-arrow-color:@color-bg-popconfirm;
@popconfirm-confirm-icon-color: #ff9900; // ★待定
@popconfirm-inner-color: #17233d; // ★待定
@popconfirm-max-width: 250px;
@popconfirm-arrow-width: 7px;
@popconfirm-arrow-outer-width: (@popconfirm-arrow-width + 1);
@popconfirm-distance: @popconfirm-arrow-width - 1 + 4;

// tabs
@tabs-hover-color: @color-brand-primary;
@tabs-card-bg: #F8F9FC; // ★待定
@tabs-container-bg: @color-bg-page;
@tabs-container-hover-bg: fade(@color-functional-white, 60);
@tabs-container-active-bg: @color-functional-white;
@tabs-container-gap: @color-complementary-22;
@tabs-disabled-color: @font-500;
@tabs-active-color: @color-brand-press;
@rate-star-color        : #f5a623; // ★待定
@tabs-buttonGroup-bg: @color-bg-page;

//tag
@tag-circle-width: 10px;
@tag-default-border: transparent;
@tag-circle-border: transparent;
@tag-circle-border: transparent;

@tag-default-text-color: @gray-700;
@tag-default-border-color: @gray-700;
@tag-default-close-hover-color: @gray-800;

@tag-default-bg-color: @gray-700;
@tag-default-bg-dark-color: @color-brand-primary-sec;

@tag-checkable-disabled-bg-color: @font-50;
@tag-checkable-disabled-border-color: @font-200;

//alert
@alert-bg-success:@green-50;
@alert-bg-warning:@red-50;
@alert-bg-fail:@yellow-50;
@alert-bg-info:@blue-50;

@alert-icon-warning:#FF9933; // ★待定
@alert-icon-info:@color-brand-primary;
@alert-icon-close:@gray-700;
// Tag
@tag-font-size          : 12px;
@success-color: @color-functional-success;
@warning-color: @color-functional-warning;

//switch
@switch-not-checked-hover: @font-400; // 未选中时悬浮背景颜色
@switch-default-bg-color: @font-500;
@switch-disabled-checked-bg-color: @blue-300;
@switch-disabled-bg-color: @font-200;

// tooltip
@tooltip-bg-color: @color-bg-embed;
@tooltip-shadow: 0 0 9px 0 @message-tooltip-shadow;
@tooltip-warning-shadow: @message-tooltip-warning; // 投影4: tooltip的危险色

// steps
@steps-main-bg-color: @blue-100;
@steps-main-title-color: @color-brand-primary;
@steps-wait-title-color: @font-600;
@steps-tail-color: @gray-300;


// message
@message-info-color: @color-brand-primary;
@message-warning-color: @color-functional-warning;
@message-success-color: @color-functional-success;
@message-error-color: @color-functional-fail;
@message-text-color: #333333; // ★待定

@message-dark-bg-color: @message-dark-bg;
@message-dark-shadow: 0 4px 16px 0px @color-shadow3;
@message-light-shadow: 0 4px 16px 0px @message-light-shadow-color;

@message-info-dark-color: @color-brand-primary;
@message-warning-dark-color: @color-functional-warning;
@message-success-dark-color: @color-functional-success;
@message-error-dark-color: @color-functional-fail;
@message-help-dark-color: @font-50;
@message-help-light-color:@gray-800;


// collapse
@collapse-text-color: @color-text-level1;
@collapse-border-color: @font-100;
@collapse-content-bg-color: @gray-50;
// @collapse-disabled-border-color: @color-border-disable;
@collapse-disabled-text-color: @color-functional-pause;
@collapse-disabled-content-bg-color: @color-complementary-8;


// breadcrumb
@breadcrumb-disabled-color: @font-500;
@breadcrumb-hover-color: @font-700;
@breadcrumb-separator-color: @font-400;
@breadcrumb-text-color: @color-complementary-3;

// page
@page-border-color: @color-scrollbar;
@page-disabled-bg-color: @color-complementary-8;
@page-disabled-text-color: @color-complementary-7;
@page-active-color: #1C6BFF; // ★待定
@page-active-bg-color: @color-bg-info;

@page-disabled-arrow-color: @color-brand-disabled1;
@page-default-arrow-color: @gray-700;
@page-hover-arrow-color: @color-brand-hover;
@page-active-arrow-color: @color-brand-press;

@page-default-text-color: @color-text-level2;
@page-hover-bg-color: @color-bg-page;
@page-mini-height: 24px;
@page-input-border-color: #E9EBEF; // ★待定

// upload
@upload-border-color: @gray-300;
@upload-color-bg-disable: @font-50;
@upload-color-text-disable: @font-500;
@upload-color-border-disable: @font-500;
@upload-color-file: @gray-500;

// tree
@tree-color-focus-bg: @blue-50;
@tree-color-hover-bg: @gray-50;
@tree-color-border-line: @font-100;

// search
@search-icon-close-circle: #bbb; // ★待定
@search-icon-disabled-prefix: #999; // ★待定

//checkbox
@checkbox-default-disabled-border-color: @font-200;
@checkbox-default-disabled-bg-color: @font-50;
@checkbox-checked-disabled-bg-color: @blue-300;
@checkbox-checked-bg-color: @color-bg-info;
@checkbox-disabled-text-color: @font-500;
@checkbox-button-checked-shadow: 2px 2px 5px 0 @message-radio-shadow;

// form
@form-default-tips-color: @font-600;

//datapicker
@datapicker-disabled-bg-color:@font-50;
@datapicker-disabled-border-color:@font-200;
@datapicker-disabled-icon-color:@font-500;
@datapicker-disabled-placeholder-color:@font-500;

// modal
@modal-close-color: @gray-800;
@modal-close-active-color: @color-brand-press;

// dropdown
@dropdown-item-hover-bg-color: #F5F8FF; // ★待定
@dropdown-item-split-color: @font-100;
@dropdown-hover-bg-color:@blue-50;

//transfer
@transfer-bg-color: @blue-50;
@transfer-disabled-color: @color-complementary-4;
@transfer-close-color:  #979797; // ★待定
@transfer-close-hover-color: @color-brand-hover;