@import '../color/colors.less';

/******** radius *******/

@border-radius: 2px;
@border-radius-none: 0;
@border-radius-small: @border-radius; // 1
@border-radius-middle: @border-radius;
@border-radius-large: @border-radius + 2px; // 4
@border-radius-circle: 50%;

/******** 间隙 *******/

@gap-base: 12px;
@gap-small: @gap-base - 4px; // 8
@gap-middle: @gap-base;
@gap-middle2: @gap-base + 4px;
@gap-large: @gap-base + 8px; // 20

/******** fontSize *******/

@font-size-base: 13px;
@font-size-small: @font-size-base - 1px;
@font-size-middle: @font-size-base;
@font-size-large: @font-size-base + 2px;

/******** 组件尺寸 *******/

@size-small: 24px;
@size-middle: 28px;
@size-large: 32px;

/******** z-index *******/

@z-index-popup-base: 1000;
@z-index-affix: @z-index-popup-base - 1; // 999
@z-index-popup: @z-index-popup-base; // 1000
@z-index-drawer: @z-index-popup-base + 1; // 1001
@z-index-modal: @z-index-drawer; // 1001
@z-index-message: @z-index-popup-base + 3; // 1003
@z-index-notification: @z-index-popup-base + 3; // 1003
@z-index-image-preview: @z-index-modal; // 1001

/******** borderSize *******/

@border-none: 0;
@border-1: 1px;
@border-2: 2px;
@border-3: 3px;
@border-4: 4px;
@border-5: 5px;

/******** borderStyle *******/

@border-solid: solid;
@border-dashed: dashed;
@border-dotted: dotted;

/******** shadow distance *******/

@shadow-distance-none: 0;
@shadow-distance-1: 1px;
@shadow-distance-2: 2px;
@shadow-distance-3: 3px;
@shadow-distance-4: 4px;

/******** size *******/

@size-none: 0;
@size-1: 4px;
@size-2: 8px;
@size-3: 12px;
@size-4: 16px;
@size-5: 20px;
@size-6: 24px;
@size-7: 28px;
@size-8: 32px;
@size-9: 36px;
@size-10: 40px;
@size-11: 44px;
@size-12: 48px;
@size-13: 52px;
@size-14: 56px;
@size-15: 60px;
@size-16: 64px;
@size-17: 68px;
@size-18: 72px;
@size-19: 76px;
@size-20: 80px;
@size-21: 84px;
@size-22: 88px;
@size-23: 92px;
@size-24: 96px;
@size-25: 100px;
@size-26: 104px;
@size-27: 108px;
@size-28: 112px;
@size-29: 116px;
@size-30: 120px;
@size-31: 124px;
@size-32: 128px;
@size-33: 132px;
@size-34: 136px;
@size-35: 140px;
@size-36: 144px;
@size-37: 148px;
@size-38: 152px;
@size-39: 156px;
@size-40: 160px;
@size-41: 164px;
@size-42: 168px;
@size-43: 172px;
@size-44: 176px;
@size-45: 180px;
@size-46: 184px;
@size-47: 188px;
@size-48: 192px;
@size-49: 196px;
@size-50: 200px;

/******** spacing *******/

@spacing-none: 0;
@spacing-1: 2px;
@spacing-2: 4px;
@spacing-3: 6px;
@spacing-4: 8px;
@spacing-5: 10px;
@spacing-6: 12px;
@spacing-7: 16px;
@spacing-8: 20px;
@spacing-9: 24px;
@spacing-10: 32px;
@spacing-11: 36px;
@spacing-12: 40px;
@spacing-13: 48px;
@spacing-14: 56px;
@spacing-15: 60px;
@spacing-16: 64px;
@spacing-17: 72px;
@spacing-18: 80px;
@spacing-19: 84px;
@spacing-20: 96px;
@spacing-21: 100px;
@spacing-22: 120px;

/******** shadow *******/

@shadow-none: none;
@shadow-special: 0 0 1px rgba(0, 0, 0, 0.3);
@shadow1-center: 0 0 8px rgba(0, 0, 0, 0.1);
@shadow1-up: 0 -2px 8px rgba(0, 0, 0, 0.1);
@shadow1-down: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
@shadow1-left: -2px 0 8px rgba(0, 0, 0, 0.1);
@shadow1-right: 2px 0 8px rgba(0, 0, 0, 0.1);
@shadow1-left-up: -2px -2px 8px rgba(0, 0, 0, 0.1);
@shadow1-left-down: -2px 2px 8px rgba(0, 0, 0, 0.1);
@shadow1-right-up: 2px -2px 8px rgba(0, 0, 0, 0.1);
@shadow1-right-down: 2px 2px 8px rgba(0, 0, 0, 0.1);
@shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1);
@shadow2-up: 0 -4px 10px rgba(0, 0, 0, 0.1);
@shadow2-down: 0 4px 10px rgba(0, 0, 0, 0.1);
@shadow2-left: -4px 0 10px rgba(0, 0, 0, 0.1);
@shadow2-right: 4px 0 10px rgba(0, 0, 0, 0.1);
@shadow2-left-up: -4px -4px 10px rgba(0, 0, 0, 0.1);
@shadow2-left-down: -4px 4px 10px rgba(0, 0, 0, 0.1);
@shadow2-right-up: 4px -4px 10px rgba(0, 0, 0, 0.1);
@shadow2-right-down: 4px 4px 10px rgba(0, 0, 0, 0.1);
@shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1);
@shadow3-up: 0 -8px 20px rgba(0, 0, 0, 0.1);
@shadow3-down: 0 8px 20px rgba(0, 0, 0, 0.1);
@shadow3-left: -8px 0 20px rgba(0, 0, 0, 0.1);
@shadow3-right: 8px 0 20px rgba(0, 0, 0, 0.1);
@shadow3-left-up: -8px -8px 20px rgba(0, 0, 0, 0.1);
@shadow3-left-down: -8px 8px 20px rgba(0, 0, 0, 0.1);
@shadow3-right-up: 8px -8px 20px rgba(0, 0, 0, 0.1);
@shadow3-right-down: 8px 8px 20px rgba(0, 0, 0, 0.1);

/******** opacity *******/

@opacity-none: 0;
@opacity-1: 10%;
@opacity-2: 20%;
@opacity-3: 30%;
@opacity-4: 40%;
@opacity-5: 50%;
@opacity-6: 60%;
@opacity-7: 70%;
@opacity-8: 80%;
@opacity-9: 90%;
@opacity-10: 100%;

/******** fontWeight ********/
@font-weight-100: 100;
@font-weight-200: 200;
@font-weight-300: 300;
@font-weight-400: 400;
@font-weight-500: 500;
@font-weight-600: 600;
@font-weight-700: 700;
@font-weight-800: 800;
@font-weight-900: 900;

/******** Animation *******/

@animation-duration-1: 0.1s; // Tooltip
@animation-duration-2: 0.2s;
@animation-duration-3: 0.3s; // Modal
@animation-duration-4: 0.4s;
@animation-duration-5: 0.5s;

@ease-base-linear: cubic-bezier(0, 0, 1, 1); //线性匀速
@ease-base-standard: cubic-bezier(0.34, 0.69, 0.1, 1); //标准
@ease-base-overshoot: cubic-bezier(0.3, 1.3, 0.3, 1); //过冲
@ease-base-decelerate: cubic-bezier(0.4, 0.8, 0.74, 1); //减速
@ease-base-accelerate: cubic-bezier(0.26, 0, 0.6, 0.2); //加速
@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); // 动画从匀速开始,然后速度以5次方递减
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); // 动画从静止开始,然后速度以5次方增长
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); // 中间先以5次方增长后以5次方减少。

/******** color *******/

@color-transparent: transparent;

// 亮色模式
@color-white: #ffffff;
@color-black: #000000;

@color-bg-1: #fff;
@color-bg-2: #fff;
@color-bg-3: #fff;
@color-bg-4: #fff;
@color-bg-5: #fff;
@color-bg-white: #fff;

// 暗黑模式
@dark-color-white: fade(#fff, 90%);
@dark-color-black: #000000;

@dark-color-border: #333335;

@mask-bg-opacity: @opacity-6;
@mask-color-bg: rgba(@gray-10, @mask-bg-opacity);
@dark-mask-color-bg: rgba(@dark-gray-1, @mask-bg-opacity);

@dark-color-bg-1: #17171a; // 整体背景，就是 @dark-gray-1
@dark-color-bg-2: #232324; // 一级容器背景 (“白色”)
@dark-color-bg-3: #2a2a2b; // 二级容器背景
@dark-color-bg-4: #313132; // 三级容器背景
@dark-color-bg-5: #373739; // 下拉框、Tooltips 背景
@dark-color-bg-white: #f6f6f6; // 在亮色模式下 radio，switch 白色背景

@dark-color-text-1: fade(#fff, 90%); // 标题，正文
@dark-color-text-2: fade(#fff, 70%); // 语句
@dark-color-text-3: fade(#fff, 50%); // 次要信息,placeholder
@dark-color-text-4: fade(#fff, 30%); // 禁用态 ,disabled

@dark-color-fill-1: fade(#fff, 4%);
@dark-color-fill-2: fade(#fff, 8%);
@dark-color-fill-3: fade(#fff, 12%);
@dark-color-fill-4: fade(#fff, 16%);

@color-spin-layer-bg: rgba(255, 255, 255, 0.6);

/******** diff *******/
@diff-bg-add: var(--success-1);
@diff-bg-edit: var(--warning-1);
@diff-bg-del: var(--danger-1);

/******** icon hover *******/
@icon-hover-border-radius: @border-radius-circle;
@icon-hover-color-bg: var(--color-fill-3);

@icon-hover-size-default-height: @size-5;
@icon-hover-size-small-height: @size-5;
@icon-hover-size-mini-height: @size-5;
@icon-hover-size-large-height: @size-6;
@icon-hover-size-huge-height: @size-6;

@icon-hover-size-small-icon: @size-3;
@icon-hover-size-mini-icon: @size-3;
@icon-hover-size-default-icon: @size-3;
@icon-hover-size-large-icon: @size-3;
@icon-hover-size-huge-icon: @size-3;

/******** media *******/
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
// 👆 Extra small screen / phone

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

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

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

// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;

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