@import './components.less';

@theme: var(--theme);
@hd: 1px; // 基本单位
@color-brand-1: var(--color-brand-1);
@color-brand-2: var(--color-brand-2);
@color-brand-3: var(--color-brand-3);
@color-brand-4: var(--color-brand-4);
@color-brand-5: var(--color-brand-5);
@color-brand-6: var(--color-brand-6);
@color-brand-7: var(--color-brand-7);
@color-brand-8: var(--color-brand-8);
@color-brand-9: var(--color-brand-9);
@color-brand-10: var(--color-brand-10);

@color-secondary-1: var(--color-secondary-1);
@color-secondary-2: var(--color-secondary-2);
@color-secondary-3: var(--color-secondary-3);
@color-secondary-4: var(--color-secondary-4);
@color-secondary-5: var(--color-secondary-5);
@color-secondary-6: var(--color-secondary-6);
@color-secondary-7: var(--color-secondary-7);
@color-secondary-8: var(--color-secondary-8);
@color-secondary-9: var(--color-secondary-9);

@color-white-1: var(--color-white-1);
@color-white-2: var(--color-white-2);
@color-white-3: var(--color-white-3);
@color-white-4: var(--color-white-4);
@color-white-5: var(--color-white-5);
@color-white-6: var(--color-white-6);
@color-black :var(--color-black);
@color-gray-1 :var(--color-gray-1);
@color-gray-2 :var(--color-gray-2);
@color-gray-3 :var(--color-gray-3);
@color-gray-4 :var(--color-gray-4);
@color-gray-5 :var(--color-gray-5);
@color-gray-6 :var(--color-gray-6);
@color-gray-7 :var(--color-gray-7);

@color-cold-gray-1: var(--color-cold-gray-1);
@color-cold-gray-2: var(--color-cold-gray-2);
@color-cold-gray-3: var(--color-cold-gray-3);


@color-success-1: var(--color-success-1);
@color-success-2: var(--color-success-2);

@color-warning-1: var(--color-warning-1);
@color-warning-2: var(--color-warning-2);

@color-notice-1: var(--color-notice-1);
@color-notice-2: var(--color-notice-2);

@color-info-1: var(--color-info-1);
@color-info-2: var(--color-info-2);
@color-info-3: var(--color-info-3);
@color-info-4: var(--color-info-4);
@color-info-5: var(--color-info-5);
@color-info-6: var(--color-info-6);
@color-info-7: var(--color-info-7);
@color-info-8: var(--color-info-8);
@color-info-9: var(--color-info-9);
@color-info-10: var(--color-info-10);

@color-info-light-1: var(--color-info-light-1);
@color-info-light-2: var(--color-info-light-2);
@color-info-light-3: var(--color-info-light-3);
@color-info-light-4: var(--color-info-light-4);
@color-info-light-5: var(--color-info-light-5);
@color-info-light-6: var(--color-info-light-6);
@color-info-light-7: var(--color-info-light-7);
@color-info-light-8: var(--color-info-light-8);
@color-info-light-9: var(--color-info-light-9);
@color-info-light-10: var(--color-info-light-10);

@color-primary: var(--color-primary);
// @color-primary-hover: var(--color-primary-hover);
@color-primary-active: var(--color-primary-active);
// @color-primary-disable: var(--color-primary-disable);
// @color-primary-light: var(--color-primary-light);
@color-primary-light-active: var(--color-primary-light-active);
// @color-primary-light-disable: var(--color-primary-light-disable);

@color-secondary: var(--color-secondary);
@color-secondary-active: var(--color-secondary-active);
@color-secondary-disable: var(--color-secondary-disable);
@color-secondary-light: var(--color-secondary-light);
@color-secondary-light-active: var(--color-secondary-light-active);
@color-secondary-light-disable: var(--color-secondary-light-disable);

@color-text-base: var(--color-text-base);
@color-text-secondary: var(--color-text-secondary);
@color-text-tertiary: var(--color-text-tertiary);
@color-text-link: var(--color-text-link);
@color-text-white: var(--color-text-white);
@color-text-success-base: var(--color-text-success-base);
@color-text-success-large: var(--color-text-success-large);
@color-text-warning-base: var(--color-text-warning-base);
@color-text-warning-large: var(--color-text-warning-large);
@color-text-notice-base: var(--color-text-notice-base);
@color-text-notice-large: var(--color-text-notice-large);
@color-text-placeholder: var(--color-text-placeholder);
@color-text-disabled: var(--color-text-disabled);
@color-text-primary: var(--color-text-primary);
@color-text-right: var(--color-text-right);
@color-text-primary-disable: var(--color-brand-3);

@color-icon-base: var(--color-icon-base);
@color-icon-link: var(--color-icon-link);
@color-icon-primary: var(--color-icon-primary);
@color-icon-gray: var(--color-icon-gray);
@color-icon-gray-light: var(--color-gray-3);
@color-icon-white: var(--color-icon-white);
@color-icon-cold-gray: var(--color-icon-cold-gray);
@color-icon-disable: var(--color-icon-disable);

@color-fill-white: var(--color-fill-white);
@color-fill-primary-light: var(--color-fill-primary-light);
@color-fill-gray-light: var(--color-fill-gray-light);
@color-fill-gray-medium: var(--color-fill-gray-medium);
@color-fill-gray-dark: var(--color-fill-gray-dark);
@color-fill-primary-light-active: var(--color-brand-1);

/* 这两个待确认 */
@color-fill-gray-middle: var(--color-fill-gray-middle);
@color-fill-gray-collapse: var(--color-fill-gray-collapse);

@color-fill-dark-collapse: var(--color-fill-dark-collapse);
@color-fill-disable: var(--color-fill-disable);
@color-fill-mask: var(--color-fill-mask);
@color-fill-mask-light: var(--color-fill-mask-light);
@color-fill-mask-white: var(--color-fill-mask-white);
@color-fill-disable-switch-on: var(--color-fill-disable-switch-on);
@color-fill-switch-on: var(--color-fill-switch-on);
@color-bg-body: var(--color-bg-body);
@color-bg-main: var(--color-bg-main);
// @color-bg-header: var(--color-bg-header);

@color-border-primary: var(--color-border-primary);
// @color-border-primary-active: var(--color-border-primary-active);
@color-border-primary-disable: var(--color-border-primary-disable);
@color-border-base: var(--color-border-base);
@color-border-active: var(--color-border-active);
@color-border-light-disable: var(--color-border-light-disable);
@color-border-dark-disable: var(--color-border-dark-disable);
@color-border-disable: var(--color-border-disable);
@color-border-link: var(--color-border-link);
@color-border-info: var(--color-border-info);

// @color-border-success: var(--color-border-success);
// @color-border-warning: var(--color-border-warning);


@color-divider-base: var(--color-divider-base);
@color-divider-dark: var(--color-divider-dark);
@color-divider-white: var(--color-divider-white);

@font-size-xxxs: var(--font-size-xxxs);
@font-size-xxs: var(--font-size-xxs);
@font-size-xs: var(--font-size-xs);
@font-size-s: var(--font-size-s);
@font-size-base: var(--font-size-base);
@font-size-l: var(--font-size-l);
@font-size-xl: var(--font-size-xl);
@font-size-xxl: var(--font-size-xxl);
@font-size-xxxl: var(--font-size-xxxl);

@font-weight-regular: var(--font-weight-regular);
@font-weight-bold: var(--font-weight-bold);
@font-weight-xbold: var(--font-weight-xbold);

@font-linehight-base: var(--font-linehight-base);

@radius-zero: var(--radius-zero);
@radius-xs: var(--radius-xs);
@radius-s: var(--radius-s);
@radius-m: var(--radius-m);
@radius-l: var(--radius-l);
@radius-full: var(--radius-full);
@radius-round: var(--radius-round);

@border-width-zero: var(--border-width-zero);
@border-width-base: var(--border-width-base);
@border-width-bold: var(--border-width-bold);
@border-width-xbold: vat(--border-width-xbold);

@border-style-base: var(--border-style-base);
@border-style-dash: var(--border-style-dash);

@shadow-light: var(--shadow-light);
@shadow-base: var(--shadow-base);
@shadow-dark: var(--shadow-dark);
@shadow-s: var(--shadow-s);
@shadow-base: var(--shadow-base);
@shadow-l: var(--shadow-l);

@size-height-xs: var(--size-height-xs);
@size-height-s: var(--size-height-s);
@size-height-m: var(--size-height-m);
@size-height-l: var(--size-height-l);
@size-height-xl: var(--size-height-xl);
@size-height-xxl: var(--size-height-xxl);

@size-height-xxxl: var(--size-height-xxxl);
@size-height-xxxxl: var(--size-height-xxxxl);

@font-size-xxxxs: var(--font-size-xxxxs);
@size-icon-xxs: var(--size-icon-xxs);
@size-icon-xs: var(--size-icon-xs);
@size-icon-s: var(--size-icon-s);
@size-icon-m: var(--size-icon-m);
@size-icon-l: var(--size-icon-l);
@size-icon-xl: var(--size-icon-xl);
@size-icon-xxl: var(--size-icon-xxl);


@size-icon-base: var(--size-icon-base);
@size-icon-long: var(--size-icon-long);
@size-icon-square: var(--size-icon-square);

@spacing-none: var(--spacing-none);
@spacing-xs: var(--spacing-xs);
@spacing-s: var(--spacing-s);
@spacing-m: var(--spacing-m);
@spacing-l: var(--spacing-l);
@spacing-xl: var(--spacing-xl);




/******* 背景色颜色变量 *******/
@brand-primary: var(--brand-primary);
@brand-important: var(--brand-important);
@brand-primary-tap: var(--brand-primary-tap);
@brand-primary-main: var(--brand-primary-main);


/********* 填充色 *********/
@fill-base: var(--fill-base-color); // 组件默认背景
@fill-base-gray: var(--fill-base-gray-color);
@fill-body: #f5f5f9; // 页面背景 ！！！ web-view用到，是否可以去掉
@fill-tap: var(--fill-tap); // 组件默认背景 - 按下
@fill-mask: var(--fill-mask); // 遮罩背景

@fill-opacity: .7; // 透明度 !!! 一处用到
@color-icon-base: var(--color-icon-base); // 许多小图标的背景，比如一些小圆点，加减号
@fill-dark: var(--fill-dark);
@fill-switch-color: var(--fill-switch-color);
@fill-switch-color-disabled: var(--fill-switch-color-disabled);

/********* 文字色 *********/
@color-text-base: var(--color-text-base); // 基本
@color-text-base-inverse: var(--color-text-base-inverse);
@color-text-main: var(--color-text-main); //文本主色
@color-text-secondary: var(--color-text-secondary); // 辅助色
@color-text-placeholder: var(--color-text-placeholder); // 文本框提示#879499
// @color-text-disabled: var(--color-text-disabled); // 失效
@color-text-caption: var(--color-text-caption); // 辅助描述
@color-text-paragraph: @color-text-main; // 段落
@color-text-error: var(--color-text-error); //错误提示文本色
@color-link: @brand-primary; // 链接
@color-text-input-content: var(--color-text-input); // 输入框内容颜色#2e6cc6
@color-text-input-disabled: @color-text-secondary;
@color-text-title: var(--color-text-title); //导航栏标题文本颜色
@color-text-info: var(--color-text-info); // 错误信息提示颜色#dd0e0e
@color-text-danger: var(--color-text-danger);
/********* 边框色 *********/
@border-color-base: var(--border-color-base);
@border-color-disabled: var(--border-color-disabled);
@border-color-light: var(--border-color-light);

/********* 字体尺寸 (html:{font-size:16px;}) *********/
@font-size-icontext: var(--font-size-icontext); //10 * @hd; // .0625rem
@font-size-caption-sm: var(--font-size-extra); //12 * @hd; // 0.75rem
@font-size-base-sm: var(--font-size-base-sm); //14 * @hd; // 0.875rem
// @font-size-base: var(--font-size-base-main); //15 * @hd; //0.9375rem
@font-size-subhead: var(--font-size-subhead); //16 * @hd; // 1rem
@font-size-caption: var(--font-size-subhead); //16 * @hd; // 1rem
@font-size-heading: var(--font-size-heading); //18 * @hd; // 1.125rem
@font-size-header: var(--font-size-header); //19 * @hd; // 1.1875rem
@font-size-sudoku-sm: var(--font-size-sudoku-sm); //13 * @hd; //0.8125rem
@font-size-title: var(--font-size-title); // 20px
@font-size-number: calc(var(--font-size-base-sm) * 2); //28px
@font-size-title-bg: calc(var(--font-size-title) + 1px); // 21px
// @font-size-l: var(--font-size-l);
// @font-size-s: var(--font-size-s);

/********* 圆角 *********/
@radius-xs: 2 * @hd;
@radius-sm: 3 * @hd;
@radius-md: 5 * @hd;
@radius-lg: 7 * @hd;
@radius-circle: 50%;
@radius-model: 10 * @hd;
@radius-btn-sm: 16 * @hd;


/********* 边框尺寸 *********/
@border-width-sm: 1px;
@border-width-md: 1px;
@border-width-lg: 2 * @hd;

/********* 间距-水平 *********/
@h-spacing-sm: 5 * @hd;
@h-spacing-md: 8 * @hd;
@h-spacing-lg: 15 * @hd;
@h-spacing-ksh: 12 * @hd;

/********* 间距-垂直 *********/
@v-spacing-xs: 4 * @hd;
@v-spacing-sm: 6 * @hd;
@v-spacing: 8 * @hd;
@v-spacing-md: 10 * @hd;
@v-spacing-lg: 20 * @hd;
@v-spacing-xl: 20 * @hd;

/********* 高度 *********/
@line-height-base: 1; // 单行行高
@line-height-paragraph: 1.5; // 多行行高

/********* 图标尺寸 *********/
@icon-size-xxs: 15 * @hd;
@icon-size-xs: 18 * @hd;
@icon-size-sm: 21 * @hd;
@icon-size-md: 28 * @hd;
@icon-size-radio: 24 * @hd;
@icon-size-agree: 16 * @hd;
@icon-size-lg: 36 * @hd;
@icon-size-header: 44 * @hd;
@icon-size-result: 80 * @hd;
@icon-size-m: 30*@hd;

// 透明度
@opacity-disabled: 0.3; // switch checkbox radio 等组件禁用的透明度
//弹出数字键盘不可用
@custom-key-board-disabled: #d8d8d8; // !!!! 仅simple-code用

/****************************** 组件button ************************/
@button-height: 44 * @hd; // 2.75rem
@button-font-size: 19 * @hd; // 1.1875rem
@button-height-sm: 32 * @hd; // 2rem
@button-font-size-sm: 14 * @hd; // 0.875rem
@primary-button-fill: @brand-primary;
@primary-button-fill-tap: @brand-primary-tap;
@ghost-button-color: @brand-primary; // 同时应用于背景、文字颜色、边框色
@ghost-button-fill-tap: rgba(250, 80, 80, 0.08);
@button-disabled-bg: var(--color-icon-base);
@button-disabled-color: @color-text-disabled;
@warning-button-fill: #e94f4f;
@warning-button-fill-tap: #d24747;
@link-button-fill-tap: @fill-tap;
@link-button-font-size: 16 * @hd;
@float-button-width: 50 * @hd;
@float-button-bgcolor: @fill-base-gray;
@bottom-button-height: 50 * @hd;

/***************************  组件Modal **********************************/

@modal-button-height: 50 * @hd; // 按钮高度

/***************************  组件List **********************************/

@list-item-height: 45 * @hd;

/***************************  组件Input **********************************/

@input-color-icon: #7b7b7b; // input clear icon 的背景色
@input-color-icon-tap: @brand-primary;

/***************************  组件Tabs **********************************/
@tabs-height: 44 * @hd; //2.75rem


/***************************  组件Toast **********************************/
@toast-fill: rgba(51, 51, 51, 0.8); // toast, activity-indicator 的背景颜色 #333,0.8

/***************************  组件keyboard-confirm **********************/
@keyboard-confirm-color: @brand-primary;
@keyboard-confirm-tap-color: @brand-primary-tap;

/***************************  组件picker **********************/
// @option-height: 45 * @hd; // picker 标题的高度
@picker-item-color: #2e6cc6;
@picker-header-bg-color: #f6f5f5;

/***************************  组件result **********************/
// @result-color-success: #35a762;
// @result-color-fail: #da4940;
// @result-color-info: #d87c13;

/***************************  zindex **********************/
@progress-zindex: 2000;
@popover-zindex: 1999;
@toast-zindex: 1999;
@action-sheet-zindex: 1000; // actonsheet 会放到 popup / modal 中
@picker-zindex: 1000;
@popup-zindex: 999;
@modal-zindex: 999; // modal.alert 应该最大，其他应该较小
@tabs-pagination-zindex: 999;

/*************** search **************/
@search-color-icon: #bbb; // input search icon 的背景色