/********** global  ***************/



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

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

@border-radius-none: 0;
@border-radius-small: 2px;
@border-radius-medium: 4px;
@border-radius-large: 8px;
@border-radius-circle: 50%;

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

@size-mini: @size-6;
@size-small: @size-7;
@size-default: @size-8;
@size-large: @size-9;

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

@color-transparent: transparent;

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

@shadow-none: none;
@shadow-special: 0 0 1px rgba(0, 0, 0, 0.3);
@shadow1-center: 0 0 5px rgba(0, 0, 0, 0.1);
@shadow1-up: 0 -2px 5px rgba(0, 0, 0, 0.1);
@shadow1-down: 0 2px 5px rgba(0, 0, 0, 0.1);
@shadow1-left: -2px 0 5px rgba(0, 0, 0, 0.1);
@shadow1-right: 2px 0 5px rgba(0, 0, 0, 0.1);
@shadow1-left-up: -2px -2px 5px rgba(0, 0, 0, 0.1);
@shadow1-left-down: -2px 2px 5px rgba(0, 0, 0, 0.1);
@shadow1-right-up: 2px -2px 5px rgba(0, 0, 0, 0.1);
@shadow1-right-down: 2px 2px 5px 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%;

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

@font-size-display-3: 56px;
@font-size-display-2: 48px;
@font-size-display-1: 36px;
@font-size-title-3: 24px;
@font-size-title-2: 20px;
@font-size-title-1: 16px;
@font-size-body-3: 14px;
@font-size-body-2: 13px;
@font-size-body-1: 12px;
@font-size-caption: 12px;

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

/******** Primary *******/

@color-primary-1: rgb(var(~'@{arco-cssvars-prefix}-primary-1'));
@color-primary-2: rgb(var(~'@{arco-cssvars-prefix}-primary-2'));
@color-primary-3: rgb(var(~'@{arco-cssvars-prefix}-primary-3'));
@color-primary-4: rgb(var(~'@{arco-cssvars-prefix}-primary-4'));
@color-primary-5: rgb(var(~'@{arco-cssvars-prefix}-primary-5'));
@color-primary-6: rgb(var(~'@{arco-cssvars-prefix}-primary-6'));
@color-primary-7: rgb(var(~'@{arco-cssvars-prefix}-primary-7'));
@color-primary-8: rgb(var(~'@{arco-cssvars-prefix}-primary-8'));
@color-primary-9: rgb(var(~'@{arco-cssvars-prefix}-primary-9'));
@color-primary-10: rgb(var(~'@{arco-cssvars-prefix}-primary-10'));

/******** success *******/

@color-success-1: rgb(var(~'@{arco-cssvars-prefix}-success-1'));
@color-success-2: rgb(var(~'@{arco-cssvars-prefix}-success-2'));
@color-success-3: rgb(var(~'@{arco-cssvars-prefix}-success-3'));
@color-success-4: rgb(var(~'@{arco-cssvars-prefix}-success-4'));
@color-success-5: rgb(var(~'@{arco-cssvars-prefix}-success-5'));
@color-success-6: rgb(var(~'@{arco-cssvars-prefix}-success-6'));
@color-success-7: rgb(var(~'@{arco-cssvars-prefix}-success-7'));
@color-success-8: rgb(var(~'@{arco-cssvars-prefix}-success-8'));
@color-success-9: rgb(var(~'@{arco-cssvars-prefix}-success-9'));
@color-success-10: rgb(var(~'@{arco-cssvars-prefix}-success-10'));

/******** warning *******/

@color-warning-1: rgb(var(~'@{arco-cssvars-prefix}-warning-1'));
@color-warning-2: rgb(var(~'@{arco-cssvars-prefix}-warning-2'));
@color-warning-3: rgb(var(~'@{arco-cssvars-prefix}-warning-3'));
@color-warning-4: rgb(var(~'@{arco-cssvars-prefix}-warning-4'));
@color-warning-5: rgb(var(~'@{arco-cssvars-prefix}-warning-5'));
@color-warning-6: rgb(var(~'@{arco-cssvars-prefix}-warning-6'));
@color-warning-7: rgb(var(~'@{arco-cssvars-prefix}-warning-7'));
@color-warning-8: rgb(var(~'@{arco-cssvars-prefix}-warning-8'));
@color-warning-9: rgb(var(~'@{arco-cssvars-prefix}-warning-9'));
@color-warning-10: rgb(var(~'@{arco-cssvars-prefix}-warning-10'));

/******** danger *******/

@color-danger-1: rgb(var(~'@{arco-cssvars-prefix}-danger-1'));
@color-danger-2: rgb(var(~'@{arco-cssvars-prefix}-danger-2'));
@color-danger-3: rgb(var(~'@{arco-cssvars-prefix}-danger-3'));
@color-danger-4: rgb(var(~'@{arco-cssvars-prefix}-danger-4'));
@color-danger-5: rgb(var(~'@{arco-cssvars-prefix}-danger-5'));
@color-danger-6: rgb(var(~'@{arco-cssvars-prefix}-danger-6'));
@color-danger-7: rgb(var(~'@{arco-cssvars-prefix}-danger-7'));
@color-danger-8: rgb(var(~'@{arco-cssvars-prefix}-danger-8'));
@color-danger-9: rgb(var(~'@{arco-cssvars-prefix}-danger-9'));
@color-danger-10: rgb(var(~'@{arco-cssvars-prefix}-danger-10'));

/******** link *******/

@color-link-1: rgb(var(~'@{arco-cssvars-prefix}-link-1'));
@color-link-2: rgb(var(~'@{arco-cssvars-prefix}-link-2'));
@color-link-3: rgb(var(~'@{arco-cssvars-prefix}-link-3'));
@color-link-4: rgb(var(~'@{arco-cssvars-prefix}-link-4'));
@color-link-5: rgb(var(~'@{arco-cssvars-prefix}-link-5'));
@color-link-6: rgb(var(~'@{arco-cssvars-prefix}-link-6'));
@color-link-7: rgb(var(~'@{arco-cssvars-prefix}-link-7'));
@color-link-8: rgb(var(~'@{arco-cssvars-prefix}-link-8'));
@color-link-9: rgb(var(~'@{arco-cssvars-prefix}-link-9'));
@color-link-10: rgb(var(~'@{arco-cssvars-prefix}-link-10'));

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

@radius-none: var(~'@{arco-cssvars-prefix}-border-radius-none');
@radius-small: var(~'@{arco-cssvars-prefix}-border-radius-small');
@radius-medium: var(~'@{arco-cssvars-prefix}-border-radius-medium');
@radius-large: var(~'@{arco-cssvars-prefix}-border-radius-large');
@radius-circle: var(~'@{arco-cssvars-prefix}-border-radius-circle');

// Other
@color-white: #ffffff;
@dark-color-white: fade(#fff, 90%); // 在亮色模式下所有白色文字对应。对应 @color-white;

@color-black: #000000;
@dark-color-black: #000000;

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

// 暗黑主题的导航组件背景色，需要在主题商店可配置
@color-menu-dark-bg: #232324;
@color-menu-light-bg: #ffffff;
@color-spin-layer-bg: rgba(255, 255, 255, 0.6);
@color-menu-dark-hover: fade(#fff, 4%);
@color-tooltip-bg: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));

// component
@dark-color-tooltip-bg: #373739;
@dark-color-spin-layer-bg: rgba(51, 51, 51, 0.6);
@dark-color-menu-dark-hover: var(~'@{arco-cssvars-prefix}-color-fill-2');

// variables
@color-border: rgb(var(~'@{arco-cssvars-prefix}-gray-3'));
@color-bg-popup: var(~'@{arco-cssvars-prefix}-color-bg-5');
@color-bg-1: #fff;
@color-bg-2: #fff;
@color-bg-3: #fff;
@color-bg-4: #fff;
@color-bg-5: #fff;
@color-bg-white: #fff;
@color-text-1: var(~'@{arco-cssvars-prefix}-color-neutral-10'); // 标题，正文
@color-text-2: var(~'@{arco-cssvars-prefix}-color-neutral-8'); // 语句
@color-text-3: var(~'@{arco-cssvars-prefix}-color-neutral-6'); // 次要信息
@color-text-4: var(~'@{arco-cssvars-prefix}-color-neutral-4'); // 次要信息
@color-fill-1: var(~'@{arco-cssvars-prefix}-color-neutral-1');
@color-fill-2: var(~'@{arco-cssvars-prefix}-color-neutral-2');
@color-fill-3: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@color-fill-4: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@color-border-1: var(~'@{arco-cssvars-prefix}-color-neutral-2');
@color-border-2: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@color-border-3: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@color-border-4: var(~'@{arco-cssvars-prefix}-color-neutral-6');
@color-primary-light-1: rgb(var(~'@{arco-cssvars-prefix}-primary-1'));
@color-primary-light-2: rgb(var(~'@{arco-cssvars-prefix}-primary-2'));
@color-primary-light-3: rgb(var(~'@{arco-cssvars-prefix}-primary-3'));
@color-primary-light-4: rgb(var(~'@{arco-cssvars-prefix}-primary-4'));
@color-secondary: var(~'@{arco-cssvars-prefix}-color-neutral-2');
@color-secondary-hover: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@color-secondary-active: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@color-secondary-disabled: var(~'@{arco-cssvars-prefix}-color-neutral-1');
@color-danger-light-1: rgb(var(~'@{arco-cssvars-prefix}-danger-1'));
@color-danger-light-2: rgb(var(~'@{arco-cssvars-prefix}-danger-2'));
@color-danger-light-3: rgb(var(~'@{arco-cssvars-prefix}-danger-3'));
@color-danger-light-4: rgb(var(~'@{arco-cssvars-prefix}-danger-4'));
@color-success-light-1: rgb(var(~'@{arco-cssvars-prefix}-success-1'));
@color-success-light-2: rgb(var(~'@{arco-cssvars-prefix}-success-2'));
@color-success-light-3: rgb(var(~'@{arco-cssvars-prefix}-success-3'));
@color-success-light-4: rgb(var(~'@{arco-cssvars-prefix}-success-4'));
@color-warning-light-1: rgb(var(~'@{arco-cssvars-prefix}-warning-1'));
@color-warning-light-2: rgb(var(~'@{arco-cssvars-prefix}-warning-2'));
@color-warning-light-3: rgb(var(~'@{arco-cssvars-prefix}-warning-3'));
@color-warning-light-4: rgb(var(~'@{arco-cssvars-prefix}-warning-4'));
@color-link-light-1: rgb(var(~'@{arco-cssvars-prefix}-link-1'));
@color-link-light-2: rgb(var(~'@{arco-cssvars-prefix}-link-2'));
@color-link-light-3: rgb(var(~'@{arco-cssvars-prefix}-link-3'));
@color-link-light-4: rgb(var(~'@{arco-cssvars-prefix}-link-4'));

@color-data-1: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-5'));
@color-data-2: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-3'));
@color-data-3: rgb(var(~'@{arco-cssvars-prefix}-blue-5'));
@color-data-4: rgb(var(~'@{arco-cssvars-prefix}-blue-3'));
@color-data-5: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));
@color-data-6: rgb(var(~'@{arco-cssvars-prefix}-orange-3'));
@color-data-7: rgb(var(~'@{arco-cssvars-prefix}-green-4'));
@color-data-8: rgb(var(~'@{arco-cssvars-prefix}-green-3'));
@color-data-9: rgb(var(~'@{arco-cssvars-prefix}-purple-4'));
@color-data-10: rgb(var(~'@{arco-cssvars-prefix}-purple-3'));
@color-data-11: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));
@color-data-12: rgb(var(~'@{arco-cssvars-prefix}-gold-4'));
@color-data-13: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));
@color-data-14: rgb(var(~'@{arco-cssvars-prefix}-lime-4'));
@color-data-15: rgb(var(~'@{arco-cssvars-prefix}-magenta-4'));
@color-data-16: rgb(var(~'@{arco-cssvars-prefix}-magenta-3'));
@color-data-17: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));
@color-data-18: rgb(var(~'@{arco-cssvars-prefix}-cyan-3'));
@color-data-19: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-4'));
@color-data-20: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-2'));

@dark-color-border: #333335;
@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%); // 次要信息
@dark-color-text-4: fade(#fff, 30%); // 禁用态
@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%);
@dark-color-primary-light-1: rgba(var(~'@{arco-cssvars-prefix}-primary-6'), 0.2);
@dark-color-primary-light-2: rgba(var(~'@{arco-cssvars-prefix}-primary-6'), 0.35);
@dark-color-primary-light-3: rgba(var(~'@{arco-cssvars-prefix}-primary-6'), 0.5);
@dark-color-primary-light-4: rgba(var(~'@{arco-cssvars-prefix}-primary-6'), 0.65);
@dark-color-secondary: rgba(var(~'@{arco-cssvars-prefix}-gray-9'), 0.08);
@dark-color-secondary-hover: rgba(var(~'@{arco-cssvars-prefix}-gray-8'), 0.16);
@dark-color-secondary-active: rgba(var(~'@{arco-cssvars-prefix}-gray-7'), 0.24);
@dark-color-secondary-disabled: rgba(var(~'@{arco-cssvars-prefix}-gray-9'), 0.08);
@dark-color-danger-light-1: rgba(var(~'@{arco-cssvars-prefix}-danger-6'), 0.2);
@dark-color-danger-light-2: rgba(var(~'@{arco-cssvars-prefix}-danger-6'), 0.35);
@dark-color-danger-light-3: rgba(var(~'@{arco-cssvars-prefix}-danger-6'), 0.5);
@dark-color-danger-light-4: rgba(var(~'@{arco-cssvars-prefix}-danger-6'), 0.65);
@dark-color-success-light-1: rgba(var(~'@{arco-cssvars-prefix}-success-6'), 0.2);
@dark-color-success-light-2: rgba(var(~'@{arco-cssvars-prefix}-success-6'), 0.35);
@dark-color-success-light-3: rgba(var(~'@{arco-cssvars-prefix}-success-6'), 0.5);
@dark-color-success-light-4: rgba(var(~'@{arco-cssvars-prefix}-success-6'), 0.65);
@dark-color-warning-light-1: rgba(var(~'@{arco-cssvars-prefix}-warning-6'), 0.2);
@dark-color-warning-light-2: rgba(var(~'@{arco-cssvars-prefix}-warning-6'), 0.35);
@dark-color-warning-light-3: rgba(var(~'@{arco-cssvars-prefix}-warning-6'), 0.5);
@dark-color-warning-light-4: rgba(var(~'@{arco-cssvars-prefix}-warning-6'), 0.65);
@dark-color-link-light-1: rgba(var(~'@{arco-cssvars-prefix}-link-6'), 0.2);
@dark-color-link-light-2: rgba(var(~'@{arco-cssvars-prefix}-link-6'), 0.35);
@dark-color-link-light-3: rgba(var(~'@{arco-cssvars-prefix}-link-6'), 0.5);
@dark-color-link-light-4: rgba(var(~'@{arco-cssvars-prefix}-link-6'), 0.65);

/********* icon hover *********/
@icon-hover-border-radius: @radius-circle;
@icon-hover-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');

@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;


@prefix: arco;
@arco-theme-tag: body; // css 变量定义的选择器
@arco-vars-prefix: ~''; // css 变量的前缀

// --arco-color-white or --color-white
@arco-cssvars-prefix: if(@arco-vars-prefix = ~'', -, ~'--@{arco-vars-prefix}');

// @font-family: 'nunito_for_arco', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
//   'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
@font-family: Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;

@code-family: Consolas, Menlo;

// global font size
@font-size-body: 14px;

@transition-duration-1: 0.1s;
@transition-duration-2: 0.2s;
@transition-duration-3: 0.3s;
@transition-duration-4: 0.4s;
@transition-duration-5: 0.5s;
@transition-duration-loading: 1s;

// 线性
@transition-timing-function-linear: cubic-bezier(0, 0, 1, 1);
// 标准
@transition-timing-function-standard: cubic-bezier(0.34, 0.69, 0.1, 1);
// 过冲
@transition-timing-function-overshoot: cubic-bezier(0.3, 1.3, 0.3, 1);
// 减速
@transition-timing-function-decelerate: cubic-bezier(0.4, 0.8, 0.74, 1);
// 加速
@transition-timing-function-accelerate: cubic-bezier(0.26, 0, 0.6, 0.2);

@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

@line-height-base: 1.5715;

@popup-box-shadow-base: @shadow1-down;



@{arco-theme-tag} {
  @{arco-cssvars-prefix}-color-white: @color-white;
  @{arco-cssvars-prefix}-color-black: @color-black;
  @{arco-cssvars-prefix}-color-border: @color-border;
  @{arco-cssvars-prefix}-color-bg-popup: @color-bg-popup;
  @{arco-cssvars-prefix}-color-bg-1: @color-bg-1;
  @{arco-cssvars-prefix}-color-bg-2: @color-bg-2;
  @{arco-cssvars-prefix}-color-bg-3: @color-bg-3;
  @{arco-cssvars-prefix}-color-bg-4: @color-bg-4;
  @{arco-cssvars-prefix}-color-bg-5: @color-bg-5;
  @{arco-cssvars-prefix}-color-bg-white: @color-bg-white;
  @{arco-cssvars-prefix}-color-neutral-1: rgb(var(~'@{arco-cssvars-prefix}-gray-1'));
  @{arco-cssvars-prefix}-color-neutral-2: rgb(var(~'@{arco-cssvars-prefix}-gray-2'));
  @{arco-cssvars-prefix}-color-neutral-3: rgb(var(~'@{arco-cssvars-prefix}-gray-3'));
  @{arco-cssvars-prefix}-color-neutral-4: rgb(var(~'@{arco-cssvars-prefix}-gray-4'));
  @{arco-cssvars-prefix}-color-neutral-5: rgb(var(~'@{arco-cssvars-prefix}-gray-5'));
  @{arco-cssvars-prefix}-color-neutral-6: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));
  @{arco-cssvars-prefix}-color-neutral-7: rgb(var(~'@{arco-cssvars-prefix}-gray-7'));
  @{arco-cssvars-prefix}-color-neutral-8: rgb(var(~'@{arco-cssvars-prefix}-gray-8'));
  @{arco-cssvars-prefix}-color-neutral-9: rgb(var(~'@{arco-cssvars-prefix}-gray-9'));
  @{arco-cssvars-prefix}-color-neutral-10: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));
  @{arco-cssvars-prefix}-color-text-1: @color-text-1;
  @{arco-cssvars-prefix}-color-text-2: @color-text-2;
  @{arco-cssvars-prefix}-color-text-3: @color-text-3;
  @{arco-cssvars-prefix}-color-text-4: @color-text-4;
  @{arco-cssvars-prefix}-color-border-1: @color-border-1;
  @{arco-cssvars-prefix}-color-border-2: @color-border-2;
  @{arco-cssvars-prefix}-color-border-3: @color-border-3;
  @{arco-cssvars-prefix}-color-border-4: @color-border-4;
  @{arco-cssvars-prefix}-color-fill-1: @color-fill-1;
  @{arco-cssvars-prefix}-color-fill-2: @color-fill-2;
  @{arco-cssvars-prefix}-color-fill-3: @color-fill-3;
  @{arco-cssvars-prefix}-color-fill-4: @color-fill-4;
  @{arco-cssvars-prefix}-color-primary-light-1: @color-primary-light-1;
  @{arco-cssvars-prefix}-color-primary-light-2: @color-primary-light-2;
  @{arco-cssvars-prefix}-color-primary-light-3: @color-primary-light-3;
  @{arco-cssvars-prefix}-color-primary-light-4: @color-primary-light-4;
  @{arco-cssvars-prefix}-color-secondary: @color-secondary;
  @{arco-cssvars-prefix}-color-secondary-hover: @color-secondary-hover;
  @{arco-cssvars-prefix}-color-secondary-active: @color-secondary-active;
  @{arco-cssvars-prefix}-color-secondary-disabled: @color-secondary-disabled;
  @{arco-cssvars-prefix}-color-danger-light-1: @color-danger-light-1;
  @{arco-cssvars-prefix}-color-danger-light-2: @color-danger-light-2;
  @{arco-cssvars-prefix}-color-danger-light-3: @color-danger-light-3;
  @{arco-cssvars-prefix}-color-danger-light-4: @color-danger-light-4;
  @{arco-cssvars-prefix}-color-success-light-1: @color-success-light-1;
  @{arco-cssvars-prefix}-color-success-light-2: @color-success-light-2;
  @{arco-cssvars-prefix}-color-success-light-3: @color-success-light-3;
  @{arco-cssvars-prefix}-color-success-light-4: @color-success-light-4;
  @{arco-cssvars-prefix}-color-warning-light-1: @color-warning-light-1;
  @{arco-cssvars-prefix}-color-warning-light-2: @color-warning-light-2;
  @{arco-cssvars-prefix}-color-warning-light-3: @color-warning-light-3;
  @{arco-cssvars-prefix}-color-warning-light-4: @color-warning-light-4;
  @{arco-cssvars-prefix}-color-link-light-1: @color-link-light-1;
  @{arco-cssvars-prefix}-color-link-light-2: @color-link-light-2;
  @{arco-cssvars-prefix}-color-link-light-3: @color-link-light-3;
  @{arco-cssvars-prefix}-color-link-light-4: @color-link-light-4;
  @{arco-cssvars-prefix}-color-data-1: @color-data-1;
  @{arco-cssvars-prefix}-color-data-2: @color-data-2;
  @{arco-cssvars-prefix}-color-data-3: @color-data-3;
  @{arco-cssvars-prefix}-color-data-4: @color-data-4;
  @{arco-cssvars-prefix}-color-data-5: @color-data-5;
  @{arco-cssvars-prefix}-color-data-6: @color-data-6;
  @{arco-cssvars-prefix}-color-data-7: @color-data-7;
  @{arco-cssvars-prefix}-color-data-8: @color-data-8;
  @{arco-cssvars-prefix}-color-data-9: @color-data-9;
  @{arco-cssvars-prefix}-color-data-10: @color-data-10;
  @{arco-cssvars-prefix}-color-data-11: @color-data-11;
  @{arco-cssvars-prefix}-color-data-12: @color-data-12;
  @{arco-cssvars-prefix}-color-data-13: @color-data-13;
  @{arco-cssvars-prefix}-color-data-14: @color-data-14;
  @{arco-cssvars-prefix}-color-data-15: @color-data-15;
  @{arco-cssvars-prefix}-color-data-16: @color-data-16;
  @{arco-cssvars-prefix}-color-data-17: @color-data-17;
  @{arco-cssvars-prefix}-color-data-18: @color-data-18;
  @{arco-cssvars-prefix}-color-data-19: @color-data-19;
  @{arco-cssvars-prefix}-color-data-20: @color-data-20;

  // radius
  @{arco-cssvars-prefix}-border-radius-none: @border-radius-none;
  @{arco-cssvars-prefix}-border-radius-small: @border-radius-small;
  @{arco-cssvars-prefix}-border-radius-medium: @border-radius-medium;
  @{arco-cssvars-prefix}-border-radius-large: @border-radius-large;
  @{arco-cssvars-prefix}-border-radius-circle: @border-radius-circle;
  // component
  @{arco-cssvars-prefix}-color-tooltip-bg: @color-tooltip-bg;
  @{arco-cssvars-prefix}-color-spin-layer-bg: @color-spin-layer-bg;
  @{arco-cssvars-prefix}-color-menu-dark-bg: @color-menu-dark-bg;
  @{arco-cssvars-prefix}-color-menu-light-bg: @color-menu-light-bg;
  @{arco-cssvars-prefix}-color-menu-dark-hover: @color-menu-dark-hover;
  @{arco-cssvars-prefix}-color-mask-bg: @mask-color-bg;

  // font
  @{arco-cssvars-prefix}-font-weight-100: @font-weight-100;
  @{arco-cssvars-prefix}-font-weight-200: @font-weight-200;
  @{arco-cssvars-prefix}-font-weight-300: @font-weight-300;
  @{arco-cssvars-prefix}-font-weight-400: @font-weight-400;
  @{arco-cssvars-prefix}-font-weight-500: @font-weight-500;
  @{arco-cssvars-prefix}-font-weight-600: @font-weight-600;
  @{arco-cssvars-prefix}-font-weight-700: @font-weight-700;
  @{arco-cssvars-prefix}-font-weight-800: @font-weight-800;
  @{arco-cssvars-prefix}-font-weight-900: @font-weight-900;
}

@{arco-theme-tag} {
  &[arco-theme='dark'] {
    @{arco-cssvars-prefix}-color-white: @dark-color-white; // 在亮色模式下所有白色文字对应。对应 @color-white;
    @{arco-cssvars-prefix}-color-black: @dark-color-black;
    @{arco-cssvars-prefix}-color-border: @dark-color-border;
    @{arco-cssvars-prefix}-color-bg-1: @dark-color-bg-1; // 整体背景，就是 @dark-gray-1
    @{arco-cssvars-prefix}-color-bg-2: @dark-color-bg-2; // 一级容器背景 (“白色”)
    @{arco-cssvars-prefix}-color-bg-3: @dark-color-bg-3; // 二级容器背景
    @{arco-cssvars-prefix}-color-bg-4: @dark-color-bg-4; // 三级容器背景
    @{arco-cssvars-prefix}-color-bg-5: @dark-color-bg-5; // 下拉框、Tooltips 背景
    @{arco-cssvars-prefix}-color-bg-white: @dark-color-bg-white; // 在亮色模式下 radio，switch 白色背景
    @{arco-cssvars-prefix}-color-text-1: @dark-color-text-1; // 标题，正文
    @{arco-cssvars-prefix}-color-text-2: @dark-color-text-2; // 语句
    @{arco-cssvars-prefix}-color-text-3: @dark-color-text-3; // 次要信息
    @{arco-cssvars-prefix}-color-text-4: @dark-color-text-4; // 禁用态
    @{arco-cssvars-prefix}-color-fill-1: @dark-color-fill-1;
    @{arco-cssvars-prefix}-color-fill-2: @dark-color-fill-2;
    @{arco-cssvars-prefix}-color-fill-3: @dark-color-fill-3;
    @{arco-cssvars-prefix}-color-fill-4: @dark-color-fill-4;
    @{arco-cssvars-prefix}-color-primary-light-1: @dark-color-primary-light-1;
    @{arco-cssvars-prefix}-color-primary-light-2: @dark-color-primary-light-2;
    @{arco-cssvars-prefix}-color-primary-light-3: @dark-color-primary-light-3;
    @{arco-cssvars-prefix}-color-primary-light-4: @dark-color-primary-light-4;
    @{arco-cssvars-prefix}-color-secondary: @dark-color-secondary;
    @{arco-cssvars-prefix}-color-secondary-hover: @dark-color-secondary-hover;
    @{arco-cssvars-prefix}-color-secondary-active: @dark-color-secondary-active;
    @{arco-cssvars-prefix}-color-secondary-disabled: @dark-color-secondary-disabled;
    @{arco-cssvars-prefix}-color-danger-light-1: @dark-color-danger-light-1;
    @{arco-cssvars-prefix}-color-danger-light-2: @dark-color-danger-light-2;
    @{arco-cssvars-prefix}-color-danger-light-3: @dark-color-danger-light-3;
    @{arco-cssvars-prefix}-color-danger-light-4: @dark-color-danger-light-4;
    @{arco-cssvars-prefix}-color-success-light-1: @dark-color-success-light-1;
    @{arco-cssvars-prefix}-color-success-light-2: @dark-color-success-light-2;
    @{arco-cssvars-prefix}-color-success-light-3: @dark-color-success-light-3;
    @{arco-cssvars-prefix}-color-success-light-4: @dark-color-success-light-4;
    @{arco-cssvars-prefix}-color-warning-light-1: @dark-color-warning-light-1;
    @{arco-cssvars-prefix}-color-warning-light-2: @dark-color-warning-light-2;
    @{arco-cssvars-prefix}-color-warning-light-3: @dark-color-warning-light-3;
    @{arco-cssvars-prefix}-color-warning-light-4: @dark-color-warning-light-4;
    @{arco-cssvars-prefix}-color-link-light-1: @dark-color-link-light-1;
    @{arco-cssvars-prefix}-color-link-light-2: @dark-color-link-light-2;
    @{arco-cssvars-prefix}-color-link-light-3: @dark-color-link-light-3;
    @{arco-cssvars-prefix}-color-link-light-4: @dark-color-link-light-4;
    // component
    @{arco-cssvars-prefix}-color-tooltip-bg: @dark-color-tooltip-bg;
    @{arco-cssvars-prefix}-color-spin-layer-bg: @dark-color-spin-layer-bg;
    @{arco-cssvars-prefix}-color-menu-dark-bg: @color-menu-dark-bg;
    @{arco-cssvars-prefix}-color-menu-light-bg: @color-menu-dark-bg;
    @{arco-cssvars-prefix}-color-menu-dark-hover: @dark-color-menu-dark-hover;
    @{arco-cssvars-prefix}-color-mask-bg: @dark-mask-color-bg;
  }
}

/* stylelint-disable */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html,
body {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-font-smoothing: antialiased; /* chrome、safari */
  -moz-osx-font-smoothing: grayscale; /* firefox */
  font-family: @font-family;
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
  padding: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

tr,
th {
  margin: 0;
  padding: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type='checkbox'],
[type='radio'] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

* {
  outline: none;
}

/**
 * remove input clear icon in IE & Edge
 */
input::-ms-clear,
input::-ms-reveal {
  display: none;
}

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.@{prefix}-icon {
  display: inline-block;
  color: inherit;
  font-style: normal;
  width: 1em;
  height: 1em;
  vertical-align: -2px;
  stroke: currentColor;
}

.@{prefix}-icon[fill='currentColor'] {
  fill: currentColor;
  stroke: none;
}

.@{prefix}-icon[stroke='currentColor'] {
  stroke: currentColor;
  fill: none;
}

.@{prefix}-icon[fill='currentColor'][stroke='currentColor'] {
  fill: currentColor;
  stroke: currentColor;
}

.@{prefix}-icon-loading {
  animation: ~'@{prefix}-loading-circle' @transition-duration-loading infinite @transition-timing-function-linear;
}

@keyframes ~'@{prefix}-loading-circle' {
  100% {
    transform: rotate(360deg);
  }
}

.@{prefix}-icon-hover {
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 0;

  .@{prefix}-icon {
    position: relative;
    vertical-align: -0.09em;
  }

  &::before {
    content: '';
    position: absolute;
    display: block;
    border-radius: @icon-hover-border-radius;
    background-color: @color-transparent;
    box-sizing: border-box;
    transition: background-color @transition-duration-1 @transition-timing-function-linear;
  }

  &:hover::before {
    background-color: @icon-hover-color-bg;
  }

  &.@{prefix}-icon-hover-disabled::before {
    opacity: 0;
  }

  .size(@icon-size, @icon-bg-height) {
    // line-height: @icon-size;

    &::before {
      top: 50%;
      left: 50%;
      height: @icon-bg-height;
      width: @icon-bg-height;
      transform: translate(-50%, -50%);
    }
  }

  .size(@icon-hover-size-default-icon, @icon-hover-size-default-height);

  &-size-mini {
    .size(@icon-hover-size-mini-icon, @icon-hover-size-mini-height);
  }

  &-size-small {
    .size(@icon-hover-size-small-icon, @icon-hover-size-small-height);
  }

  &-size-large {
    .size(@icon-hover-size-large-icon, @icon-hover-size-large-height);
  }

  &-size-huge {
    .size(@icon-hover-size-huge-icon, @icon-hover-size-huge-height);
  }
}



// used by drawer mask
.fadeInStandard-enter,
.fadeInStandard-appear {
  opacity: 0;
}

.fadeInStandard-enter-active,
.fadeInStandard-appear-active {
  opacity: 1;
  transition: opacity @transition-duration-3 @transition-timing-function-standard;
}

.fadeInStandard-exit {
  opacity: 1;
}

.fadeInStandard-exit-active {
  opacity: 0;
  transition: opacity @transition-duration-3 @transition-timing-function-standard;
}

.fadeIn-enter,
.fadeIn-appear {
  opacity: 0;
}

.fadeIn-enter-active,
.fadeIn-appear-active {
  opacity: 1;
  transition: opacity @transition-duration-1 @transition-timing-function-linear;
}

.fadeIn-exit {
  opacity: 1;
}

.fadeIn-exit-active {
  opacity: 0;
  transition: opacity @transition-duration-1 @transition-timing-function-linear;
}



// used by cascader select treeselect ... like picker
.slideDynamicOrigin-enter,
.slideDynamicOrigin-appear {
  opacity: 0;
  transform-origin: 0 0;
  transform: scaleY(0.9) translateZ(0);
}


.slideDynamicOrigin-enter-active,
.slideDynamicOrigin-appear-active {
  opacity: 1;
  transform-origin: 0 0;
  transform: scaleY(1) translateZ(0);
  transition: transform @transition-duration-2 @transition-timing-function-standard,
    opacity @transition-duration-2 @transition-timing-function-standard;
}

.slideDynamicOrigin-exit {
  opacity: 1;
  transform-origin: 0 0;
  transform: scaleY(1) translateZ(0);
  transition: transform @transition-duration-2 @transition-timing-function-standard,
    opacity @transition-duration-2 @transition-timing-function-standard;
}

.slideDynamicOrigin-exit-active {
  opacity: 0;
  transform-origin: 0 0;
  transform: scaleY(0.9) translateZ(0);
  transition: transform @transition-duration-2 @transition-timing-function-standard,
    opacity @transition-duration-2 @transition-timing-function-standard;
}

// used by drawer
.slideLeft-enter,
.slideLeft-appear {
  transform: translateX(-100%);
}

.slideLeft-enter-active,
.slideLeft-appear-active {
  transform: translateX(0);
  transition: transform @transition-duration-3 @transition-timing-function-standard;
}

.slideLeft-exit {
  transform: translateX(0);
}

.slideLeft-exit-active {
  transform: translateX(-100%);
  transition: transform @transition-duration-3 @transition-timing-function-standard;
}

.slideRight-enter,
.slideRight-appear {
  transform: translateX(100%);
}

.slideRight-enter-active,
.slideRight-appear-active {
  transform: translateX(0);
  transition: transform @transition-duration-3 @transition-timing-function-standard;
}

.slideRight-exit {
  transform: translateX(0);
}

.slideRight-exit-active {
  transform: translateX(100%);
  transition: transform @transition-duration-3 @transition-timing-function-standard;
}

.slideTop-enter,
.slideTop-appear {
  transform: translateY(-100%);
}

.slideTop-enter-active,
.slideTop-appear-active {
  transform: translateY(0);
  transition: transform @transition-duration-3 @transition-timing-function-standard;
}

.slideTop-exit {
  transform: translateY(0);
}

.slideTop-exit-active {
  transform: translateY(-100%);
  transition: transform @transition-duration-3 @transition-timing-function-standard;
}

.slideBottom-enter,
.slideBottom-appear {
  transform: translateY(100%);
}

.slideBottom-enter-active,
.slideBottom-appear-active {
  transform: translateY(0);
  transition: transform @transition-duration-3 @transition-timing-function-standard;
}

.slideBottom-exit {
  transform: translateY(0);
}

.slideBottom-exit-active {
  transform: translateY(100%);
  transition: transform @transition-duration-3 @transition-timing-function-standard;
}



// modal use
.zoomIn-enter,
.zoomIn-appear {
  opacity: 0;
  transform: scale(0.5, 0.5);
}

.zoomIn-enter-active,
.zoomIn-appear-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: opacity @transition-duration-3 @transition-timing-function-standard,
    transform @transition-duration-3 @transition-timing-function-standard;
}

.zoomIn-exit {
  opacity: 1;
  transform: scale(1, 1);
}

.zoomIn-exit-active {
  opacity: 0;
  transform: scale(0.5, 0.5);
  transition: opacity @transition-duration-3 @transition-timing-function-overshoot,
    transform @transition-duration-3 @transition-timing-function-overshoot;
}

// used by tooltip。缩放出现，渐隐退出
.zoomInFadeOut-enter,
.zoomInFadeOut-appear {
  opacity: 0;
  transform: scale(0.5, 0.5);
}

.zoomInFadeOut-enter-active,
.zoomInFadeOut-appear-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: opacity @transition-duration-2 @transition-timing-function-standard,
    transform @transition-duration-2 @transition-timing-function-standard;
}

.zoomInFadeOut-exit {
  opacity: 1;
  transform: scale(1, 1);
}

.zoomInFadeOut-exit-active {
  opacity: 0;
  transform: scale(0.5, 0.5);
  transition: opacity @transition-duration-2 @transition-timing-function-overshoot,
    transform @transition-duration-2 @transition-timing-function-overshoot;
}

// used by slide, table filter
.zoomInBig-enter,
.zoomInBig-appear {
  opacity: 0;
  transform: scale(0.5, 0.5);
}

.zoomInBig-enter-active,
.zoomInBig-appear-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: opacity @transition-duration-2 @transition-timing-function-linear,
    transform @transition-duration-2 @transition-timing-function-linear;
}

.zoomInBig-exit {
  opacity: 1;
  transform: scale(1, 1);
}

.zoomInBig-exit-active {
  opacity: 0;
  transform: scale(0.2, 0.2);
  transition: opacity @transition-duration-2 @transition-timing-function-linear,
    transform @transition-duration-2 @transition-timing-function-linear;
}

.zoomInLeft-enter,
.zoomInLeft-appear {
  opacity: 0.1;
  transform-origin: 0 50%;
  transform: scale(0.1, 0.1);
}

.zoomInLeft-enter-active,
.zoomInLeft-appear-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: opacity @transition-duration-3 @transition-timing-function-linear,
    transform @transition-duration-3 @transition-timing-function-overshoot;
}

.zoomInLeft-exit {
  opacity: 1;
  transform-origin: 0 50%;
  transform: scale(1, 1);
}

.zoomInLeft-exit-active {
  opacity: 0.1;
  transform: scale(0.1, 0.1);
  transition: opacity @transition-duration-3 @transition-timing-function-linear,
    transform @transition-duration-3 @transition-timing-function-overshoot;
}

// used by alert form
.zoomInTop-enter,
.zoomInTop-appear {
  opacity: 0;
  transform-origin: 0% 0%;
  transform: scaleY(0.8) translateZ(0);
}

.zoomInTop-enter-active,
.zoomInTop-appear-active {
  opacity: 1;
  transform-origin: 0% 0%;
  transform: scaleY(1) translateZ(0);
  transition: transform @transition-duration-3 @transition-timing-function-overshoot,
    opacity @transition-duration-3 @transition-timing-function-overshoot;
}

.zoomInTop-exit {
  opacity: 1;
  transform-origin: 0% 0%;
  transform: scaleY(1) translateZ(0);
}

.zoomInTop-exit-active {
  opacity: 0;
  transform-origin: 0% 0%;
  transform: scaleY(0.8) translateZ(0);
  transition: transform @transition-duration-3 @transition-timing-function-overshoot,
    opacity @transition-duration-3 @transition-timing-function-overshoot;
}

.zoomInBottom-enter,
.zoomInBottom-appear {
  opacity: 0;
  transform-origin: 100% 100%;
  transform: scaleY(0.8) translateZ(0);
}

.zoomInBottom-enter-active,
.zoomInBottom-appear-active {
  opacity: 1;
  transform-origin: 100% 100%;
  transform: scaleY(1) translateZ(0);
  transition: transform @transition-duration-3 @transition-timing-function-overshoot,
    opacity @transition-duration-3 @transition-timing-function-overshoot;
}

.zoomInBottom-exit {
  opacity: 1;
  transform-origin: 100% 100%;
  transform: scaleY(1) translateZ(0);
}

.zoomInBottom-exit-active {
  opacity: 0;
  transform-origin: 100% 100%;
  transform: scaleY(0.8) translateZ(0);
  transition: transform @transition-duration-3 @transition-timing-function-overshoot,
    opacity @transition-duration-3 @transition-timing-function-overshoot;
}



body {
  font-size: @font-size-body;
}


/********** global end ***************/
    


/********** Alert  ***************/



@alert-border-width: @border-1;
@alert-margin-close-icon-left: @spacing-4;
@alert-margin-icon-right:  @spacing-4;
@alert-margin-action-right: @spacing-4;
@alert-margin-action-left: @spacing-4;
@alert-border-radius: @radius-small;
@alert-line-height: 1.5715;
@alert-title-line-height: 1.5;
@alert-title-margin-bottom: @spacing-2;

@alert-padding-horizontal: @spacing-7;
@alert-padding-vertical: 9px;
@alert-padding-horizontal_with_title: @spacing-7;
@alert-padding-vertical_with_title: @spacing-7;

@alert-font-weight-title: @font-weight-500;
@alert-font-size-text-title: @font-size-title-1;
@alert-font-size-text-content: @font-size-body-3;
@alert-font-size-icon: 16px;
@alert-font-size-icon_with_title: 18px;
@alert-font-size-close-icon: 12px;
@alert-color-close-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@alert-color-close-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-1');

/*****************************************************
 * type: info / warning / error /success
 *****************************************************/
@alert-info-color-bg: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@alert-info-color-border: @color-transparent;
@alert-info-color-icon: @color-primary-6;
@alert-info-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@alert-info-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@alert-info-color-text-content_title: var(~'@{arco-cssvars-prefix}-color-text-2');

@alert-warning-color-bg: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@alert-warning-color-border: @color-transparent;
@alert-warning-color-icon: @color-warning-6;
@alert-warning-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@alert-warning-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@alert-warning-color-text-content_title: var(~'@{arco-cssvars-prefix}-color-text-2');

@alert-error-color-bg: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@alert-error-color-border: @color-transparent;
@alert-error-color-icon: @color-danger-6;
@alert-error-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@alert-error-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@alert-error-color-text-content_title: var(~'@{arco-cssvars-prefix}-color-text-2');

@alert-success-color-bg: var(~'@{arco-cssvars-prefix}-color-success-light-1');
@alert-success-color-border: @color-transparent;
@alert-success-color-icon: @color-success-6;
@alert-success-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@alert-success-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@alert-success-color-text-content_title: var(~'@{arco-cssvars-prefix}-color-text-2');


@alert-prefix-cls: ~'@{prefix}-alert';

.@{alert-prefix-cls} {
  box-sizing: border-box;
  border-radius: @alert-border-radius;
  padding: (@alert-padding-vertical - @alert-border-width)
    (@alert-padding-horizontal - @alert-border-width);
  font-size: @alert-font-size-text-content;
  overflow: hidden;
  display: flex;
  width: 100%;
  text-align: left;
  align-items: center;
  line-height: @alert-line-height;

  &-with-title {
    padding: (@alert-padding-vertical_with_title - @alert-border-width)
      (@alert-padding-horizontal_with_title - @alert-border-width);
  }

  &-with-title {
    align-items: flex-start;
  }

  &-info {
    border: @alert-border-width solid @alert-info-color-border;
    background-color: @alert-info-color-bg;
  }

  &-success {
    border: @alert-border-width solid @alert-success-color-border;
    background-color: @alert-success-color-bg;
  }

  &-warning {
    border: @alert-border-width solid @alert-warning-color-border;
    background-color: @alert-warning-color-bg;
  }

  &-error {
    border: @alert-border-width solid @alert-error-color-border;
    background-color: @alert-error-color-bg;
  }

  &-banner {
    border: none;
    border-radius: 0;
  }

  &-content-wrapper {
    position: relative;
    flex: 1;
  }

  &-title {
    font-size: @alert-font-size-text-title;
    font-weight: @alert-font-weight-title;
    line-height: @alert-title-line-height;
    margin-bottom: @alert-title-margin-bottom;
  }

  &-info &-title {
    color: @alert-info-color-text-title;
  }

  &-info &-content {
    color: @alert-info-color-text-content;
  }

  &-info&-with-title &-content {
    color: @alert-info-color-text-content_title;
  }

  &-success &-title {
    color: @alert-success-color-text-title;
  }

  &-success &-content {
    color: @alert-success-color-text-content;
  }

  &-success&-with-title &-content {
    color: @alert-success-color-text-content_title;
  }

  &-warning &-title {
    color: @alert-warning-color-text-title;
  }

  &-warning &-content {
    color: @alert-warning-color-text-content;
  }

  &-warning&-with-title &-content {
    color: @alert-warning-color-text-content_title;
  }

  &-error &-title {
    color: @alert-error-color-text-title;
  }

  &-error &-content {
    color: @alert-error-color-text-content;
  }

  &-error&-with-title &-content {
    color: @alert-error-color-text-content_title;
  }

  &-icon-wrapper {
    margin-right: @alert-margin-icon-right;
    height: @alert-line-height * @alert-font-size-text-content;
    display: flex;
    align-items: center;

    svg {
      font-size: @alert-font-size-icon;
    }
  }

  &-with-title &-icon-wrapper {
    height: @alert-title-line-height * @alert-font-size-text-title;
  }

  &-with-title &-icon-wrapper svg {
    font-size: @alert-font-size-icon_with_title;
  }

  &-info &-icon-wrapper svg {
    color: @alert-info-color-icon;
  }

  &-success &-icon-wrapper svg {
    color: @alert-success-color-icon;
  }

  &-warning &-icon-wrapper svg {
    color: @alert-warning-color-icon;
  }

  &-error &-icon-wrapper svg {
    color: @alert-error-color-icon;
  }

  &-close-btn {
    box-sizing: border-box;
    padding: 0;
    border: none;
    outline: none;
    font-size: @alert-font-size-close-icon;
    color: @alert-color-close-icon;
    background-color: transparent;
    cursor: pointer;
    transition: color @transition-duration-1 @transition-timing-function-linear;
    margin-left: @alert-margin-close-icon-left;
    top: 4px;
    right: 0;

    &:hover {
      color: @alert-color-close-icon_hover;
    }
  }

  &-action + &-close-btn {
    margin-left: @alert-margin-action-right;
  }

  &-action {
    margin-left: @alert-margin-action-left;
  }

  &-with-title &-close-btn {
    margin-top: 0;
    margin-right: 0;
  }
}

.@{alert-prefix-cls}-rtl {
  direction: rtl;
  text-align: right;

  .@{alert-prefix-cls}-with-title {
    align-items: flex-end;
  }

  .@{alert-prefix-cls}-icon-wrapper {
    margin-right: 0;
    margin-left: @alert-margin-icon-right;
  }

  .@{alert-prefix-cls}-close-btn {
    right: initial;
    left: 0;
  }

  .@{alert-prefix-cls}-action {
    margin-left: 0;
    margin-right: @alert-margin-action-left;

    + .@{alert-prefix-cls}-close-btn {
      margin-left: 0;
      margin-right: @alert-margin-action-right;
    }
  }
}


/********** Alert end ***************/
    


/********** Anchor  ***************/



// Line
@anchor-width: 150px;
@anchor-line-width: 2px;
@anchor-line-slider-height: 12px;
@anchor-line-margin-right: 12px;
@anchor-color-bg-line: var(~'@{arco-cssvars-prefix}-color-fill-3');
@anchor-color-bg-line_active: @color-primary-6;

@anchor-border-radius-title-hover: @radius-small;

@anchor-item-inner-margin-left: @spacing-7;

@anchor-title-padding-horizontal: @spacing-4;
@anchor-title-padding-vertical: @spacing-2;
@anchor-title-margin-bottom: @spacing-1;
@anchor-title-margin-left_horizontal: @spacing-7;

@anchor-color-title: var(~'@{arco-cssvars-prefix}-color-text-2');
@anchor-color-title_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@anchor-color-title_active: var(~'@{arco-cssvars-prefix}-color-text-1');
@anchor-font-weight-title_hover: @font-weight-500;
@anchor-font-weight-title_horizontal_hover: @font-weight-400;
@anchor-font-weight-title_active: @font-weight-500;
@anchor-color-bg-title_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@anchor-font-size-title: 14px;

// Lineless
@anchor-lineless-color-title_active: @color-primary-6;
@anchor-lineless-bg-title_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
@anchor-lineless-font-weight-title_active: @font-weight-500;
@anchor-color-box-shadow: @color-primary-6;


@anchor-prefix-cls: ~'@{prefix}-anchor';

.@{anchor-prefix-cls} {
  position: relative;
  width: @anchor-width;
  overflow: auto;

  &-line {
    &-slider {
      position: absolute;
      height: @anchor-line-slider-height;
      width: @anchor-line-width;
      margin-top: (
        (@anchor-font-size-title * @line-height-base) / 2 + @anchor-title-padding-vertical -
          @anchor-line-slider-height / 2
      );
      background-color: @anchor-color-bg-line_active;
      left: 0;
      top: 0;
      transition: all @transition-duration-2 @transition-timing-function-standard;
      z-index: 1;
    }
  }

  &-list {
    margin-left: @anchor-line-margin-right - @anchor-title-padding-horizontal + @anchor-line-width;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      height: 100%;
      background-color: @anchor-color-bg-line;
      width: @anchor-line-width;
      left: @anchor-title-padding-horizontal - @anchor-line-margin-right - @anchor-line-width;
    }
  }

  &-link {
    margin-bottom: @anchor-title-margin-bottom;

    &-title {
      color: @anchor-color-title;
      line-height: @line-height-base;
      font-size: @anchor-font-size-title;
      margin-bottom: @anchor-title-margin-bottom;
      padding: @anchor-title-padding-vertical @anchor-title-padding-horizontal;
      text-decoration: none;
      cursor: pointer;
      text-overflow: ellipsis;
      overflow: hidden;
      display: block;
      white-space: nowrap;
      border-radius: @anchor-border-radius-title-hover;
    }

    &-title:hover {
      background-color: @anchor-color-bg-title_hover;
      color: @anchor-color-title_hover;
      font-weight: @anchor-font-weight-title_hover;
    }

    &-title:focus-visible {
      box-shadow: inset 0 0 0 2px @anchor-color-box-shadow;
    }

    &-active > &-title {
      transition: all @transition-duration-1 @transition-timing-function-linear;
      color: @anchor-color-title_active;
      font-weight: @anchor-font-weight-title_active;
    }
  }

  &-link &-link {
    margin-left: @anchor-item-inner-margin-left;
  }

  // Lineless
  &-lineless &-list {
    margin-left: 0;

    &::before {
      display: none;
    }
  }

  &-lineless &-link-active > &-link-title {
    background-color: @anchor-lineless-bg-title_active;
    color: @anchor-lineless-color-title_active;
    font-weight: @anchor-lineless-font-weight-title_active;
  }
}

.@{anchor-prefix-cls}-rtl {
  direction: rtl;

  .@{anchor-prefix-cls}-list {
    margin-left: 0;
    margin-right: @anchor-line-margin-right - @anchor-title-padding-horizontal + @anchor-line-width;

    &::before {
      left: initial;
      right: @anchor-title-padding-horizontal - @anchor-line-margin-right - @anchor-line-width;
    }
  }

  .@{anchor-prefix-cls}-link {
    .@{anchor-prefix-cls}-link {
      margin-left: 0;
      margin-right: @anchor-item-inner-margin-left;
    }
  }

  &.@{anchor-prefix-cls}-lineless {
    .@{anchor-prefix-cls}-list {
      margin-right: 0;
    }
  }

  .@{anchor-prefix-cls}-line {
    &-slider {
      left: initial;
      right: 0;
    }
  }
}



// Line
@anchor-width: 150px;
@anchor-line-width: 2px;
@anchor-line-slider-height: 12px;
@anchor-line-margin-right: 12px;
@anchor-color-bg-line: var(~'@{arco-cssvars-prefix}-color-fill-3');
@anchor-color-bg-line_active: @color-primary-6;

@anchor-border-radius-title-hover: @radius-small;

@anchor-item-inner-margin-left: @spacing-7;

@anchor-title-padding-horizontal: @spacing-4;
@anchor-title-padding-vertical: @spacing-2;
@anchor-title-margin-bottom: @spacing-1;
@anchor-title-margin-left_horizontal: @spacing-7;

@anchor-color-title: var(~'@{arco-cssvars-prefix}-color-text-2');
@anchor-color-title_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@anchor-color-title_active: var(~'@{arco-cssvars-prefix}-color-text-1');
@anchor-font-weight-title_hover: @font-weight-500;
@anchor-font-weight-title_horizontal_hover: @font-weight-400;
@anchor-font-weight-title_active: @font-weight-500;
@anchor-color-bg-title_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@anchor-font-size-title: 14px;

// Lineless
@anchor-lineless-color-title_active: @color-primary-6;
@anchor-lineless-bg-title_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
@anchor-lineless-font-weight-title_active: @font-weight-500;
@anchor-color-box-shadow: @color-primary-6;


@anchor-prefix-cls: ~'@{prefix}-anchor';

.@{anchor-prefix-cls} {
  &&-horizontal {
    width: 100%;
  }

  &-horizontal &-list {
    display: flex;
    width: 100%;
    margin: 0;

    &::before {
      left: 0;
      right: 0;
      width: 100%;
      bottom: 0;
      height: 2px;
    }
  }

  &-horizontal &-link-title:hover {
    font-weight: @anchor-font-weight-title_horizontal_hover;
  }

  &-horizontal &-link-active &-link-title:hover {
    font-weight: @anchor-font-weight-title_active;
  }

  &-horizontal &-link:not(:first-of-type) {
    margin-left: @anchor-title-margin-left_horizontal;
  }

  &-rtl&-horizontal &-link:not(:first-of-type) {
    margin-right: @anchor-title-margin-left_horizontal;
    margin-left: unset;
  }

  &-horizontal &-line-slider {
    height: @anchor-line-width;
    width: 0;
    margin: 0;
    top: unset;
    bottom: 0;
    background-color: transparent;
    right: unset;

    &::before {
      content: '';
      display: block;
      position: absolute;
      left: @anchor-title-padding-horizontal;
      right: @anchor-title-padding-horizontal;
      height: 100%;
      background-color: @anchor-color-bg-line_active;
    }
  }

  // 横向无轴线模式
  &&-lineless &-link,
  &&-lineless &-link-title {
    margin-bottom: 0;
  }
}



/********** Anchor end ***************/
    


/********** Affix  ***************/



@affix-prefix-cls: ~'@{prefix}-affix';

.@{affix-prefix-cls} {
  position: fixed;
  z-index: @z-index-affix;
}


/********** Affix end ***************/
    


/********** AutoComplete  ***************/



/**********************************************
 * Popup Box
 **********************************************/
@auto-complete-popup-max-height: @size-50;
@auto-complete-popup-border-radius: @radius-medium;
@auto-complete-popup-padding-vertical: @spacing-2;
@auto-complete-popup-font-size: @font-size-body-3;
@auto-complete-popup-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
@auto-complete-popup-box-shadow: @shadow2-down;

/**********************************************
 * Popup Options
 * status: default / disabled / selected / hover
 **********************************************/
@auto-complete-option-height: @size-9;
@auto-complete-option-font-weight_selected: @font-weight-500;
@auto-complete-option-padding-horizontal: @spacing-6;

@auto-complete-option-color-bg_default: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@auto-complete-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@auto-complete-option-color-bg_selected: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@auto-complete-option-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-popup');

@auto-complete-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@auto-complete-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@auto-complete-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-text-1');
@auto-complete-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');


@auto-complete-prefix-cls: ~'@{prefix}-autocomplete';
@select-prefix-cls: ~'@{prefix}-select';

.@{auto-complete-prefix-cls} {
  &-popup .@{select-prefix-cls}-popup {
    border: 1px solid @auto-complete-popup-color-border;
    border-radius: @auto-complete-popup-border-radius;
    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');
    box-shadow: @auto-complete-popup-box-shadow;

    .@{select-prefix-cls}-popup-inner {
      padding: @auto-complete-popup-padding-vertical 0;
      max-height: @auto-complete-popup-max-height;
    }

    .@{select-prefix-cls}-option {
      height: @auto-complete-option-height;
      padding: 0 @auto-complete-option-padding-horizontal;
      font-size: @auto-complete-popup-font-size;
      line-height: $height;

      .option-color(@status) {
        @class-suffix: if(@status = default, ~'', ~'-@{status}');

        &@{class-suffix} {
          color: ~'@{auto-complete-option-color-text_@{status}}';
          background-color: ~'@{auto-complete-option-color-bg_@{status}}';
        }
      }

      .option-color(default);
      .option-color(selected);
      .option-color(hover);
      // disabled 优先级最高，放在最后
      .option-color(disabled);

      &-selected {
        font-weight: @auto-complete-option-font-weight_selected;
      }
    }
  }
}


/********** AutoComplete end ***************/
    


/********** Avatar  ***************/



@avatar-size-default: @size-10;
@avatar-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@avatar-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-4');
@avatar-color-group-item-border: var(~'@{arco-cssvars-prefix}-color-bg-2');
@avatar-group-item-border-width: 2px;
@avatar-group-item-margin-left: -10px;
@avatar-group-popover-item-spacing: @spacing-2;
@avatar-font-weight-text: @font-weight-500;
@avatar-font-size-text: 20px;
@avatar-circle-border-radius: @radius-circle;
@avatar-square-border-radius: @radius-medium;
@avatar-font-size-max-count: 20px;
@avatar-color-max-count-text: var(~'@{arco-cssvars-prefix}-color-white');

@avatar-size-trigger-button: @size-5;
@avatar-spacing-trigger-button-right: @spacing-2;
@avatar-spacing-trigger-button-bottom: @spacing-2;
@avatar-color-trigger-button-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
@avatar-color-trigger-button-bg_hover: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@avatar-color-trigger-mask-icon: var(~'@{arco-cssvars-prefix}-color-white');
@avatar-opacity-trigger-mask-bg: @opacity-6;
@avatar-color-trigger-icon-button: var(~'@{arco-cssvars-prefix}-color-fill-4');
@avatar-size-trigger-icon: @size-3;
@avatar-border-trigger-button-radius: @radius-circle;


@avatar-prefix-cls: ~'@{prefix}-avatar';

.@{avatar-prefix-cls} {
  display: inline-flex;
  align-items: center;
  position: relative;
  background-color: @avatar-color-bg;
  white-space: nowrap;
  color: @avatar-color-text;
  box-sizing: border-box;
  vertical-align: middle;
  width: @avatar-size-default;
  height: @avatar-size-default;
  font-size: @avatar-font-size-text;

  &-circle {
    border-radius: @avatar-circle-border-radius;
  }

  &-circle &-image {
    border-radius: @avatar-circle-border-radius;
    overflow: hidden;
  }

  &-square {
    border-radius: @avatar-square-border-radius;
  }

  &-square &-image {
    border-radius: @avatar-square-border-radius;
    overflow: hidden;
  }

  &-text {
    position: absolute;
    left: 50%;
    transform-origin: 0 center;
    transform: translateX(-50%);
    font-weight: @avatar-font-weight-text;
    // 避免继承行高导致的文字不居中
    line-height: 1;
  }

  &-image {
    display: inline-flex;
    width: 100%;
    height: 100%;

    img,
    picture {
      width: 100%;
      height: 100%;
    }
  }

  &-trigger-icon-button {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    bottom: -@avatar-spacing-trigger-button-bottom;
    right: -@avatar-spacing-trigger-button-right;
    color: @avatar-color-trigger-icon-button;
    font-size: @avatar-size-trigger-icon;
    border-radius: @avatar-border-trigger-button-radius;
    width: @avatar-size-trigger-button;
    height: @avatar-size-trigger-button;
    line-height: @avatar-size-trigger-button;
    background-color: @avatar-color-trigger-button-bg;
    transition: background-color @transition-duration-1 @transition-timing-function-linear;
    z-index: 1;
  }

  &-trigger-icon-mask {
    position: absolute;
    display: flex;
    opacity: 0;
    z-index: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-size: 16px;
    transition: all @transition-duration-1 @transition-timing-function-linear;
    border-radius: @avatar-square-border-radius;
    background-color: fade(@gray-10, @avatar-opacity-trigger-mask-bg);
    color: @avatar-color-trigger-mask-icon;
  }

  &-circle &-trigger-icon-mask {
    border-radius: @avatar-circle-border-radius;
  }

  &-with-trigger-icon {
    cursor: pointer;
  }

  &-with-trigger-icon:hover &-trigger-icon-mask {
    z-index: 2;
    opacity: 1;
  }

  &-with-trigger-icon:hover &-trigger-icon-button {
    background-color: @avatar-color-trigger-button-bg_hover;
  }

  &-rtl {
    direction: rtl;
  }

  &-rtl &-trigger-icon-button {
    right: unset;
    left: -@avatar-spacing-trigger-button-right;
  }
}

.@{avatar-prefix-cls} {
  &-group {
    display: inline-block;
    line-height: 0;

    &-max-count-avatar {
      cursor: default;
      color: @avatar-color-max-count-text;
      font-size: @avatar-font-size-max-count;
    }

    &-rtl {
      direction: rtl;
    }
  }

  &-group & {
    border: @avatar-group-item-border-width solid @avatar-color-group-item-border;
  }

  &-group &:not(:first-child) {
    margin-left: @avatar-group-item-margin-left;
  }

  &-group-popover &:not(:first-child) {
    margin-left: @avatar-group-popover-item-spacing;
  }
}


/********** Avatar end ***************/
    


/********** BackTop  ***************/



@backtop-margin-bottom: @spacing-9;
@backtop-margin-right: @spacing-9;

@backtop-button-size-width: @size-10;
@backtop-button-size-font: @font-size-body-1;
@backtop-button-size-icon: 14px;
@backtop-button-color-bg: @color-primary-6;
@backtop-button-color-bg_hover: @color-primary-5;
@backtop-button-border-radius: @radius-circle;
@backtop-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');


@backtop-prefix-cls: ~'@{prefix}-backtop';

.@{backtop-prefix-cls} {
  position: fixed;
  bottom: @backtop-margin-bottom;
  right: @backtop-margin-right;
  z-index: 100;
  cursor: pointer;

  &-button {
    width: @backtop-button-size-width;
    height: @backtop-button-size-width;
    font-size: @backtop-button-size-font;
    text-align: center;
    outline: none;
    background-color: @backtop-button-color-bg;
    border-radius: @backtop-button-border-radius;
    color: @backtop-button-color-text;
    transition: all @transition-duration-2 @transition-timing-function-linear;
    cursor: pointer;
    border: none;

    &:focus-visible {
      box-shadow: 0 0 0 2px var(~'@{arco-cssvars-prefix}-color-primary-light-3');
    }

    &:hover {
      background-color: @backtop-button-color-bg_hover;
    }

    svg {
      font-size: @backtop-button-size-icon;
    }
  }
}


/********** BackTop end ***************/
    


/********** Badge  ***************/



@badge-size-count-height: @size-5;
@badge-padding-count-horizontal: @spacing-3;
@badge-margin-status-text-left: @spacing-4;

@badge-font-count-size: @font-size-body-1;
@badge-font-status-text-size: @font-size-body-3;
@badge-color-count-text: var(~'@{arco-cssvars-prefix}-color-white');
@badge-color-status-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@badge-color-count-bg: @color-danger-6;
@badge-size-dot-width: 6px;
@badge-color-dot-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-4');
@badge-color-dot-bg_processing: @color-primary-6;
@badge-color-dot-bg_success: @color-success-6;
@badge-color-dot-bg_warning: @color-warning-6;
@badge-color-dot-bg_error: @color-danger-6;
@badge-font-count-weight: @font-weight-500;
@badge-red-color-dot-bg: @color-danger-6;
@badge-orangered-color-dot-bg: @orangered-6;
@badge-orange-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));
@badge-lime-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));
@badge-gold-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));
@badge-green-color-dot-bg: @color-success-6;
@badge-cyan-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));
@badge-arcoblue-color-dot-bg: @color-primary-6;
@badge-pinkpurple-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));
@badge-purple-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-purple-6'));
@badge-magenta-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));
@badge-gray-color-dot-bg: rgb(var(~'@{arco-cssvars-prefix}-gray-4'));


@badge-prefix-cls: ~'@{prefix}-badge';

.@{badge-prefix-cls} {
  display: inline-block;
  position: relative;
  line-height: 1;

  &-rtl {
    direction: rtl;
  }

  &-number,
  &-dot,
  &-text,
  &-custom-dot {
    position: absolute;
    z-index: 2;
    transform: translate(50%, -50%);
    transform-origin: 100% 0%;
    border-radius: @badge-size-count-height;
    box-sizing: border-box;
    text-align: center;
    top: 2px;
    right: 2px;
    overflow: hidden;
  }

  &-rtl &-number,
  &-rtl &-dot,
  &-rtl &-text,
  &-rtl &-custom-dot {
    right: unset;
  }

  &-custom-dot {
    background-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
  }

  &-number,
  &-text {
    height: @badge-size-count-height;
    min-width: @badge-size-count-height;
    line-height: @badge-size-count-height;
    font-weight: @badge-font-count-weight;
    padding: 0 @badge-padding-count-horizontal;
    font-size: @badge-font-count-size;
    color: @badge-color-count-text;
    background-color: @badge-color-count-bg;
    box-shadow: 0 0 0 2px var(~'@{arco-cssvars-prefix}-color-bg-2');
  }

  &-dot {
    width: @badge-size-dot-width;
    height: @badge-size-dot-width;
    background-color: @badge-color-count-bg;
    border-radius: @radius-circle;
    box-shadow: 0 0 0 2px var(~'@{arco-cssvars-prefix}-color-bg-2');
  }

  &-no-children &-dot,
  &-no-children &-number,
  &-no-children &-text {
    position: relative;
    display: inline-block;
    transform: none;
    top: unset;
    right: unset;
  }

  &-status-wrapper {
    display: inline-flex;
    align-items: center;
  }

  &-status-dot {
    display: inline-block;
    width: @badge-size-dot-width;
    height: @badge-size-dot-width;
    border-radius: @radius-circle;
  }

  &-status-default {
    background-color: @badge-color-dot-bg_default;
  }

  &-status-processing {
    background-color: @badge-color-dot-bg_processing;
  }

  &-status-success {
    background-color: @badge-color-dot-bg_success;
  }

  &-status-warning {
    background-color: @badge-color-dot-bg_warning;
  }

  &-status-error {
    background-color: @badge-color-dot-bg_error;
  }

  @colors: red, orangered, orange, gold, lime, green, cyan, arcoblue, purple, pinkpurple, magenta,
    gray;

  .for(@data, @i: 1) when(@i =< length(@data)) {
    @color-name: extract(@data, @i);

    @color: ~'badge-@{color-name}-color-dot-bg';

    &-color-@{color-name} {
      background-color: @@color;
    }
    .for(@data, (@i + 1));
  }

  .for(@colors);

  &-status-text {
    color: @badge-color-status-text;
    margin-left: @badge-margin-status-text-left;
    font-size: @badge-font-status-text-size;
    line-height: @line-height-base;
  }

  &-rtl &-status-text {
    margin-left: 0;
    margin-right: @badge-margin-status-text-left;
  }

  &-number-text {
    display: inline-block;
    animation: ~'@{prefix}-badge-scale' @transition-duration-5 @transition-timing-function-overshoot;
  }
}

@keyframes ~'@{prefix}-badge-scale' {
  from {
    transform: scale(0, 0);
  }

  to {
    transform: scale(1, 1);
  }
}

.badge-zoom-enter,
.badge-zoom-appear {
  // opacity: 0;
  transform-origin: center;
  transform: translate(50%, -50%) scale(0.2, 0.2);
}

.badge-zoom-enter-active,
.badge-zoom-appear-active {
  opacity: 1;
  transform-origin: center;
  transform: translate(50%, -50%) scale(1, 1);
  transition: opacity @transition-duration-3 @transition-timing-function-overshoot,
    transform @transition-duration-3 @transition-timing-function-overshoot;
}

.badge-zoom-exit {
  opacity: 1;
  transform-origin: center;
  transform: translate(50%, -50%) scale(1, 1);
}

.badge-zoom-exit-active {
  opacity: 0;
  transform-origin: center;
  transform: translate(50%, -50%) scale(0.2, 0.2);
  transition: opacity @transition-duration-3 @transition-timing-function-overshoot,
    transform @transition-duration-3 @transition-timing-function-overshoot;
}


/********** Badge end ***************/
    


/********** Breadcrumb  ***************/



@breadcrumb-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@breadcrumb-color-text_active: var(~'@{arco-cssvars-prefix}-color-text-1');
@breadcrumb-color-link-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@breadcrumb-color-separator: var(~'@{arco-cssvars-prefix}-color-text-4');
@breadcrumb-color-bg: @color-transparent;
@breadcrumb-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');

@breadcrumb-margin-separator-horizontal: @spacing-2;
@breadcrumb-margin-dropdown-icon-left: @spacing-2;
@breadcrumb-padding-text-horizontal: @spacing-2;
@breadcrumb-border-text-radius_hover: @radius-small;

@breadcrumb-size-text-height: @size-6;
@breadcrumb-size-dropdown-icon: @size-3;
@breadcrumb-size-font-size: @font-size-body-3;
@breadcrumb-font-weight_active: @font-weight-500;

@breadcrumb-color-icon: var(~'@{arco-cssvars-prefix}-color-text-3');
@breadcrumb-color-link-text_hover: @color-link-6;
@breadcrumb-color-dropdown-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@breadcrumb-color-box-shadow: @color-primary-6;


@breadcrumb-prefix-cls: ~'@{prefix}-breadcrumb';

.@{breadcrumb-prefix-cls} {
  display: inline-block;
  font-size: @breadcrumb-size-font-size;
  color: var(~'@{arco-cssvars-prefix}-color-text-2');

  &-icon {
    color: var(~'@{arco-cssvars-prefix}-color-text-2');
  }

  &-item {
    display: inline-flex;
    align-items: center;
    padding: 0 @breadcrumb-padding-text-horizontal;
    vertical-align: middle;
    line-height: @breadcrumb-size-text-height;
    color: @breadcrumb-color-text;

    > .@{prefix}-icon {
      color: @breadcrumb-color-icon;
    }

    a,
    &[href] {
      display: inline-block;
      border-radius: @breadcrumb-border-text-radius_hover;
      padding: 0 @breadcrumb-padding-text-horizontal;
      margin: 0 -@breadcrumb-padding-text-horizontal;
      text-decoration: none;
      color: @breadcrumb-color-link-text;
      background-color: @breadcrumb-color-bg;

      &:hover {
        background-color: @breadcrumb-color-bg_hover;
        color: @breadcrumb-color-link-text_hover;
      }

      &:focus-visible {
        box-shadow: 0 0 0 2px @breadcrumb-color-box-shadow;
      }
    }

    &:last-child {
      color: @breadcrumb-color-text_active;
      font-weight: @breadcrumb-font-weight_active;
    }

    &-ellipses {
      display: inline-block;
      position: relative;
      top: -3px;
      padding: 0 @breadcrumb-padding-text-horizontal;
      color: var(~'@{arco-cssvars-prefix}-color-text-2');
    }

    &-separator {
      display: inline-block;
      margin: 0 @breadcrumb-margin-separator-horizontal;
      vertical-align: middle;
      line-height: @breadcrumb-size-text-height;
      color: @breadcrumb-color-separator;
    }

    &-with-dropdown {
      cursor: pointer;
    }

    &-dropdown-icon {
      font-size: @breadcrumb-size-dropdown-icon;
      margin-left: @breadcrumb-margin-dropdown-icon-left;
      color: @breadcrumb-color-dropdown-icon;

      &-active svg {
        transform: rotate(180deg);
      }
    }
  }
}

.@{breadcrumb-prefix-cls}-rtl {
  .@{breadcrumb-prefix-cls}-item-dropdown-icon {
    margin-left: 0;
    margin-right: @breadcrumb-margin-dropdown-icon-left;
  }
}


/********** Breadcrumb end ***************/
    


/********** Button  ***************/



@btn-font-weight: @font-weight-400;
@btn-border-radius: @radius-small;
@btn-border-width: @border-1;

@btn-size-mini-height: @size-mini;
@btn-size-small-height: @size-small;
@btn-size-default-height: @size-default;
@btn-size-large-height: @size-large;

@btn-size-mini-radius: @btn-border-radius;
@btn-size-small-radius: @btn-border-radius;
@btn-size-default-radius: @btn-border-radius;
@btn-size-large-radius: @btn-border-radius;

@btn-size-mini-border-width: @btn-border-width;
@btn-size-small-border-width: @btn-border-width;
@btn-size-default-border-width: @btn-border-width;
@btn-size-large-border-width: @btn-border-width;

@btn-size-mini-icon-spacing: @spacing-2;
@btn-size-small-icon-spacing: @spacing-3;
@btn-size-default-icon-spacing: @spacing-4;
@btn-size-large-icon-spacing: @spacing-4;

@btn-size-mini-icon-vertical-align: -2px;
@btn-size-small-icon-vertical-align: -2px;
@btn-size-default-icon-vertical-align: -2px;
@btn-size-large-icon-vertical-align: -2px;

@btn-size-mini-padding-horizontal: 11px;
@btn-size-small-padding-horizontal: 15px;
@btn-size-default-padding-horizontal: 15px;
@btn-size-large-padding-horizontal: 19px;

@btn-size-mini-font-size: @font-size-body-1;
@btn-size-small-font-size: @font-size-body-3;
@btn-size-default-font-size: @font-size-body-3;
@btn-size-large-font-size: @font-size-body-3;

/***** Outline *****/
@btn-outline-color-text: @color-primary-6;
@btn-outline-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@btn-outline-color-text_hover: @color-primary-5;
@btn-outline-color-text_active: @color-primary-7;
@btn-outline-color-bg: @color-transparent;
@btn-outline-color-bg_disabled: @color-transparent;
@btn-outline-color-bg_hover: @color-transparent;
@btn-outline-color-bg_active: @color-transparent;
@btn-outline-color-border: @color-primary-6;
@btn-outline-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@btn-outline-color-border_hover: @color-primary-5;
@btn-outline-color-border_active: @color-primary-7;
// status
@btn-outline-color-text_warning: @color-warning-6;
@btn-outline-color-text_warning_disabled: var(~'@{arco-cssvars-prefix}-color-warning-light-3');
@btn-outline-color-text_warning_hover: @color-warning-5;
@btn-outline-color-text_warning_active: @color-warning-7;
@btn-outline-color-bg_warning: @color-transparent;
@btn-outline-color-bg_warning_disabled: @color-transparent;
@btn-outline-color-bg_warning_hover: @color-transparent;
@btn-outline-color-bg_warning_active: @color-transparent;
@btn-outline-color-border_warning: @color-warning-6;
@btn-outline-color-border_warning_disabled: var(~'@{arco-cssvars-prefix}-color-warning-light-3');
@btn-outline-color-border_warning_hover: @color-warning-5;
@btn-outline-color-border_warning_active: @color-warning-7;

@btn-outline-color-text_danger: @color-danger-6;
@btn-outline-color-text_danger_disabled: var(~'@{arco-cssvars-prefix}-color-danger-light-3');
@btn-outline-color-text_danger_hover: @color-danger-5;
@btn-outline-color-text_danger_active: @color-danger-7;
@btn-outline-color-bg_danger: @color-transparent;
@btn-outline-color-bg_danger_disabled: @color-transparent;
@btn-outline-color-bg_danger_hover: @color-transparent;
@btn-outline-color-bg_danger_active: @color-transparent;
@btn-outline-color-border_danger: @color-danger-6;
@btn-outline-color-border_danger_disabled: var(~'@{arco-cssvars-prefix}-color-danger-light-3');
@btn-outline-color-border_danger_hover: @color-danger-5;
@btn-outline-color-border_danger_active: @color-danger-7;

@btn-outline-color-text_success: @color-success-6;
@btn-outline-color-text_success_disabled: var(~'@{arco-cssvars-prefix}-color-success-light-3');
@btn-outline-color-text_success_hover: @color-success-5;
@btn-outline-color-text_success_active: @color-success-7;
@btn-outline-color-bg_success: @color-transparent;
@btn-outline-color-bg_success_disabled: @color-transparent;
@btn-outline-color-bg_success_hover: @color-transparent;
@btn-outline-color-bg_success_active: @color-transparent;
@btn-outline-color-border_success: @color-success-6;
@btn-outline-color-border_success_disabled: var(~'@{arco-cssvars-prefix}-color-success-light-3');
@btn-outline-color-border_success_hover: @color-success-5;
@btn-outline-color-border_success_active: @color-success-7;
// border
@btn-outline-border-style: @border-solid;

/***** Primary *****/
@btn-primary-color-text: #fff;
@btn-primary-color-text_disabled: #fff;
@btn-primary-color-text_hover: #fff;
@btn-primary-color-text_active: #fff;
@btn-primary-color-bg: @color-primary-6;
@btn-primary-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@btn-primary-color-bg_hover: @color-primary-5;
@btn-primary-color-bg_active: @color-primary-7;
@btn-primary-color-border: @color-transparent;
@btn-primary-color-border_disabled: @color-transparent;
@btn-primary-color-border_hover: @color-transparent;
@btn-primary-color-border_active: @color-transparent;
// status
@btn-primary-color-text_warning: #fff;
@btn-primary-color-text_warning_disabled: #fff;
@btn-primary-color-text_warning_hover: #fff;
@btn-primary-color-text_warning_active: #fff;
@btn-primary-color-bg_warning: @color-warning-6;
@btn-primary-color-bg_warning_disabled: var(~'@{arco-cssvars-prefix}-color-warning-light-3');
@btn-primary-color-bg_warning_hover: @color-warning-5;
@btn-primary-color-bg_warning_active: @color-warning-7;
@btn-primary-color-border_warning: @color-transparent;
@btn-primary-color-border_warning_disabled: @color-transparent;
@btn-primary-color-border_warning_hover: @color-transparent;
@btn-primary-color-border_warning_active: @color-transparent;

@btn-primary-color-text_danger: #fff;
@btn-primary-color-text_danger_disabled: #fff;
@btn-primary-color-text_danger_hover: #fff;
@btn-primary-color-text_danger_active: #fff;
@btn-primary-color-bg_danger: @color-danger-6;
@btn-primary-color-bg_danger_disabled: var(~'@{arco-cssvars-prefix}-color-danger-light-3');
@btn-primary-color-bg_danger_hover: @color-danger-5;
@btn-primary-color-bg_danger_active: @color-danger-7;
@btn-primary-color-border_danger: @color-transparent;
@btn-primary-color-border_danger_disabled: @color-transparent;
@btn-primary-color-border_danger_hover: @color-transparent;
@btn-primary-color-border_danger_active: @color-transparent;

@btn-primary-color-text_success: #fff;
@btn-primary-color-text_success_disabled: #fff;
@btn-primary-color-text_success_hover: #fff;
@btn-primary-color-text_success_active: #fff;
@btn-primary-color-bg_success: @color-success-6;
@btn-primary-color-bg_success_disabled: var(~'@{arco-cssvars-prefix}-color-success-light-3');
@btn-primary-color-bg_success_hover: @color-success-5;
@btn-primary-color-bg_success_active: @color-success-7;
@btn-primary-color-border_success: @color-transparent;
@btn-primary-color-border_success_disabled: @color-transparent;
@btn-primary-color-border_success_hover: @color-transparent;
@btn-primary-color-border_success_active: @color-transparent;
// border
@btn-primary-border-style: @border-solid;

/***** Secondary *****/
@btn-secondary-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@btn-secondary-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@btn-secondary-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
@btn-secondary-color-text_active: var(~'@{arco-cssvars-prefix}-color-text-2');
@btn-secondary-color-bg: var(~'@{arco-cssvars-prefix}-color-secondary');
@btn-secondary-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-secondary-disabled');
@btn-secondary-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-secondary-hover');
@btn-secondary-color-bg_active: var(~'@{arco-cssvars-prefix}-color-secondary-active');
@btn-secondary-color-border: @color-transparent;
@btn-secondary-color-border_disabled: @color-transparent;
@btn-secondary-color-border_hover: @color-transparent;
@btn-secondary-color-border_active: @color-transparent;
// status
@btn-secondary-color-text_warning: @color-warning-6;
@btn-secondary-color-text_warning_disabled: var(~'@{arco-cssvars-prefix}-color-warning-light-3');
@btn-secondary-color-text_warning_hover: @color-warning-6;
@btn-secondary-color-text_warning_active: @color-warning-6;
@btn-secondary-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@btn-secondary-color-bg_warning_disabled: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@btn-secondary-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@btn-secondary-color-bg_warning_active: var(~'@{arco-cssvars-prefix}-color-warning-light-3');
@btn-secondary-color-border_warning: @color-transparent;
@btn-secondary-color-border_warning_disabled: @color-transparent;
@btn-secondary-color-border_warning_hover: @color-transparent;
@btn-secondary-color-border_warning_active: @color-transparent;

@btn-secondary-color-text_danger: @color-danger-6;
@btn-secondary-color-text_danger_disabled: var(~'@{arco-cssvars-prefix}-color-danger-light-3');
@btn-secondary-color-text_danger_hover: @color-danger-6;
@btn-secondary-color-text_danger_active: @color-danger-6;
@btn-secondary-color-bg_danger: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@btn-secondary-color-bg_danger_disabled: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@btn-secondary-color-bg_danger_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@btn-secondary-color-bg_danger_active: var(~'@{arco-cssvars-prefix}-color-danger-light-3');
@btn-secondary-color-border_danger: @color-transparent;
@btn-secondary-color-border_danger_disabled: @color-transparent;
@btn-secondary-color-border_danger_hover: @color-transparent;
@btn-secondary-color-border_danger_active: @color-transparent;

@btn-secondary-color-text_success: @color-success-6;
@btn-secondary-color-text_success_disabled: var(~'@{arco-cssvars-prefix}-color-success-light-3');
@btn-secondary-color-text_success_hover: @color-success-6;
@btn-secondary-color-text_success_active: @color-success-6;
@btn-secondary-color-bg_success: var(~'@{arco-cssvars-prefix}-color-success-light-1');
@btn-secondary-color-bg_success_disabled: var(~'@{arco-cssvars-prefix}-color-success-light-1');
@btn-secondary-color-bg_success_hover: var(~'@{arco-cssvars-prefix}-color-success-light-2');
@btn-secondary-color-bg_success_active: var(~'@{arco-cssvars-prefix}-color-success-light-3');
@btn-secondary-color-border_success: @color-transparent;
@btn-secondary-color-border_success_disabled: @color-transparent;
@btn-secondary-color-border_success_hover: @color-transparent;
@btn-secondary-color-border_success_active: @color-transparent;
// border
@btn-secondary-border-style: @border-solid;

/***** Dashed *****/
@btn-dashed-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@btn-dashed-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@btn-dashed-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
@btn-dashed-color-text_active: var(~'@{arco-cssvars-prefix}-color-text-2');
@btn-dashed-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@btn-dashed-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@btn-dashed-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@btn-dashed-color-bg_active: var(~'@{arco-cssvars-prefix}-color-fill-4');
@btn-dashed-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@btn-dashed-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@btn-dashed-color-border_hover: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@btn-dashed-color-border_active: var(~'@{arco-cssvars-prefix}-color-neutral-5');
// status
@btn-dashed-color-text_warning: @color-warning-6;
@btn-dashed-color-text_warning_disabled: var(~'@{arco-cssvars-prefix}-color-warning-light-3');
@btn-dashed-color-text_warning_hover: @color-warning-6;
@btn-dashed-color-text_warning_active: @color-warning-6;
@btn-dashed-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@btn-dashed-color-bg_warning_disabled: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@btn-dashed-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@btn-dashed-color-bg_warning_active: var(~'@{arco-cssvars-prefix}-color-warning-light-3');
@btn-dashed-color-border_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@btn-dashed-color-border_warning_disabled: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@btn-dashed-color-border_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-3');
@btn-dashed-color-border_warning_active: var(~'@{arco-cssvars-prefix}-color-warning-light-4');

@btn-dashed-color-text_danger: @color-danger-6;
@btn-dashed-color-text_danger_disabled: var(~'@{arco-cssvars-prefix}-color-danger-light-3');
@btn-dashed-color-text_danger_hover: @color-danger-6;
@btn-dashed-color-text_danger_active: @color-danger-6;
@btn-dashed-color-bg_danger: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@btn-dashed-color-bg_danger_disabled: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@btn-dashed-color-bg_danger_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@btn-dashed-color-bg_danger_active: var(~'@{arco-cssvars-prefix}-color-danger-light-3');
@btn-dashed-color-border_danger: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@btn-dashed-color-border_danger_disabled: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@btn-dashed-color-border_danger_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-3');
@btn-dashed-color-border_danger_active: var(~'@{arco-cssvars-prefix}-color-danger-light-4');

@btn-dashed-color-text_success: @color-success-6;
@btn-dashed-color-text_success_disabled: var(~'@{arco-cssvars-prefix}-color-success-light-3');
@btn-dashed-color-text_success_hover: @color-success-6;
@btn-dashed-color-text_success_active: @color-success-6;
@btn-dashed-color-bg_success: var(~'@{arco-cssvars-prefix}-color-success-light-1');
@btn-dashed-color-bg_success_disabled: var(~'@{arco-cssvars-prefix}-color-success-light-1');
@btn-dashed-color-bg_success_hover: var(~'@{arco-cssvars-prefix}-color-success-light-2');
@btn-dashed-color-bg_success_active: var(~'@{arco-cssvars-prefix}-color-success-light-3');
@btn-dashed-color-border_success: var(~'@{arco-cssvars-prefix}-color-success-light-2');
@btn-dashed-color-border_success_disabled: var(~'@{arco-cssvars-prefix}-color-success-light-2');
@btn-dashed-color-border_success_hover: var(~'@{arco-cssvars-prefix}-color-success-light-3');
@btn-dashed-color-border_success_active: var(~'@{arco-cssvars-prefix}-color-success-light-4');
// border
@btn-dashed-border-style: @border-dashed;

/***** Text *****/
@btn-text-color-text: @color-primary-6;
@btn-text-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@btn-text-color-text_hover: @color-primary-6;
@btn-text-color-text_active: @color-primary-6;
@btn-text-color-bg: @color-transparent;
@btn-text-color-bg_disabled: @color-transparent;
@btn-text-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@btn-text-color-bg_active: var(~'@{arco-cssvars-prefix}-color-fill-3');
@btn-text-color-border: @color-transparent;
@btn-text-color-border_disabled: @color-transparent;
@btn-text-color-border_hover: @color-transparent;
@btn-text-color-border_active: @color-transparent;
// status
@btn-text-color-text_warning: @color-warning-6;
@btn-text-color-text_warning_disabled: var(~'@{arco-cssvars-prefix}-color-warning-light-3');
@btn-text-color-text_warning_hover: @color-warning-6;
@btn-text-color-text_warning_active: @color-warning-6;
@btn-text-color-bg_warning: @color-transparent;
@btn-text-color-bg_warning_disabled: @color-transparent;
@btn-text-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@btn-text-color-bg_warning_active: var(~'@{arco-cssvars-prefix}-color-fill-3');
@btn-text-color-border_warning: @color-transparent;
@btn-text-color-border_warning_disabled: @color-transparent;
@btn-text-color-border_warning_hover: @color-transparent;
@btn-text-color-border_warning_active: @color-transparent;

@btn-text-color-text_danger: @color-danger-6;
@btn-text-color-text_danger_disabled: var(~'@{arco-cssvars-prefix}-color-danger-light-3');
@btn-text-color-text_danger_hover: @color-danger-6;
@btn-text-color-text_danger_active: @color-danger-6;
@btn-text-color-bg_danger: @color-transparent;
@btn-text-color-bg_danger_disabled: @color-transparent;
@btn-text-color-bg_danger_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@btn-text-color-bg_danger_active: var(~'@{arco-cssvars-prefix}-color-fill-3');
@btn-text-color-border_danger: @color-transparent;
@btn-text-color-border_danger_disabled: @color-transparent;
@btn-text-color-border_danger_hover: @color-transparent;
@btn-text-color-border_danger_active: @color-transparent;

@btn-text-color-text_success: @color-success-6;
@btn-text-color-text_success_disabled: var(~'@{arco-cssvars-prefix}-color-success-light-3');
@btn-text-color-text_success_hover: @color-success-6;
@btn-text-color-text_success_active: @color-success-6;
@btn-text-color-bg_success: @color-transparent;
@btn-text-color-bg_success_disabled: @color-transparent;
@btn-text-color-bg_success_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@btn-text-color-bg_success_active: var(~'@{arco-cssvars-prefix}-color-fill-3');
@btn-text-color-border_success: @color-transparent;
@btn-text-color-border_success_disabled: @color-transparent;
@btn-text-color-border_success_hover: @color-transparent;
@btn-text-color-border_success_active: @color-transparent;
// border
@btn-text-border-style: @border-solid;

/***** focus-visible *****/
@btn-box-shadow-radius: 2px;
@btn-primary-color-box-shadow: @color-primary-3;
@btn-outline-color-box-shadow: @color-primary-3;
@btn-secondary-color-box-shadow: @color-secondary-active;
@btn-dashed-color-box-shadow: @color-secondary-active;
@btn-text-color-box-shadow: @color-secondary-active;
@btn-color-box-shadow_warning: @color-warning-3;
@btn-color-box-shadow_danger: @color-danger-3;
@btn-color-box-shadow_success: @color-success-3;


@btn-prefix-cls: ~'@{prefix}-btn';

.btn-type(@type) {
  .@{btn-prefix-cls}-@{type}:not(.@{btn-prefix-cls}-disabled) {
    background-color: ~'@{btn-@{type}-color-bg}';
    color: ~'@{btn-@{type}-color-text}';
    border: @btn-size-default-border-width ~'@{btn-@{type}-border-style}' ~'@{btn-@{type}-color-border}';

    &:not(.@{btn-prefix-cls}-loading):hover {
      border-color: ~'@{btn-@{type}-color-border_hover}';
      color: ~'@{btn-@{type}-color-text_hover}';
      background-color: ~'@{btn-@{type}-color-bg_hover}';
    }

    &:not(.@{btn-prefix-cls}-loading):active {
      border-color: ~'@{btn-@{type}-color-border_active}';
      color: ~'@{btn-@{type}-color-text_active}';
      background-color: ~'@{btn-@{type}-color-bg_active}';
    }

    &:focus-visible {
      box-shadow: 0 0 0 @btn-box-shadow-radius ~'@{btn-@{type}-color-box-shadow}';
    }
  }

  .@{btn-prefix-cls}-@{type}.@{btn-prefix-cls}-disabled {
    background-color: ~'@{btn-@{type}-color-bg_disabled}';
    color: ~'@{btn-@{type}-color-text_disabled}';
    border: @btn-size-default-border-width ~'@{btn-@{type}-border-style}' ~'@{btn-@{type}-color-border_disabled}';
    cursor: not-allowed;
  }
}

.btn-status(@type, @status) {
  .@{btn-prefix-cls}-@{type}.@{btn-prefix-cls}-status-@{status}:not(.@{btn-prefix-cls}-disabled) {
    background-color: ~'@{btn-@{type}-color-bg_@{status}}';
    color: ~'@{btn-@{type}-color-text_@{status}}';
    border-color: ~'@{btn-@{type}-color-border_@{status}}';

    &:not(.@{btn-prefix-cls}-loading):hover {
      border-color: ~'@{btn-@{type}-color-border_@{status}_hover}';
      color: ~'@{btn-@{type}-color-text_@{status}_hover}';
      background-color: ~'@{btn-@{type}-color-bg_@{status}_hover}';
    }

    &:not(.@{btn-prefix-cls}-loading):active {
      border-color: ~'@{btn-@{type}-color-border_@{status}_active}';
      color: ~'@{btn-@{type}-color-text_@{status}_active}';
      background-color: ~'@{btn-@{type}-color-bg_@{status}_active}';
    }

    &:focus-visible {
      box-shadow: 0 0 0 @btn-box-shadow-radius ~'@{btn-color-box-shadow_@{status}}';
    }
  }

  .@{btn-prefix-cls}-@{type}.@{btn-prefix-cls}-status-@{status}.@{btn-prefix-cls}-disabled {
    color: ~'@{btn-@{type}-color-text_@{status}_disabled}';
    background-color: ~'@{btn-@{type}-color-bg_@{status}_disabled}';
    border: @btn-size-default-border-width ~'@{btn-@{type}-border-style}' ~'@{btn-@{type}-color-border_@{status}_disabled}';
  }
}

.btn-size(@size) {
  .@{btn-prefix-cls}-size-@{size} {
    padding: 0 ~'@{btn-size-@{size}-padding-horizontal}';
    font-size: ~'@{btn-size-@{size}-font-size}';
    height: ~'@{btn-size-@{size}-height}';
    border-radius: ~'@{btn-size-@{size}-radius}';
    // line-height: calc(~'@{size-@{size}}' - ~'@{btn-size-@{size}-border-width}' * 2);

    > svg + span,
    > span + svg {
      margin-left: ~'@{btn-size-@{size}-icon-spacing}';
    }

    svg {
      vertical-align: ~'@{btn-size-@{size}-icon-vertical-align}';
    }

    &.@{btn-prefix-cls}-rtl {
      > svg + span,
      > span + svg {
        margin-left: 0;
        margin-right: ~'@{btn-size-@{size}-icon-spacing}';
      }
    }
  }

  @bsp: ~'btn-size-@{size}-padding-horizontal';
  @bsf: ~'btn-size-@{size}-font-size';
  @bss: ~'btn-size-@{size}-icon-spacing';

  .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-loading-fixed-width.@{btn-prefix-cls}-loading {
    padding-left: @@bsp - ((@@bsf + @@bss) / 2);
    padding-right: @@bsp - ((@@bsf + @@bss) / 2);
  }

  .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-icon-only {
    width: ~'@{size-@{size}}';
    height: ~'@{size-@{size}}';
    padding: 0;
  }

  .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-circle {
    width: ~'@{size-@{size}}';
    height: ~'@{size-@{size}}';
    padding: 0;
    text-align: center;
    border-radius: @radius-circle;
  }

  .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round {
    border-radius: calc(~'@{size-@{size}}' * 0.5);
  }

  .@{btn-prefix-cls}-group {
    .@{btn-prefix-cls}-size-@{size}:first-child {
      border-radius: ~'@{btn-size-@{size}-radius}' 0 0 ~'@{btn-size-@{size}-radius}';
    }

    .@{btn-prefix-cls}-size-@{size}:last-child {
      border-radius: 0 ~'@{btn-size-@{size}-radius}' ~'@{btn-size-@{size}-radius}' 0;
    }

    .@{btn-prefix-cls}-size-@{size}:first-child:last-child {
      border-radius: ~'@{btn-size-@{size}-radius}';
    }

    .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round:first-child {
      border-radius: calc(~'@{size-@{size}}' * 0.5) 0 0 calc(~'@{size-@{size}}' * 0.5);
    }

    .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round:last-child {
      border-radius: 0 calc(~'@{size-@{size}}' * 0.5) calc(~'@{size-@{size}}' * 0.5) 0;
    }

    .@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round:first-child:last-child {
      border-radius: calc(~'@{size-@{size}}' * 0.5);
    }

    .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-size-@{size}:first-child {
      border-radius: 0 ~'@{btn-size-@{size}-radius}' ~'@{btn-size-@{size}-radius}' 0;
    }

    .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-size-@{size}:last-child {
      border-radius: ~'@{btn-size-@{size}-radius}' 0 0 ~'@{btn-size-@{size}-radius}';
    }

    .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-size-@{size}:first-child:last-child {
      border-radius: ~'@{btn-size-@{size}-radius}';
    }

    .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round:first-child {
      border-radius: 0 calc(~'@{size-@{size}}' * 0.5) calc(~'@{size-@{size}}' * 0.5) 0;
    }

    .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round:last-child {
      border-radius: calc(~'@{size-@{size}}' * 0.5) 0 0 calc(~'@{size-@{size}}' * 0.5);
    }

    .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-size-@{size}.@{btn-prefix-cls}-shape-round:first-child:last-child {
      border-radius: calc(~'@{size-@{size}}' * 0.5);
    }
  }
}

.@{btn-prefix-cls} {
  display: inline-block;
  position: relative;
  outline: none;
  font-weight: @btn-font-weight;
  appearance: none;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all @transition-duration-1 @transition-timing-function-linear;
  box-sizing: border-box;
  line-height: @line-height-base;

  > a:only-child {
    color: currentColor;
  }

  &:active {
    transition: none;
  }

  &:empty {
    display: inline-block;
    vertical-align: bottom;
  }

  &-long {
    display: block;
    width: 100%;
  }

  // link
  &-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    &:not([href]) {
      color: var(~'@{arco-cssvars-prefix}-color-text-4');
    }

    &:hover {
      text-decoration: none;
    }
  }

  &-loading {
    cursor: default;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: -1px;
      right: -1px;
      bottom: -1px;
      left: -1px;
      z-index: 1;
      display: block;
      background: #fff;
      border-radius: inherit;
      opacity: 0.4;
      transition: opacity @transition-duration-1 @transition-timing-function-linear;
      pointer-events: none;
    }
  }

  &-loading-fixed-width {
    transition: none;
  }

  &-two-chinese-chars > *:not(svg) {
    letter-spacing: 0.3em;
    margin-right: -0.3em;
  }

  a&-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
  }
}

.btn-type(outline);
.btn-status(outline, warning);
.btn-status(outline, danger);
.btn-status(outline, success);

.btn-type(primary);
.btn-status(primary, warning);
.btn-status(primary, danger);
.btn-status(primary, success);

.btn-type(secondary);
.btn-status(secondary, warning);
.btn-status(secondary, danger);
.btn-status(secondary, success);

.btn-type(dashed);
.btn-status(dashed, warning);
.btn-status(dashed, danger);
.btn-status(dashed, success);

.btn-type(text);
.btn-status(text, warning);
.btn-status(text, danger);
.btn-status(text, success);

.btn-size(mini);
.btn-size(small);
.btn-size(default);
.btn-size(large);

.@{btn-prefix-cls}-group {
  display: inline-block;

  .@{btn-prefix-cls}-outline:not(:first-child),
  .@{btn-prefix-cls}-dashed:not(:first-child) {
    margin-left: -1px;
  }

  .@{btn-prefix-cls}-primary:not(:last-child) {
    border-right: 1px solid @btn-primary-color-bg_hover;
  }

  .@{btn-prefix-cls}-secondary:not(:last-child) {
    border-right: 1px solid @btn-secondary-color-bg_hover;
  }

  .@{btn-prefix-cls}-text:not(:last-child) {
    border-right: 1px solid @btn-text-color-border_hover;
  }

  .@{btn-prefix-cls}-status-warning:not(:last-child) {
    border-right: 1px solid @btn-primary-color-bg_warning_hover;
    &.@{btn-prefix-cls}-text {
      border-right: 1px solid @btn-text-color-bg_warning_hover;
    }
  }

  .@{btn-prefix-cls}-status-danger:not(:last-child) {
    border-right: 1px solid @btn-primary-color-bg_danger_hover;
    &.@{btn-prefix-cls}-text {
      border-right: 1px solid @btn-text-color-bg_danger_hover;
    }
  }

  .@{btn-prefix-cls}-status-success:not(:last-child) {
    border-right: 1px solid @btn-primary-color-bg_success_hover;
    &.@{btn-prefix-cls}-text {
      border-right: 1px solid @btn-text-color-bg_success_hover;
    }
  }

  .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-outline:not(:first-child),
  .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-dashed:not(:first-child) {
    margin-left: 0;
    margin-right: -1px;
  }

  .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-primary:not(:last-child) {
    border-left: 1px solid @btn-primary-color-bg_hover;
    border-right: 0;
  }

  .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-secondary:not(:last-child) {
    border-left: 1px solid @btn-secondary-color-bg_hover;
    border-right: 0;
  }

  .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-text:not(:last-child) {
    border-left: 1px solid @btn-text-color-border_hover;
    border-right: 0;
  }

  .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-status-warning:not(:last-child) {
    border-left: 1px solid @btn-primary-color-bg_warning_hover;
    border-right: 0;
    &.@{btn-prefix-cls}-text {
      border-left: 1px solid @btn-text-color-bg_warning_hover;
    }
  }

  .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-status-danger:not(:last-child) {
    border-left: 1px solid @btn-primary-color-bg_danger_hover;
    border-right: 0;
    &.@{btn-prefix-cls}-text {
      border-left: 1px solid @btn-text-color-bg_danger_hover;
    }
  }

  .@{btn-prefix-cls}-rtl.@{btn-prefix-cls}-status-success:not(:last-child) {
    border-left: 1px solid @btn-primary-color-bg_success_hover;
    border-right: 0;
    &.@{btn-prefix-cls}-text {
      border-left: 1px solid @btn-text-color-bg_success_hover;
    }
  }

  .@{btn-prefix-cls}-outline,
  .@{btn-prefix-cls}-dashed {
    &:hover,
    &:active {
      z-index: 2;
    }
  }

  .@{btn-prefix-cls}:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
}

.@{btn-prefix-cls}-rtl {
  direction: rtl;
}

@{arco-theme-tag} {
  &[arco-theme='dark'] {
    .@{btn-prefix-cls}-primary.@{btn-prefix-cls}-disabled {
      color: rgba(255, 255, 255, 30%);
    }
  }
}


/********** Button end ***************/
    


/********** Calendar  ***************/



@calendar-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

@calendar-header-padding-horizontal: 24px;
@calendar-header-padding-vertical: 24px;

@calendar-panel-date-cell-padding-vertical: 4px;
@calendar-panel-date-cell-circle-height: 24px;
@calendar-panel-year-cell-padding-vertical: 4px;
@calendar-panel-year-cell-circle-height: 24px;

@calendar-color-switch-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@calendar-color-bg-switch-icon: var(~'@{arco-cssvars-prefix}-color-bg-5');
@calendar-color-bg-switch-icon_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');

@calendar-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@calendar-color-cell-text-in-view: var(~'@{arco-cssvars-prefix}-color-text-1');
@calendar-color-cell-text-not-in-view: var(~'@{arco-cssvars-prefix}-color-text-4');
@calendar-color-bg-circle_selected: @color-primary-6;
@calendar-color-bg-cell-in-range: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@calendar-color-bg-cell-disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');
@calendar-color-text-cell-range-boundary: var(~'@{arco-cssvars-prefix}-color-white');
@calendar-color-bg-cell-range-boundary: @color-primary-6;
@calendar-color-bg-cell-hover-in-range: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@calendar-color-text-cell-hover-range-boundary: var(~'@{arco-cssvars-prefix}-color-text-1');
@calendar-color-bg-cell-hover-range-boundary: var(~'@{arco-cssvars-prefix}-color-primary-light-2');

@calendar-panel-color-text-cell_hover: @color-primary-6;
@calendar-panel-color-bg-cell_hover: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@calendar-panel-color-text-cell_selected: var(~'@{arco-cssvars-prefix}-color-white');
@calendar-panel-color-bg-cell_selected: @color-primary-6;
@calendar-panel-color-current-time-dot: @color-primary-6;

// 不放到风格配置平台
@calendar-panel-cell-boundary-border-radius: (
  (@calendar-panel-date-cell-circle-height + @calendar-panel-date-cell-padding-vertical * 2) / 2
);
@calendar-color-box-shadow: var(~'@{arco-cssvars-prefix}-color-primary-light-3');


@calendar-prefix-cls: ~'@{prefix}-calendar';

.@{calendar-prefix-cls} {
  box-sizing: border-box;
  border: 1px solid @calendar-color-border;

  &-header {
    display: flex;
    padding: @calendar-header-padding-vertical @calendar-header-padding-horizontal;

    &-left {
      display: flex;
      flex: 1;
      align-items: center;
      position: relative;
      height: 28px;
      line-height: 28px;
    }

    &-right {
      height: 28px;
      position: relative;
    }

    &-value {
      font-size: 20px;
      font-weight: @font-weight-500;
      color: var(~'@{arco-cssvars-prefix}-color-text-1');
    }

    &-icon {
      width: 28px;
      height: 28px;
      line-height: 28px;
      border-radius: 50%;
      text-align: center;
      font-size: 12px;
      transition: all @transition-duration-1 @transition-timing-function-linear;
      user-select: none;
      margin-right: 12px;
      color: @calendar-color-switch-icon;
      background-color: @calendar-color-bg-switch-icon;

      &:not(:first-child) {
        margin: 0 12px;
      }

      &:focus-visible {
        box-shadow: 0 0 0 2px @calendar-color-box-shadow;
      }
    }

    &-icon:not(&-icon-hidden) {
      cursor: pointer;

      &:hover {
        background-color: @calendar-color-bg-switch-icon_hover;
      }
    }
  }

  // 下拉类型的年选择框
  & &-header-value-year {
    width: 100px;
    margin-right: 8px;
  }

  // 下拉类型的月选择框
  & &-header-value-month {
    width: 76px;
    margin-right: 32px;
  }

  &-month {
    width: 100%;

    &-row {
      height: 100px;
      display: flex;

      .@{calendar-prefix-cls}-cell {
        flex: 1;
        border-bottom: 1px solid @calendar-color-border;
        overflow: hidden;
      }

      &:last-child .@{calendar-prefix-cls}-cell {
        border-bottom: unset;
      }
    }

    &-cell-body {
      box-sizing: border-box;
    }
  }

  &-mode-month:not(&-panel) &-cell:not(:last-child) {
    border-right: 1px solid @calendar-color-border;
  }

  &-week-list {
    display: flex;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid @calendar-color-border;

    &-item {
      padding: 20px 16px;
      text-align: left;
      color: #7d7d7f;
      flex: 1;
    }
  }

  &-cell &-date {
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;

    &-circle {
      width: 28px;
      height: 28px;
      line-height: 28px;
      border-radius: 50%;
      text-align: center;
    }
  }

  &-date-content {
    height: 70px;
    overflow-y: auto;
  }

  &-cell-today &-date-circle {
    box-sizing: border-box;
    border: 1px solid @color-primary-6;
  }

  &-date-value {
    font-size: 16px;
    font-weight: @font-weight-500;
    color: @calendar-color-cell-text-not-in-view;
  }

  &-cell-in-view &-date-value {
    color: @calendar-color-cell-text-in-view;
  }

  &-mode-month &-cell-selected &-date-circle {
    border: 1px solid @calendar-color-bg-circle_selected;
    background-color: @calendar-color-bg-circle_selected;
    color: #fff;
  }

  &-mode-year &-cell-selected &-cell-selected &-date-circle {
    border: 1px solid @calendar-color-bg-circle_selected;
    background-color: @calendar-color-bg-circle_selected;
    color: #fff;
  }

  // Mode: year
  &-mode-year:not(&-panel) {
    min-width: 820px;
  }

  &-mode-year &-header {
    border-bottom: 1px solid @calendar-color-border;
  }

  &-mode-year &-body {
    padding: 12px;
  }

  &-mode-year &-year-row {
    display: flex;
  }

  &-year-row > &-cell {
    flex: 1;
    padding: 20px 8px;

    &:not(:last-child) {
      border-right: 1px solid @calendar-color-border;
    }
  }

  &-year-row:not(:last-child) > &-cell {
    border-bottom: 1px solid @calendar-color-border;
  }

  &-month-with-days &-month-row {
    height: 26px;
  }

  &-month-with-days &-cell {
    border-bottom: 0;
  }

  &-month-with-days &-month-cell-body {
    padding: 0;
  }

  &-month-with-days &-month-title {
    padding: 10px 6px;
    font-size: 16px;
    font-weight: @font-weight-500;
    color: @calendar-color-text-title;
  }

  &-month-cell {
    font-size: 12px;
    width: 100%;
  }

  &-month-cell &-week-list {
    border-bottom: unset;
    padding: 0;
  }

  &-month-cell &-week-list-item {
    padding: 6px;
    text-align: center;
    color: #7d7d7f;
  }

  &-month-cell &-cell {
    text-align: center;
  }

  &-month-cell &-date {
    padding: 2px;

    &-value {
      font-size: 14px;
    }

    &-circle {
      display: inline-block;
      width: 22px;
      height: 22px;
      line-height: 22px;
      border-radius: 50%;
      text-align: center;
    }
  }
}

// panel
.@{calendar-prefix-cls} {
  &-panel {
    border: 1px solid @calendar-color-border;
    background-color: var(~'@{arco-cssvars-prefix}-color-bg-5');
  }

  &-panel &-header {
    padding: 8px 16px;
    border-bottom: 1px solid @calendar-color-border;

    &-value {
      font-size: 14px;
      line-height: 24px;
      flex: 1;
      text-align: center;
    }

    &-icon {
      width: 24px;
      height: 24px;
      line-height: 24px;
      margin-left: 2px;
      margin-right: 2px;
    }
  }

  &-panel &-body {
    padding: 14px 16px;
  }

  &-panel &-month-cell-body {
    padding: 0;
  }

  &-panel &-month-row {
    height: unset;
  }

  &-panel &-week-list {
    padding: 0;
    border-bottom: unset;
  }

  &-panel &-week-list-item {
    padding: 0;
    text-align: center;
    font-weight: 400;
    height: 32px;
    line-height: 32px;
  }

  &-panel &-cell,
  &-panel &-year-row &-cell {
    text-align: center;
    box-sizing: border-box;
    padding: 2px 0;
    border-bottom: 0;
    border-right: 0;
  }

  &-panel &-cell &-date {
    padding: @calendar-panel-date-cell-padding-vertical 0;
    display: flex;
    justify-content: center;

    &-value {
      font-size: 14px;
      min-width: @calendar-panel-date-cell-circle-height;
      height: @calendar-panel-date-cell-circle-height;
      line-height: @calendar-panel-date-cell-circle-height;
      cursor: pointer;
    }
  }

  &-panel&-mode-year &-cell {
    padding: 4px 0;
  }

  &-panel&-mode-year &-cell &-date {
    padding: @calendar-panel-year-cell-padding-vertical;

    &-value {
      border-radius: 12px;
      width: 100%;
    }
  }

  &-panel &-cell-selected &-date-value {
    color: @calendar-panel-color-text-cell_selected;
    background-color: @calendar-panel-color-bg-cell_selected;
    border-radius: 50%;
  }

  &-panel
    &-cell:not(&-cell-selected):not(&-cell-range-start):not(&-cell-range-end):not(&-cell-hover-range-start):not(&-cell-hover-range-end):not(&-cell-disabled):not(&-cell-week)
    &-date-value:hover {
    background-color: @calendar-panel-color-bg-cell_hover;
    border-radius: 50%;
    color: @calendar-panel-color-text-cell_hover;
  }

  &-panel&-mode-year
    &-cell:not(&-cell-selected):not(&-cell-range-start):not(&-cell-range-end):not(&-cell-hover-range-start):not(&-cell-hover-range-end):not(&-cell-disabled)
    &-date-value:hover {
    border-radius: (@calendar-panel-year-cell-circle-height / 2);
  }

  &-panel &-cell-today {
    position: relative;

    &::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -2px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: @calendar-panel-color-current-time-dot;
    }
  }

  &-cell-in-range &-date {
    background-color: @calendar-color-bg-cell-in-range;
  }

  &-cell-range-start &-date {
    border-radius: @calendar-panel-cell-boundary-border-radius 0 0
      @calendar-panel-cell-boundary-border-radius;
  }

  &-cell-range-end &-date {
    border-radius: 0 @calendar-panel-cell-boundary-border-radius
      @calendar-panel-cell-boundary-border-radius 0;
  }

  &-cell-in-range-near-hover &-date {
    border-radius: 0;
  }

  &-cell-range-start &-date-value,
  &-cell-range-end &-date-value {
    background-color: @calendar-color-bg-cell-range-boundary;
    border-radius: 50%;
    color: @calendar-color-text-cell-range-boundary;
  }

  &-cell-hover-in-range &-date {
    background-color: @calendar-color-bg-cell-hover-in-range;
  }

  &-cell-hover-range-start &-date {
    border-radius: @calendar-panel-cell-boundary-border-radius 0 0
      @calendar-panel-cell-boundary-border-radius;
  }

  &-cell-hover-range-end &-date {
    border-radius: 0 @calendar-panel-cell-boundary-border-radius
      @calendar-panel-cell-boundary-border-radius 0;
  }

  &-cell-hover-range-start &-date-value,
  &-cell-hover-range-end &-date-value {
    background-color: @calendar-color-bg-cell-hover-range-boundary;
    border-radius: 50%;
    color: @calendar-color-text-cell-hover-range-boundary;
  }

  &-panel &-cell-disabled {
    > .@{calendar-prefix-cls}-date {
      background-color: @calendar-color-bg-cell-disabled;
      cursor: not-allowed;

      > .@{calendar-prefix-cls}-date-value {
        color: @calendar-color-cell-text-not-in-view;
        background-color: @calendar-color-bg-cell-disabled;
        cursor: not-allowed;
      }
    }
  }

  &-panel &-footer-btn-wrapper {
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-top: 1px solid @calendar-color-border;
    cursor: pointer;
    color: var(~'@{arco-cssvars-prefix}-color-text-1');
  }

  &-rtl {
    direction: rtl;
  }

  &-rtl &-header-icon {
    margin-right: 0;
    margin-left: 12px;
    transform: scaleX(-1);
  }

  // rtl
  &-rtl &-week-list-item {
    text-align: right;
  }

  &-rtl&-mode-month:not(&-panel) &-cell:not(:last-child) {
    border-left: 1px solid @calendar-color-border;
    border-right: 0;
  }

  &-rtl &-header-value-year {
    margin-left: 8px;
    margin-right: 0;
  }

  &-rtl &-header-value-month {
    margin-right: 0;
    margin-left: 32px;
  }
}


/********** Calendar end ***************/
    


/********** Card  ***************/



@card-size-small-height-title: @size-10;
@card-size-small-font-size-title: @font-size-title-1;
@card-size-small-font-size-title-extra: @font-size-body-3;
@card-size-small-font-size: @font-size-body-3;
@card-size-small-padding-horizontal-title: @spacing-7;
@card-size-small-padding-horizontal-body: @spacing-7;
@card-size-small-padding-vertical-body: @spacing-6;

@card-size-default-height-title: 46px;
@card-size-default-font-size-title: @font-size-title-1;
@card-size-default-font-size-title-extra: @font-size-body-3;
@card-size-default-font-size: @font-size-body-3;
@card-size-default-padding-horizontal-title: @spacing-7;
@card-size-default-padding-horizontal-body: @spacing-7;
@card-size-default-padding-vertical-body: @spacing-7;

@card-line-height: @line-height-base;
@card-font-weight-title: @font-weight-500;
@card-margin-top-meta-footer: @spacing-8;
@card-margin-top-meta-description: @spacing-2;
@card-margin-right-action-item: @spacing-6;

@card-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@card-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@card-color-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@card-color-title-extra: @color-primary-6;
@card-color-body: var(~'@{arco-cssvars-prefix}-color-text-2');
@card-color-action: var(~'@{arco-cssvars-prefix}-color-text-2');
@card-color-action_hover: @color-primary-6;
@card-color-box-shadow: rgb(var(~'@{arco-cssvars-prefix}-gray-2'));
@card-color-box-shadow_dark: rgba(var(~'@{arco-cssvars-prefix}-gray-1'), 40%);

@card-border-width: @border-1;
@card-border-width-title-bottom: @border-1;
@card-border-radius: @radius-small;
@card-border-radius-no-border: @radius-none;

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


@card-prefix-cls: ~'@{prefix}-card';

.@{card-prefix-cls} {
  position: relative;
  background: @card-color-bg;
  transition: box-shadow @transition-duration-2 @transition-timing-function-linear;
  border-radius: @card-border-radius-no-border;

  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    box-sizing: border-box;
    border-bottom: @card-border-width-title-bottom solid @card-color-border;
    overflow: hidden;

    &-no-title::before {
      content: ' ';
      display: block;
    }

    &-title {
      flex: 1;
      font-weight: @card-font-weight-title;
      color: @card-color-title;
      .text-ellipsis();
    }

    &-extra {
      color: @card-color-title-extra;
      .text-ellipsis();
    }
  }

  &-body {
    color: @card-color-body;
  }

  &-cover {
    overflow: hidden;

    > * {
      display: block;
      width: 100%;
    }
  }

  &-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: @card-margin-top-meta-footer;

    &::before {
      content: '';
      visibility: hidden;
    }

    &-right {
      display: flex;
      align-items: center;
    }

    &-item {
      display: flex;
      align-items: center;
      justify-content: center;
      color: @card-color-action;
      cursor: pointer;
      .text-ellipsis();

      transition: color @transition-duration-2 @transition-timing-function-linear;

      &:hover {
        color: @card-color-action_hover;
      }

      &:not(:last-child) {
        margin-right: @card-margin-right-action-item;
      }
    }
  }

  &-meta {
    &-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;

      &:last-child {
        margin-top: @card-margin-top-meta-footer;
      }

      &-only-actions::before {
        content: '';
        visibility: hidden;
      }

      .@{card-prefix-cls}-actions {
        margin-top: 0;
      }
    }

    &-title {
      font-weight: @card-font-weight-title;
      color: @card-color-title;
      .text-ellipsis();
    }

    &-description:not(:first-child) {
      margin-top: @card-margin-top-meta-description;
    }
  }

  &-grid {
    position: relative;
    box-sizing: border-box;
    width: 33.33%;
    box-shadow: @card-border-width 0 0 0 @card-color-border,
      0 @card-border-width 0 0 @card-color-border,
      @card-border-width @card-border-width 0 0 @card-color-border,
      @card-border-width 0 0 0 @card-color-border inset,
      0 @card-border-width 0 0 @card-color-border inset;

    &::before {
      content: '';
      pointer-events: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      transition: box-shadow @transition-duration-2 @transition-timing-function-linear;
    }

    &-hoverable:hover {
      z-index: 1;

      &::before {
        box-shadow: 0 4px 10px @card-color-box-shadow;
      }
    }

    // 避免 Card 的背景色遮住由 box-shadow 实现的 Grid 的边框
    .@{card-prefix-cls} {
      background: none;
      box-shadow: none;
    }
  }

  // 以下为特殊状态的补充
  &-contain-grid:not(&-loading) > &-body {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -@card-border-width;
    padding: 0;
  }

  &-hoverable:hover {
    box-shadow: 0 4px 10px @card-color-box-shadow;
  }

  &-bordered {
    border: @card-border-width solid @card-color-border;
    border-radius: @card-border-radius;

    .@{card-prefix-cls}-cover {
      border-radius: @card-border-radius @card-border-radius 0 0;
    }
  }

  &-loading &-body {
    overflow: hidden;
    text-align: center;
  }

  // 不同尺寸
  .size(@size) {
    &-size-@{size} {
      font-size: ~'@{card-size-@{size}-font-size}';

      .@{card-prefix-cls}-header {
        height: ~'@{card-size-@{size}-height-title}';
        padding-left: ~'@{card-size-@{size}-padding-horizontal-title}';
        padding-right: ~'@{card-size-@{size}-padding-horizontal-title}';
      }

      .@{card-prefix-cls}-header-title,
      .@{card-prefix-cls}-meta-title {
        font-size: ~'@{card-size-@{size}-font-size-title}';
      }

      .@{card-prefix-cls}-header-extra {
        font-size: ~'@{card-size-@{size}-font-size-title-extra}';
      }

      .@{card-prefix-cls}-body {
        padding: ~'@{card-size-@{size}-padding-vertical-body}' ~'@{card-size-@{size}-padding-horizontal-body}';
      }
    }
  }

  .size(default);
  .size(small);

  &-rtl &-actions-item:not(:last-child) {
    margin-left: @card-margin-right-action-item;
    margin-right: 0;
  }
}

// dark mode

@{arco-theme-tag} {
  &[arco-theme='dark'] {
    .@{card-prefix-cls}-grid-hoverable:hover::before,
    .@{card-prefix-cls}-hoverable:hover {
      box-shadow: 0 4px 10px @card-color-box-shadow_dark;
    }
  }
}


/********** Card end ***************/
    


/********** Carousel  ***************/



@carousel-content-border-radius: 0;

// arrow
@carousel-arrow-position: @spacing-6;
@carousel-arrow-size: @size-6;
@carousel-arrow-font-size: @font-size-body-3;
@carousel-arrow-color-icon: var(~'@{arco-cssvars-prefix}-color-white');
@carousel-arrow-color-bg: rgba(@color-white, 0.3);
@carousel-arrow-color-bg_hover: rgba(@color-white, 0.5);
@carousel-arrow-color-box-shadow: var(~'@{arco-cssvars-prefix}-color-primary-light-3');

// indicator
@carousel-indicator-size-wrapper: @size-12;
@carousel-indicator-color-bg-wrapper: rgba(0, 0, 0, 0.15);

@carousel-indicator-dot-size: 6px;
@carousel-indicator-line-size-width: @size-3;
@carousel-indicator-line-size-height: @size-1;
@carousel-indicator-slider-size-width: @size-12;
@carousel-indicator-slider-size-height: @size-1;

@carousel-indicator-position: @spacing-6;
@carousel-indicator-gap: @spacing-4;
@carousel-indicator-border-radius: @radius-medium;
@carousel-indicator-color_default: rgba(@color-white, 0.3);
@carousel-indicator-color_active: var(~'@{arco-cssvars-prefix}-color-white');

@carousel-indicator-outer-border-radius: 20px;
@carousel-indicator-outer-padding: @spacing-2;
@carousel-indicator-outer-color_default: rgba(var(~'@{arco-cssvars-prefix}-gray-4'), 0.5);
@carousel-indicator-outer-color_active: var(~'@{arco-cssvars-prefix}-color-fill-4');
@carousel-indicator-outer-color-bg: @color-transparent;

@keyframes ~'@{prefix}-carousel-slide-x-in' {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes ~'@{prefix}-carousel-slide-x-out' {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes ~'@{prefix}-carousel-slide-x-in-reverse' {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes ~'@{prefix}-carousel-slide-x-out-reverse' {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes ~'@{prefix}-carousel-slide-y-in' {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes ~'@{prefix}-carousel-slide-y-out' {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes ~'@{prefix}-carousel-slide-y-in-reverse' {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes ~'@{prefix}-carousel-slide-y-out-reverse' {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

// 卡片翻页动画

@keyframes ~'@{prefix}-carousel-card-bottom-to-middle' {
  from {
    opacity: 0;
    transform: translateX(0%) translateZ(-400px);
  }

  to {
    opacity: 0.4;
    transform: translateX(0%) translateZ(-200px);
  }
}

@keyframes ~'@{prefix}-carousel-card-middle-to-bottom' {
  from {
    opacity: 0.4;
    transform: translateX(-100%) translateZ(-200px);
  }

  to {
    opacity: 0;
    transform: translateX(-100%) translateZ(-400px);
  }
}

@keyframes ~'@{prefix}-carousel-card-middle-to-bottom-rtl' {
  from {
    opacity: 0.4;
    transform: translateX(100%) translateZ(-200px);
  }

  to {
    opacity: 0;
    transform: translateX(100%) translateZ(-400px);
  }
}

@keyframes ~'@{prefix}-carousel-card-top-to-middle' {
  from {
    opacity: 1;
    transform: translateX(-50%) translateZ(0);
  }

  to {
    opacity: 0.4;
    transform: translateX(-100%) translateZ(-200px);
  }
}

@keyframes ~'@{prefix}-carousel-card-top-to-middle-rtl' {
  from {
    opacity: 1;
    transform: translateX(50%) translateZ(0);
  }

  to {
    opacity: 0.4;
    transform: translateX(100%) translateZ(-200px);
  }
}

@keyframes ~'@{prefix}-carousel-card-middle-to-top' {
  from {
    opacity: 0.4;
    transform: translateX(0) translateZ(-200px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateZ(0);
  }
}

@keyframes ~'@{prefix}-carousel-card-middle-to-top-rtl' {
  from {
    opacity: 0.4;
    transform: translateX(0) translateZ(-200px);
  }

  to {
    opacity: 1;
    transform: translateX(50%) translateZ(0);
  }
}

@keyframes ~'@{prefix}-carousel-card-bottom-to-middle-reverse' {
  from {
    opacity: 0;
    transform: translateX(-100%) translateZ(-400px);
  }

  to {
    opacity: 0.4;
    transform: translateX(-100%) translateZ(-200px);
  }
}

@keyframes ~'@{prefix}-carousel-card-bottom-to-middle-reverse-rtl' {
  from {
    opacity: 0;
    transform: translateX(100%) translateZ(-400px);
  }

  to {
    opacity: 0.4;
    transform: translateX(100%) translateZ(-200px);
  }
}

@keyframes ~'@{prefix}-carousel-card-middle-to-bottom-reverse' {
  from {
    opacity: 0.4;
    transform: translateX(0%) translateZ(-200px);
  }

  to {
    opacity: 0;
    transform: translateX(0%) translateZ(-400px);
  }
}

@keyframes ~'@{prefix}-carousel-card-top-to-middle-reverse' {
  from {
    opacity: 1;
    transform: translateX(-50%) translateZ(0);
  }

  to {
    opacity: 0.4;
    transform: translateX(0%) translateZ(-200px);
  }
}

@keyframes ~'@{prefix}-carousel-card-top-to-middle-reverse-rtl' {
  from {
    opacity: 1;
    transform: translateX(50%) translateZ(0);
  }

  to {
    opacity: 0.4;
    transform: translateX(0%) translateZ(-200px);
  }
}

@keyframes ~'@{prefix}-carousel-card-middle-to-top-reverse' {
  from {
    opacity: 0.4;
    transform: translateX(-100%) translateZ(-200px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateZ(0);
  }
}

@keyframes ~'@{prefix}-carousel-card-middle-to-top-reverse-rtl' {
  from {
    opacity: 0.4;
    transform: translateX(100%) translateZ(-200px);
  }

  to {
    opacity: 1;
    transform: translateX(50%) translateZ(0);
  }
}

@keyframes ~'@{prefix}-carousel-card-right-to-middle' {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(0%) translateZ(-400px);
  }

  to {
    opacity: 0.4;
    transform: translateX(-50%) translateY(0%) translateZ(-200px);
  }
}

@keyframes ~'@{prefix}-carousel-card-middle-to-right' {
  from {
    opacity: 0.4;
    transform: translateX(-50%) translateY(-100%) translateZ(-200px);
  }

  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%) translateZ(-400px);
  }
}

@keyframes ~'@{prefix}-carousel-card-left-to-middle' {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) translateZ(0);
  }

  to {
    opacity: 0.4;
    transform: translateX(-50%) translateY(-100%) translateZ(-200px);
  }
}

@keyframes ~'@{prefix}-carousel-card-middle-to-left' {
  from {
    opacity: 0.4;
    transform: translateX(-50%) translateY(0) translateZ(-200px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) translateZ(0);
  }
}

@keyframes ~'@{prefix}-carousel-card-right-to-middle-reverse' {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-100%) translateZ(-400px);
  }

  to {
    opacity: 0.4;
    transform: translateX(-50%) translateY(-100%) translateZ(-200px);
  }
}

@keyframes ~'@{prefix}-carousel-card-middle-to-right-reverse' {
  from {
    opacity: 0.4;
    transform: translateX(-50%) translateY(0%) translateZ(-200px);
  }

  to {
    opacity: 0;
    transform: translateX(-50%) translateY(0%) translateZ(-400px);
  }
}

@keyframes ~'@{prefix}-carousel-card-left-to-middle-reverse' {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) translateZ(0);
  }

  to {
    opacity: 0.4;
    transform: translateX(-50%) translateY(0%) translateZ(-200px);
  }
}

@keyframes ~'@{prefix}-carousel-card-middle-to-left-reverse' {
  from {
    opacity: 0.4;
    transform: translateX(-50%) translateY(-100%) translateZ(-200px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) translateZ(0);
  }
}


@carousel-prefix-cls: ~'@{prefix}-carousel';

.@{carousel-prefix-cls} {
  position: relative;

  &-indicator-position-outer {
    margin-bottom: @carousel-indicator-position * 2 + @carousel-indicator-dot-size;
  }

  &-slide,
  &-card,
  &-fade {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    > * {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }

  &-item-current {
    z-index: 1;
    position: relative;
  }

  &-slide {
    > *:not(.@{carousel-prefix-cls}-item-current) {
      visibility: hidden;
    }

    .item-position(@direction) {
      .@{carousel-prefix-cls}-item-slide-out {
        display: block;
        animation: ~'@{prefix}-carousel-slide-@{direction}-out';
      }

      .@{carousel-prefix-cls}-item-slide-in {
        display: block;
        animation: ~'@{prefix}-carousel-slide-@{direction}-in';
      }

      &.@{carousel-prefix-cls}-negative {
        .@{carousel-prefix-cls}-item-slide-out {
          animation: ~'@{prefix}-carousel-slide-@{direction}-out-reverse';
        }

        .@{carousel-prefix-cls}-item-slide-in {
          animation: ~'@{prefix}-carousel-slide-@{direction}-in-reverse';
        }
      }
    }

    &.@{carousel-prefix-cls}-horizontal {
      .item-position(x);
    }

    &.@{carousel-prefix-cls}-vertical {
      .item-position(y);
    }
  }

  &-card {
    // 通过改变 perspective 来取得不同景深关系
    perspective: 800px;

    &.@{carousel-prefix-cls}-horizontal {
      > * {
        left: 50%;
        opacity: 0;
        transform: translateX(-50%) translateZ(-400px);
        animation: ~'@{prefix}-carousel-card-middle-to-bottom';

        .@{carousel-prefix-cls}-rtl & {
          left: unset;
          right: 50%;
          animation: ~'@{prefix}-carousel-card-middle-to-bottom-rtl';
        }
      }

      // prev 右边对齐容器中线
      .@{carousel-prefix-cls}-item-prev {
        opacity: 0.4;
        transform: translateX(-100%) translateZ(-200px);
        animation: ~'@{prefix}-carousel-card-top-to-middle';

        .@{carousel-prefix-cls}-rtl & {
          transform: translateX(100%) translateZ(-200px);
          animation: ~'@{prefix}-carousel-card-top-to-middle-rtl';
        }
      }

      // next 左边对齐容器中线
      .@{carousel-prefix-cls}-item-next {
        opacity: 0.4;
        transform: translateX(0%) translateZ(-200px);
        animation: ~'@{prefix}-carousel-card-bottom-to-middle';
      }

      // current 居中
      .@{carousel-prefix-cls}-item-current {
        opacity: 1;
        transform: translateX(-50%) translateZ(0);
        animation: ~'@{prefix}-carousel-card-middle-to-top';

        .@{carousel-prefix-cls}-rtl & {
          transform: translateX(50%) translateZ(0);
          animation: ~'@{prefix}-carousel-card-middle-to-top-rtl';
        }
      }

      &.@{carousel-prefix-cls}-negative {
        > * {
          animation: ~'@{prefix}-carousel-card-middle-to-bottom-reverse';
        }

        // prev 右边对齐容器中线
        .@{carousel-prefix-cls}-item-prev {
          animation: ~'@{prefix}-carousel-card-bottom-to-middle-reverse';

          .@{carousel-prefix-cls}-rtl & {
            animation: ~'@{prefix}-carousel-card-bottom-to-middle-reverse-rtl';
          }
        }

        // next 左边对齐容器中线
        .@{carousel-prefix-cls}-item-next {
          animation: ~'@{prefix}-carousel-card-top-to-middle-reverse';

          .@{carousel-prefix-cls}-rtl & {
            animation: ~'@{prefix}-carousel-card-top-to-middle-reverse-rtl';
          }
        }

        // current 居中
        .@{carousel-prefix-cls}-item-current {
          animation: ~'@{prefix}-carousel-card-middle-to-top-reverse';

          .@{carousel-prefix-cls}-rtl & {
            animation: ~'@{prefix}-carousel-card-middle-to-top-reverse-rtl';
          }
        }
      }
    }

    &.@{carousel-prefix-cls}-vertical {
      > * {
        top: 50%;
        left: 50%;
        opacity: 0;
        transform: translateX(-50%) translateY(-50%) translateZ(-400px);
        animation: ~'@{prefix}-carousel-card-middle-to-right';
        display: flex;
        justify-content: center;
      }

      // prev 右边对齐容器中线
      .@{carousel-prefix-cls}-item-prev {
        opacity: 0.4;
        transform: translateX(-50%) translateY(-100%) translateZ(-200px);
        animation: ~'@{prefix}-carousel-card-left-to-middle';
      }

      // next 左边对齐容器中线
      .@{carousel-prefix-cls}-item-next {
        opacity: 0.4;
        transform: translateX(-50%) translateY(0%) translateZ(-200px);
        animation: ~'@{prefix}-carousel-card-right-to-middle';
      }

      // current 居中
      .@{carousel-prefix-cls}-item-current {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) translateZ(0);
        animation: ~'@{prefix}-carousel-card-middle-to-left';
      }
    }

    &.@{carousel-prefix-cls}-negative {
      > * {
        animation: ~'@{prefix}-carousel-card-middle-to-right-reverse';
      }

      // prev 右边对齐容器中线
      .@{carousel-prefix-cls}-item-prev {
        animation: ~'@{prefix}-carousel-card-right-to-middle-reverse';
      }

      // next 左边对齐容器中线
      .@{carousel-prefix-cls}-item-next {
        animation: ~'@{prefix}-carousel-card-left-to-middle-reverse';
      }

      // current 居中
      .@{carousel-prefix-cls}-item-current {
        animation: ~'@{prefix}-carousel-card-middle-to-left-reverse';
      }
    }
  }

  &-fade {
    > * {
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
    }

    .@{carousel-prefix-cls}-item-current {
      opacity: 1;
    }
  }

  // 指示器样式
  &-indicator {
    display: flex;
    position: absolute;
    margin: 0;
    padding: 0;

    &-wrapper {
      position: absolute;
      z-index: 2;

      &-top {
        left: 0;
        right: 0;
        top: 0;
        height: @carousel-indicator-size-wrapper;
        background: linear-gradient(
          180deg,
          @carousel-indicator-color-bg-wrapper 0%,
          rgba(0, 0, 0, 0%) 87%
        );
      }

      &-bottom {
        left: 0;
        right: 0;
        bottom: 0;
        height: @carousel-indicator-size-wrapper;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0%) 13%,
          @carousel-indicator-color-bg-wrapper 100%
        );
      }

      &-left {
        left: 0;
        top: 0;
        width: @carousel-indicator-size-wrapper;
        height: 100%;
        background: linear-gradient(
          90deg,
          @carousel-indicator-color-bg-wrapper 0%,
          rgba(0, 0, 0, 0%) 87%
        );
      }

      &-right {
        right: 0;
        top: 0;
        width: @carousel-indicator-size-wrapper;
        height: 100%;
        background: linear-gradient(
          90deg,
          rgba(0, 0, 0, 0%) 13%,
          @carousel-indicator-color-bg-wrapper 100%
        );
      }

      &-outer {
        left: 0;
        right: 0;
        background: none;
      }

      &-outer-right {
        right: 0;
        top: 0;
        width: @size-5;
        height: 100%;
      }
    }

    &-bottom {
      bottom: @carousel-indicator-position;
      left: 50%;
      transform: translateX(-50%);
    }

    &-top {
      top: @carousel-indicator-position;
      left: 50%;
      transform: translateX(-50%);
    }

    &-left {
      left: @carousel-indicator-position;
      top: 50%;
      transform: translate(-50%, -50%) rotate(90deg);
    }

    &-right {
      right: @carousel-indicator-position;
      top: 50%;
      transform: translate(50%, -50%) rotate(90deg);
    }

    // 位于外部的指示器样式
    &-outer {
      left: 50%;
      transform: translateX(-50%);
      padding: @carousel-indicator-outer-padding;
      border-radius: @carousel-indicator-outer-border-radius;
      background-color: @carousel-indicator-outer-color-bg;

      &.@{carousel-prefix-cls}-indicator-dot {
        bottom: -(@carousel-indicator-position + @carousel-indicator-dot-size + $padding);
      }

      &.@{carousel-prefix-cls}-indicator-line {
        bottom: -(@carousel-indicator-position + @carousel-indicator-line-size-height + $padding);
      }

      &.@{carousel-prefix-cls}-indicator-slider {
        padding: 0;
        bottom: -(@carousel-indicator-position + @carousel-indicator-slider-size-height + $padding);
        background-color: @carousel-indicator-outer-color_default;
      }

      .@{carousel-prefix-cls}-indicator-item {
        background-color: @carousel-indicator-outer-color_default;

        &:hover,
        &-active {
          background-color: @carousel-indicator-outer-color_active;
        }
      }
    }

    &-outer-right {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(90deg);
      padding: @carousel-indicator-outer-padding;
      border-radius: @carousel-indicator-outer-border-radius;
      background-color: @carousel-indicator-outer-color-bg;

      &.@{carousel-prefix-cls}-indicator-slider {
        padding: 0;
        background-color: @carousel-indicator-outer-color_default;
      }

      .@{carousel-prefix-cls}-indicator-item {
        background-color: @carousel-indicator-outer-color_default;

        &:hover,
        &-active {
          background-color: @carousel-indicator-outer-color_active;
        }
      }
    }

    // 图标样式
    &-item {
      display: inline-block;
      border-radius: @carousel-indicator-border-radius;
      background-color: @carousel-indicator-color_default;
      cursor: pointer;

      &:hover,
      &-active {
        background-color: @carousel-indicator-color_active;
      }
    }

    &-dot {
      .@{carousel-prefix-cls}-indicator-item {
        width: @carousel-indicator-dot-size;
        height: $width;
        border-radius: 50%;

        &:not(:last-child) {
          margin-right: @carousel-indicator-gap;
        }
      }
    }

    &-line {
      .@{carousel-prefix-cls}-indicator-item {
        width: @carousel-indicator-line-size-width;
        height: @carousel-indicator-line-size-height;

        &:not(:last-child) {
          margin-right: @carousel-indicator-gap;
        }
      }
    }

    &-slider {
      width: @carousel-indicator-slider-size-width;
      height: @carousel-indicator-slider-size-height;
      border-radius: @carousel-indicator-border-radius;
      background-color: @carousel-indicator-color_default;
      cursor: pointer;

      .@{carousel-prefix-cls}-indicator-item {
        position: absolute;
        top: 0;
        height: 100%;
        transition: left 0.3s;
      }
    }
  }

  &-arrow {
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: @carousel-arrow-size;
      height: @carousel-arrow-size;
      border-radius: 50%;
      color: @carousel-arrow-color-icon;
      background-color: @carousel-arrow-color-bg;
      cursor: pointer;
      z-index: 2;
      user-select: none;

      &:focus-visible {
        box-shadow: 0 0 0 2px @carousel-arrow-color-box-shadow;
      }

      > svg {
        color: @carousel-arrow-color-icon;
        font-size: @carousel-arrow-font-size;
      }

      &:hover {
        background-color: @carousel-arrow-color-bg_hover;
      }
    }

    &-left {
      left: @carousel-arrow-position;
      top: 50%;
      transform: translateY(-50%);
    }

    &-right {
      top: 50%;
      transform: translateY(-50%);
      right: @carousel-arrow-position;
    }

    &-top {
      left: 50%;
      transform: translateX(-50%);
      top: @carousel-arrow-position;
    }

    &-bottom {
      left: 50%;
      transform: translateX(-50%);
      bottom: @carousel-arrow-position;
    }
  }

  &-arrow-hover div {
    opacity: 0;
    transition: all 0.3s;
  }

  &:hover {
    .@{carousel-prefix-cls}-arrow-hover div {
      opacity: 1;
    }
  }

  &-rtl {
    direction: rtl;
  }

  &-rtl &-indicator-dot &-indicator-item:not(:last-child) {
    margin-left: @carousel-indicator-gap;
    margin-right: 0;
  }

  &-rtl &-indicator-line &-indicator-item:not(:last-child) {
    margin-left: @carousel-indicator-gap;
    margin-right: 0;
  }
}

@{arco-theme-tag} {
  &[arco-theme='dark'] {
    .@{carousel-prefix-cls}-arrow > div {
      background-color: rgba(var(~'@{arco-cssvars-prefix}-gray-1'), 0.3);

      &:hover {
        background-color: rgba(var(~'@{arco-cssvars-prefix}-gray-1'), 0.5);
      }
    }

    .@{carousel-prefix-cls}-indicator-item,
    .@{carousel-prefix-cls}-indicator-slider {
      background-color: rgba(var(~'@{arco-cssvars-prefix}-gray-1'), 0.3);
    }

    .@{carousel-prefix-cls}-indicator-item-active,
    .@{carousel-prefix-cls}-indicator-item:hover {
      background-color: @carousel-indicator-color_active;
    }

    .@{carousel-prefix-cls}-indicator-outer.@{carousel-prefix-cls}-indicator-slider {
      background-color: @carousel-indicator-outer-color_default;
    }

    .@{carousel-prefix-cls}-indicator-outer .@{carousel-prefix-cls}-indicator-item:hover,
    .@{carousel-prefix-cls}-indicator-outer .@{carousel-prefix-cls}-indicator-item-active {
      background-color: @carousel-indicator-outer-color_active;
    }
  }
}


/********** Carousel end ***************/
    


/********** Cascader  ***************/



@cascader-size-item-height: @size-9;
@cascader-size-item-width: 120px;
@cascader-font-item-size: @font-size-body-3;
@cascader-margin-item-icon-left: @spacing-6;

@cascader-color-item-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@cascader-color-item-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@cascader-padding-item-left: @spacing-6;
@cascader-padding-item-right: @spacing-5;
@cascader-size-item-icon: @size-3;

@cascader-color-item-text_hover: @cascader-color-item-text;
@cascader-color-item-text_active: @cascader-color-item-text;
@cascader-color-item-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@cascader-color-item-text_disabled_active: var(~'@{arco-cssvars-prefix}-color-text-4');

@cascader-font-item-weight_active: @font-weight-500;
@cascader-color-item-bg_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
@cascader-color-item-bg_hover: @cascader-color-item-bg_active;
@cascader-color-item-bg_disabled: @color-transparent;
@cascader-color-item-bg_disabled_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
@cascader-color-checkbox-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@cascader-margin-checkbox-right: @spacing-4;

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}




/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/


/**********************************************
 * type: single / multi
 * size: mini / small / default / large
 **********************************************/
@select-size-mini-height: @size-mini;
@select-size-small-height: @size-small;
@select-size-default-height: @size-default;
@select-size-large-height: @size-large;

@select-size-mini-font-size: @font-size-body-1;
@select-size-small-font-size: @font-size-body-3;
@select-size-default-font-size: @font-size-body-3;
@select-size-large-font-size: @font-size-body-3;

@select-signal-size-mini-padding: @spacing-4;
@select-signal-size-small-padding: @spacing-6;
@select-signal-size-default-padding: @spacing-6;
@select-signal-size-large-padding: @spacing-7;

@select-multi-padding: @spacing-2;
@select-size-icon: @size-3;
@select-size-icon-bg: @size-4;

/**********************************************
 * border
 **********************************************/
@select-border-width: @border-1;
@select-border-radius: @radius-small;

/************************************************
 * status: default / disabled _ (hover / focus)
 ************************************************/
// text color
@select-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@select-color-text_focused: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-color-placeholder_default: var(~'@{arco-cssvars-prefix}-color-text-3');
@select-color-placeholder_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@select-color-placeholder_focused: var(~'@{arco-cssvars-prefix}-color-text-3');

// icon color
@select-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-2');
@select-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@select-color-icon_focused: var(~'@{arco-cssvars-prefix}-color-text-2');
@select-color-icon-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// bg color with hover & focus
@select-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
@select-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@select-color-bg_default_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@select-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@select-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@select-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@select-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@select-color-bg_disabled_hover: @select-color-bg_disabled;

// border color with hover & focus
@select-color-border_default: @color-transparent;
@select-color-border_default_hover: @color-transparent;
@select-color-border_default_focus: @color-primary-6;
@select-color-border_error: @color-transparent;
@select-color-border_error_hover: @color-transparent;
@select-color-border_error_focus: @color-danger-6;
@select-color-border_disabled: @color-transparent;
@select-color-border_disabled_hover: @select-color-border_disabled;
// shadow
@select-shadow-distance_default_focus: @shadow-distance-none;
@select-shadow-distance_error_focus: @shadow-distance-none;
@select-color-shadow_default_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@select-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');

/**********************************************
 * Popup Box
 **********************************************/
@select-popup-max-height: @size-50;
@select-popup-border-radius: @radius-medium;
@select-popup-padding-vertical: @spacing-2;
@select-popup-padding-horizontal: @spacing-none;
@select-popup-font-size: @font-size-body-3;
@select-popup-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@select-popup-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
@select-popup-box-shadow: @shadow2-down;

/**********************************************
 * Popup Options
 * status: default / disabled / selected / hover
 **********************************************/
@select-popup-option-height: @size-9;
@select-popup-option-font-weight_selected: @font-weight-500;
@select-signal-popup-option-padding-horizontal: @spacing-6;
@select-multi-popup-option-padding-horizontal: @spacing-2;
@select-popup-option-border-radius: @border-radius-none;

@select-popup-option-color-bg_default: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@select-popup-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@select-popup-option-color-bg_selected: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@select-popup-option-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-popup');

@select-popup-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@select-popup-option-color-hightlight-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-font-hightlight-weight: @font-weight-500;

// option group title
@select-popup-group-title-height: @size-5;
@select-popup-group-title-padding-horizontal: @spacing-6;
@select-popup-group-title-padding-top: @spacing-4;
@select-popup-group-title-font-size: @font-size-body-1;
@select-popup-group-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');

// addon
@select-addon-padding-horizontal: @spacing-6;
@select-color-addon-bg: @select-color-bg_default;
@select-color-addon-border: var(~'@{arco-cssvars-prefix}-color-border-2');
@select-color-addon-border_default: @color-transparent;
@select-border-addon-separator-width: @border-1;
@select-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// warning
@select-color-bg_warning_focus: @input-color-bg_warning_focus;
@select-color-bg_warning: @input-color-bg_warning;
@select-color-bg_warning_hover: @input-color-bg_warning_hover;
@select-color-border_warning: @input-color-border_warning;
@select-color-border_warning_hover: @input-color-border_warning_hover;
@select-color-border_warning_focus: @input-color-border_warning_focus;
@select-color-shadow_warning_focus: @input-color-shadow_warning_focus;
@select-shadow-distance_warning_focus: @select-shadow-distance_error_focus;




/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/


/**********************************************
 * size: mini / small / default / large
 **********************************************/
@input-tag-size-mini-height: @size-mini;
@input-tag-size-small-height: @size-small;
@input-tag-size-default-height: @size-default;
@input-tag-size-large-height: @size-large;

@input-tag-size-mini-tag-height: @size-5;
@input-tag-size-small-tag-height: @size-5;
@input-tag-size-default-tag-height: @size-6;
@input-tag-size-large-tag-height: @size-7;

@input-tag-size-mini-font-size: @font-size-body-1;
@input-tag-size-small-font-size: @font-size-body-3;
@input-tag-size-default-font-size: @font-size-body-3;
@input-tag-size-large-font-size: @font-size-title-1;

@input-tag-size-mini-padding_no_tag: @spacing-4;
@input-tag-size-small-padding_no_tag: @spacing-6;
@input-tag-size-default-padding_no_tag: @spacing-6;
@input-tag-size-large-padding_no_tag: @spacing-7;

/****************************************************
 * status: default / error / disabled _ (hover / focus)
 ****************************************************/
// text color
@input-tag-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-text_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// icon color
@input-tag-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-tag-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-tag-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// border color with focus & hover
@input-tag-color-border_default: @color-transparent;
@input-tag-color-border_default_hover: @color-transparent;
@input-tag-color-border_default_focus: @color-primary-6;
@input-tag-color-border_error: @color-transparent;
@input-tag-color-border_error_hover: @color-transparent;
@input-tag-color-border_error_focus: @color-danger-6;
@input-tag-color-border_disabled: @color-transparent;
@input-tag-color-border_disabled_hover: @input-tag-color-border_disabled;
@input-tag-color-border_disabled_focus: @input-tag-color-border_disabled;

// bg color with focus & hover
@input-tag-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-color-bg_default_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-color-bg_error: @color-danger-1;
@input-tag-color-bg_error_hover: @color-danger-2;
@input-tag-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-color-bg_disabled_hover: @input-tag-color-bg_disabled;

@input-tag-color-shadow_default_focus: @color-primary-2;
@input-tag-color-shadow_error_focus: @color-danger-2;
@input-tag-size-shadow_error_focus: @shadow-distance-none;
@input-tag-size-shadow_default_focus: @shadow-distance-none;

// input box
@input-tag-tag-margin-right: @spacing-2;
@input-tag-tag-margin-vertical: @spacing-1;
@input-tag-padding-horizontal: @spacing-2;
@input-tag-border-radius: @radius-small;
@input-tag-border-width: @border-1;
@input-tag-size-icon-clear: @size-3;
@input-tag-size-icon-clear_hover: @size-5;

// tags
@input-tag-tag-font-size: @font-size-body-1;
@input-tag-tag-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-tag-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-tag-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-tag-color-border_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-remove-icon-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-remove-icon-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-3');

// warning
@input-tag-color-text_warning: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-border_warning: @input-color-border_warning;
@input-tag-color-border_warning_hover: @input-color-border_warning_hover;
@input-tag-color-border_warning_focus: @input-color-border_warning_focus;
@input-tag-color-bg_warning: @input-color-bg_warning;
@input-tag-color-bg_warning_hover: @input-color-bg_warning_hover;
@input-tag-color-bg_warning_focus: @input-color-bg_warning_focus;
@input-tag-color-shadow_warning_focus: @input-color-shadow_warning_focus;
@input-tag-size-shadow_warning_focus: @input-size-shadow_warning_focus;

// addon
@input-tag-addon-padding-horizontal: @spacing-6;
@input-tag-color-addon-bg: @input-tag-color-bg_default;
@input-tag-color-addon-border: var(~'@{arco-cssvars-prefix}-color-border-2');
@input-tag-color-addon-border_default: @color-transparent;
@input-tag-border-addon-separator-width: @border-1;
@input-tag-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');


@input-tag-prefix-cls: ~'@{prefix}-input-tag';

.input-tag-input-element-padding(@paddingLeft) {
  .@{input-tag-prefix-cls}-has-placeholder {
    input,
    .@{input-tag-prefix-cls}-input-mirror {
      box-sizing: border-box;
      padding-left: @paddingLeft;
    }
  }
}

.input-tag-input-element-padding-rtl(@paddingRight) {
  .@{input-tag-prefix-cls}-has-placeholder {
    input,
    .@{input-tag-prefix-cls}-input-mirror {
      padding-left: 0;
      padding-right: @paddingRight;
    }
  }
}


// used by form
.color(@prefixCls, @status) {
  @suffix: if(@status = default, ~'', ~'-@{status}');

  .@{prefixCls}@{suffix} {
    .@{prefixCls}-view {
      & when (@status = default) , (@status = disabled) {
        color: ~'@{select-color-text_@{status}}';
      }

      background-color: ~'@{select-color-bg_@{status}}';
      border: 1px solid ~'@{select-color-border_@{status}}';
    }

    &:hover {
      .@{prefixCls}-view {
        background-color: ~'@{select-color-bg_@{status}_hover}';
        border-color: ~'@{select-color-border_@{status}_hover}';
      }
    }

    &.@{prefixCls}-focused when not (@status = disabled) {
      .@{prefixCls}-view {
        color: @select-color-text_focused;
        background-color: ~'@{select-color-bg_@{status}_focus}';
        border-color: ~'@{select-color-border_@{status}_focus}';
        box-shadow: 0 0 0 ~'@{select-shadow-distance_@{status}_focus}' ~'@{select-color-shadow_@{status}_focus}';
      }
    }

    .@{prefixCls}-suffix-icon,
    .@{prefixCls}-loading-icon,
    .@{prefixCls}-search-icon,
    .@{prefixCls}-clear-icon,
    .@{prefixCls}-arrow-icon,
    .@{prefixCls}-expand-icon {
      & when (@status = default) , (@status = disabled) {
        color: ~'@{select-color-icon_@{status}}';
      }
    }
  }

  .@{prefixCls}-no-border {
    .@{prefixCls}-view {
      border: none !important;
      background: none !important;
    }
  }
}

.select-view(@prefixCls) {
  @tail-icon-position-right: 10px;

  .size(@size) {
    @ref-font-size: ~'select-size-@{size}-font-size';
    @ref-height: ~'select-size-@{size}-height';
    @ref-padding: ~'select-signal-size-@{size}-padding';

    @font-size: @@ref-font-size;
    @height: @@ref-height;
    @padding: @@ref-padding - @select-border-width;
    @multi-padding: @select-multi-padding - @select-border-width;

    .@{prefixCls} {
      &-size-@{size}&-multiple {
        .@{prefixCls}-view {
          height: auto;
          font-size: @font-size;
          padding: 0 @multi-padding;
          line-height: 0;
        }

        .input-tag-input-element-padding(@padding - @multi-padding);

        .@{prefixCls}-suffix {
          padding-right: @padding - @multi-padding;
        }

        input {
          font-size: @font-size;
        }
      }

      &-size-@{size}&-single {
        .@{prefixCls}-view {
          height: @height;
          line-height: $height - @select-border-width * 2;
          font-size: @font-size;
          padding: 0 @padding;
        }

        input {
          font-size: @font-size;
        }
      }

      &-size-@{size}&-multiple {
        .@{prefixCls}-view-with-prefix {
          padding-left: @padding;
        }
      }
    }
  }

  .color(@prefixCls, default);
  .color(@prefixCls, error);
  .color(@prefixCls, warning);
  .color(@prefixCls, disabled);

  .size(mini);
  .size(small);
  .size(default);
  .size(large);

  .@{prefixCls} {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    cursor: pointer;

    &-view {
      display: flex;
      position: relative;
      box-sizing: border-box;
      width: 100%;
      border-radius: @select-border-radius;
      outline: none;
      user-select: none;
      text-align: left;
      transition: all @transition-duration-1 @transition-timing-function-linear, padding 0s linear;

      input {
        color: inherit;
        cursor: inherit;

        &::placeholder {
          color: @select-color-placeholder_default;
        }

        // since Chrome 116 <input disabled /> won't trigger onClick callback
        // remove all events of disabled <input /> to make sure Trigger works correctly
        &[disabled] {
          pointer-events: none;
        }
      }
    }

    .hide-input-element() {
      // 需要在隐藏 input 的同时保证其能被 Tab 键聚焦
      // 故不要用 display: none / visibility: hidden / width: 0
      // width 设置为 0，会导致在火狐浏览器下触发 onFocus 之后不能立刻触发 onClick
      // https://github.com/arco-design/arco-design/issues/1232
      opacity: 0;
      position: absolute;
      // 避免绝对定位的元素位于所有同级节点的最上层，遮挡其他元素的鼠标操作（例如被 Tooltip 包裹的 value 文本）
      // 不要使用 pointer-events: none，会导致火狐浏览器下下拉弹窗需要点击两次才可弹出
      // https://github.com/arco-design/arco-design/issues/2127
      z-index: -1;
    }

    &-multiple,
    &-show-search {
      cursor: text;
    }

    &-disabled {
      cursor: not-allowed;

      .@{prefixCls}-view input::placeholder {
        color: @select-color-placeholder_disabled;
      }
    }

    &-single &-view {
      // Keep forward compatibility
      // Do NOT move this section under &-selector
      &-input {
        box-sizing: border-box;
        width: 100%;
        padding: 0;
        border: none;
        outline: none;
        background: transparent;
        .text-ellipsis();
      }

      &-selector {
        position: relative;
        display: inline-flex;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;

        // Keep forward compatibility
        // Do NOT move this section out of &-selector
        .@{prefixCls}-view-input {
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1;
        }

        .@{prefixCls}-view-value-mirror {
          opacity: 0;
        }
      }

      &-value,
      &-value-mirror {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        .text-ellipsis();

        // Do NOT remove this, it may cause baseline-changing of select-view
        &::after {
          content: '.';
          font-size: 0;
          line-height: 0;
          visibility: hidden;
        }
      }

      .@{prefixCls}-hidden {
        .hide-input-element();
      }
    }

    &-multiple {
      vertical-align: top;

      .@{prefixCls}-view {
        padding: 0 @select-multi-padding;
        line-height: 0;
      }

      .@{prefixCls}-view-with-prefix {
        padding-left: @select-signal-size-default-padding;
      }

      .@{prefix}-input-tag {
        flex: 1;
        padding: 0;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        overflow: hidden;
      }

      .@{prefix}-tag {
        max-width: 100%;
      }

      // 多选的空白输入框在已存在选择项并且未聚焦时隐藏，避免导致不必要的换行
      &:not(.@{prefixCls}-focused) {
        .@{prefix}-input-tag input:not(:first-child)[value=''] {
          .hide-input-element();
        }
      }
    }

    &-prefix {
      display: flex;
      align-items: center;
      margin-right: 12px;
      white-space: nowrap;
      color: @select-color-icon_default;
    }

    &-suffix {
      display: flex;
      align-items: center;
      margin-left: 4px;
    }

    &-suffix-icon,
    &-search-icon,
    &-loading-icon,
    &-expand-icon,
    &-clear-icon {
      font-size: @select-size-icon;
      transition: all @transition-duration-1 @transition-timing-function-linear;
    }

    &-arrow-icon {
      font-size: @select-size-icon;
    }

    &-open &-arrow-icon svg {
      transform: rotateZ(180deg);
    }

    & &-clear-icon {
      display: none;
      cursor: pointer;

      > svg {
        position: relative;
        transition: all @transition-duration-1 @transition-timing-function-linear;
      }
    }

    &:hover &-clear-icon {
      display: block;

      & ~ * {
        display: none;
      }
    }

    &-wrapper {
      display: inline-flex;
      align-items: stretch;
      width: 100%;

      .@{prefixCls} {
        min-width: 0; // 避免 .arco-select 宽度超出 .arco-select-wrapper
      }

      .@{prefixCls}:not(.@{prefixCls}-focused) {
        &:not(:first-child) .@{prefixCls}-view {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }

        &:not(:last-child) .@{prefixCls}-view {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }

    // &-addafter,
    &-addbefore {
      display: flex;
      align-items: center;
      padding: 0 @select-addon-padding-horizontal;
      color: @select-color-addon-text;
      background-color: @select-color-addon-bg;
      white-space: nowrap;
      border: 1px solid @select-color-addon-border_default;
    }

    &-addbefore {
      border-right: @select-border-addon-separator-width solid @select-color-addon-border;
      border-top-left-radius: @select-border-radius;
      border-bottom-left-radius: @select-border-radius;
    }

    // &-addafter {
    //   border-left: @select-border-addon-separator-width solid @select-color-addon-border;
    //   border-top-right-radius: @select-border-radius;
    //   border-bottom-right-radius: @select-border-radius;
    // }
  }
}

.select-view-rtl(@prefixCls, @prefixClsRtl) {
  .size(@size) {
    @ref-padding: ~'select-signal-size-@{size}-padding';
    @padding: @@ref-padding - @select-border-width;
    @multi-padding: @select-multi-padding - @select-border-width;

    .@{prefixClsRtl}.@{prefixCls}-size-@{size}.@{prefixCls}-multiple {
      .@{prefixCls}-view-with-prefix {
        padding-left: 0;
        padding-right: @padding;
      }

      .@{prefixCls}-suffix {
        padding-right: 0;
        padding-left: @padding - @multi-padding;
      }

      .input-tag-input-element-padding-rtl(@padding - @multi-padding);
    }
  }

  .size(mini);
  .size(small);
  .size(default);
  .size(large);

  .@{prefixCls}-wrapper-rtl .@{prefixCls}-addbefore {
    border-right: unset;
    border-left: @select-border-addon-separator-width solid @select-color-addon-border;
  }

  .@{prefixClsRtl} {
    .@{prefixCls}-view {
      text-align: right;
    }

    .@{prefixCls}-multiple {
      .@{prefixCls}-view-with-prefix {
        padding-left: 0;
        padding-right: @select-signal-size-default-padding;
      }
    }

    .@{prefixCls}-prefix {
      margin-right: 0;
      margin-left: 12px;
    }

    .@{prefixCls}-suffix {
      margin-left: 0;
      margin-right: 4px;
    }
  }
}


@cascader-prefix-cls: ~'@{prefix}-cascader';
@cascader-prefix-cls-rtl: ~'@{cascader-prefix-cls}-rtl';

.select-view(@cascader-prefix-cls);
.select-view-rtl(@cascader-prefix-cls, @cascader-prefix-cls-rtl);

.@{cascader-prefix-cls} {
  &-popup {
    top: 4px;
    box-sizing: border-box;
    border: 1px solid @select-popup-color-border;
    border-radius: @select-popup-border-radius;
    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');
    box-shadow: @select-popup-box-shadow;
    overflow: hidden;
  }

  &-popup-trigger-hover {
    .@{cascader-prefix-cls}-list-item {
      transition: font-weight 0s;
    }
  }

  &-popup &-popup-inner {
    width: 100%;
    white-space: nowrap;
    list-style: none;
    height: @select-popup-max-height;
  }

  &-highlight {
    font-weight: @font-weight-500;
  }

  &-list-column {
    position: relative;
    vertical-align: top;
    display: inline-block;
    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');
    height: 100%;

    &-virtual {
      width: @cascader-size-item-width;
    }

    &:not(:last-of-type) {
      border-right: 1px solid @select-popup-color-border;
    }
  }

  &-list-wrapper {
    position: relative;
    white-space: nowrap;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    padding: @select-popup-padding-vertical 0;
    flex-direction: column;

    &-with-footer {
      padding-bottom: 0;
    }
  }

  &-list-empty {
    height: 100%;
    display: flex;
    align-items: center;
  }

  &-list {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    overflow-y: auto;
    flex: 1;

    &-item,
    &-search-item {
      position: relative;
      height: @cascader-size-item-height;
      line-height: @cascader-size-item-height;
      min-width: 100px;
      font-size: @cascader-font-item-size;
      color: @cascader-color-item-text;
      box-sizing: border-box;
      display: flex;
      cursor: pointer;
      background-color: transparent;

      &-label {
        flex-grow: 1;
        padding-left: @cascader-padding-item-left;
        padding-right: @cascader-padding-item-right + @cascader-size-item-icon +
          @cascader-margin-item-icon-left;
      }

      .@{prefix}-icon-right,
      .@{prefix}-icon-check {
        position: absolute;
        color: @cascader-color-item-icon;
        top: 50%;
        font-size: @cascader-size-item-icon;
        transform: translateY(-50%);
        right: @cascader-padding-item-right;
      }

      .@{prefix}-icon-check {
        color: @color-primary-6;
      }

      .@{prefix}-icon-loading {
        position: absolute;
        margin-top: -(@cascader-size-item-icon / 2);
        top: 50%;
        font-size: @cascader-size-item-icon;
        right: @cascader-padding-item-right;
        color: @color-primary-6;
      }
    }

    &-item:hover,
    &-search-item-hover {
      color: @cascader-color-item-text_hover;
      background-color: @cascader-color-item-bg_hover;

      .@{prefix}-checkbox input {
        // 避免选中checkbox时，select-view 的焦点被抢占
        display: none;
      }

      .@{prefix}-checkbox:not(.@{prefix}-checkbox-disabled):not(.@{prefix}-checkbox-checked):hover
        .@{prefix}-checkbox-icon-hover::before {
        background-color: @cascader-color-checkbox-bg_hover;
      }
    }

    &-item,
    &-search-item {
      &-disabled,
      &-disabled:hover {
        cursor: not-allowed;
        background-color: @cascader-color-item-bg_disabled;
        color: @cascader-color-item-text_disabled;

        .@{prefix}-icon-right {
          color: inherit;
        }

        .@{prefix}-icon-check {
          color: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
        }
      }
    }

    &-item {
      &-active {
        transition: all @transition-duration-2 @transition-timing-function-linear;
        background-color: @cascader-color-item-bg_active;
        color: @cascader-color-item-text_active;
        font-weight: @cascader-font-item-weight_active;

        &:hover {
          background-color: @cascader-color-item-bg_active;
          font-weight: @cascader-font-item-weight_active;
          color: @cascader-color-item-text_active;
        }
      }

      &-active&-disabled,
      &-active&-disabled:hover {
        background-color: @cascader-color-item-bg_disabled_active;
        font-weight: @cascader-font-item-weight_active;
        color: @cascader-color-item-text_disabled_active;
      }
    }

    &-multiple {
      .@{cascader-prefix-cls}-list-item-label {
        padding-left: 0;
      }

      .@{cascader-prefix-cls}-list-item,
      .@{cascader-prefix-cls}-list-search-item {
        padding-left: @cascader-padding-item-left;

        .@{prefix}-checkbox {
          padding-left: 0;
          margin-right: @cascader-margin-checkbox-right;
        }
      }
    }
  }

  &-list-search&-list-multiple {
    .@{cascader-prefix-cls}-list-item-label {
      padding-right: @cascader-padding-item-left;
    }
  }

  &-list-footer {
    height: @cascader-size-item-height;
    line-height: @cascader-size-item-height;
    padding-left: @cascader-padding-item-left;
    border-top: 1px solid @select-popup-color-border;
    box-sizing: border-box;
  }
}

.cascaderSlide-enter-active,
.cascaderSlide-appear-active {
  transition: margin @transition-duration-3 @transition-timing-function-standard;
}

.@{cascader-prefix-cls}-list-column-rtl {
  direction: rtl;

  &:not(:last-of-type) {
    border-left: 1px solid @select-popup-color-border;
    border-right: none;
  }
}

.@{cascader-prefix-cls}-list-rtl {
  .@{cascader-prefix-cls}-list {
    &-item,
    &-search-item {
      &-label {
        padding-left: @cascader-padding-item-right + @cascader-size-item-icon +
          @cascader-margin-item-icon-left;
        padding-right: @cascader-padding-item-left;
      }

      .@{prefix}-icon-left,
      .@{prefix}-icon-check {
        position: absolute;
        color: @cascader-color-item-icon;
        top: 50%;
        font-size: @cascader-size-item-icon;
        transform: translateY(-50%);
        right: initial;
        left: @cascader-padding-item-right;
      }
    }

    &-footer {
      padding-left: 0;
      padding-right: @cascader-padding-item-left;
    }
  }

  &.@{cascader-prefix-cls}-multiple {
    .@{cascader-prefix-cls}-list-item-label {
      padding-right: 0;
    }

    .@{cascader-prefix-cls}-list-item,
    .@{cascader-prefix-cls}-list-search-item {
      padding-right: @cascader-padding-item-left;

      .@{prefix}-checkbox {
        padding-right: 0;
        margin-left: @cascader-margin-checkbox-right;
      }
    }

    &.@{cascader-prefix-cls}-list-search {
      .@{cascader-prefix-cls}-list-item-label {
        padding-left: @cascader-padding-item-left;
        padding-right: 0;
      }
    }
  }
}



/********** Cascader end ***************/
    


/********** Checkbox  ***************/



@checkbox-prefix-cls: ~'@{prefix}-checkbox';

@checkbox-mask-border-width: @border-2;
@checkbox-mask-border-style: @border-solid;
@checkbox-mask-border-radius: @radius-small;

@checkbox-mask-height: 14px;
@checkbox-mask-bg-height: @size-6;
@checkbox-mask-bg-color-bg: @icon-hover-color-bg;

@checkbox-mask-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@checkbox-mask-color-bg_checked: @color-primary-6;
@checkbox-mask-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@checkbox-mask-color-bg_checked_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');

@checkbox-mask-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
@checkbox-mask-color-border_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');
@checkbox-mask-color-border_checked: @color-transparent;
@checkbox-mask-color-border_checked_disabled: @color-transparent;
@checkbox-mask-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');

@checkbox-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@checkbox-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@checkbox-group-spacing: @spacing-7;
@checkbox-text-mask-spacing: @spacing-4;
@checkbox-text-font-size: @font-size-body-3;

@checkbox-group-size-line-height_vertical: @size-8;
@checkbox-size-check-icon: @size-2;
@checkbox-color-check-icon: var(~'@{arco-cssvars-prefix}-color-white');
@checkbox-color-check-icon_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@checkbox-color-indeterminate-icon-width: 6px;
@checkbox-color-indeterminate-icon-height: 2px;
@checkbox-color-indeterminate-icon: var(~'@{arco-cssvars-prefix}-color-white');

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.icon-hover(@checkbox-prefix-cls, @checkbox-mask-height, @checkbox-mask-bg-height);

.@{checkbox-prefix-cls} {
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  font-size: @checkbox-text-font-size;
  padding-left: (@checkbox-mask-bg-height / 2) - (@checkbox-mask-height / 2);
  line-height: unset;
  position: relative;

  > input[type='checkbox'] {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 0;
    height: 0;

    &:focus-visible + .@{checkbox-prefix-cls}-icon-hover::before {
      background-color: @checkbox-mask-bg-color-bg;
      opacity: 1;
    }
  }

  &:hover {
    .@{checkbox-prefix-cls}-icon-hover::before {
      background-color: @checkbox-mask-bg-color-bg;
    }
  }

  &-text {
    color: @checkbox-color-text;
    margin-left: @checkbox-text-mask-spacing;
  }

  &-mask-wrapper {
    vertical-align: middle;
    top: -0.09em;
    position: relative;
    line-height: 1;
  }

  &-mask {
    position: relative;
    box-sizing: border-box;
    width: @checkbox-mask-height;
    height: @checkbox-mask-height;
    border: @checkbox-mask-border-width @checkbox-mask-border-style @checkbox-mask-color-border;
    border-radius: @checkbox-mask-border-radius;
    background-color: @checkbox-mask-color-bg;
    user-select: none;

    // 半选
    &::after {
      content: '';
      display: block;
      height: @checkbox-color-indeterminate-icon-height;
      width: @checkbox-color-indeterminate-icon-width;
      background: @checkbox-color-indeterminate-icon;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%) scale(0);
      position: absolute;
      border-radius: 0.5px;
    }

    &-icon {
      position: relative;
      height: 100%;
      transform: scale(0);
      color: @checkbox-color-check-icon;
      transform-origin: center 75%;
      margin: 0 auto;
      display: block;
      width: @checkbox-size-check-icon;
    }
  }

  &:hover &-mask {
    border-color: @checkbox-mask-color-border_hover;
    transition: border-color @transition-duration-1 @transition-timing-function-linear,
      transform @transition-duration-3 @transition-timing-function-overshoot;
  }

  &-checked:hover &-mask,
  &-indeterminate:hover &-mask {
    transition: transform @transition-duration-3 @transition-timing-function-overshoot;
  }

  &-checked &-mask {
    border-color: @checkbox-mask-color-border_checked;
    background-color: @checkbox-mask-color-bg_checked;

    &-icon {
      transform: scale(1);
      transition: transform @transition-duration-3 @transition-timing-function-overshoot;
    }
  }

  &-indeterminate &-mask {
    border-color: @checkbox-mask-color-border_checked;
    background-color: @checkbox-mask-color-bg_checked;

    &-icon {
      transform: scale(0);
    }

    &::after {
      transform: translateX(-50%) translateY(-50%) scale(1);
      transition: transform @transition-duration-3 @transition-timing-function-overshoot;
    }
  }

  &&-disabled {
    cursor: not-allowed;

    .@{checkbox-prefix-cls}-icon-hover {
      cursor: not-allowed;
    }

    &:hover .@{checkbox-prefix-cls}-mask {
      border-color: @checkbox-mask-color-border_disabled;
    }
  }

  &-checked:hover &-mask,
  &-indeterminate:hover &-mask {
    border-color: @checkbox-mask-color-border_checked;
  }

  &-disabled &-mask {
    border-color: @checkbox-mask-color-border_disabled;
    background-color: @checkbox-mask-color-bg_disabled;
  }

  &-disabled&-checked &-mask,
  &-disabled&-checked:hover &-mask,
  &-disabled&-indeterminate &-mask,
  &-disabled&-indeterminate:hover &-mask {
    border-color: @checkbox-mask-color-border_checked_disabled;
    background-color: @checkbox-mask-color-bg_checked_disabled;
  }

  &-disabled:hover,
  &-checked:hover,
  &-indeterminate:hover {
    .@{checkbox-prefix-cls}-mask-wrapper::before {
      background-color: @color-transparent;
    }
  }

  &-disabled &-text {
    color: @checkbox-color-text_disabled;
  }

  &-disabled &-mask-icon {
    color: @checkbox-color-check-icon_disabled;
  }
}

// checkbox group
.@{checkbox-prefix-cls}-group {
  display: inline-block;

  .@{checkbox-prefix-cls} {
    margin-right: @checkbox-group-spacing;
  }
}

// vertical direction

.@{checkbox-prefix-cls}-group-direction-vertical {
  .@{checkbox-prefix-cls} {
    display: block;
    margin-right: 0;
    line-height: @checkbox-group-size-line-height_vertical;
  }
}

.@{checkbox-prefix-cls}-rtl {
  direction: rtl;
  padding-left: 0;
  padding-right: (@checkbox-mask-bg-height / 2) - (@checkbox-mask-height / 2);

  .@{checkbox-prefix-cls}-text {
    margin-left: 0;
    margin-right: @checkbox-text-mask-spacing;
  }
}

.@{checkbox-prefix-cls}-group-rtl {
  .@{checkbox-prefix-cls} {
    margin-right: 0;
    margin-left: @checkbox-group-spacing;
  }
}


/********** Checkbox end ***************/
    


/********** Collapse  ***************/



@collapse-border-width: @border-1;
@collapse-border-radius: @radius-medium;
@collapse-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@collapse-line-height: 1.5715;

@collapse-title-line-height: 24px;
@collapse-title-border-width: @border-1;
@collapse-title-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@collapse-title-font-size: @font-size-body-3;
@collapse-title-padding-horizontal: 13px;
@collapse-title-padding-vertical: @spacing-4;
@collapse-title-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@collapse-title-color-bg_active: var(~'@{arco-cssvars-prefix}-color-bg-2');
@collapse-title-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-2');
@collapse-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@collapse-title-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@collapse-title-font-weight_active: @font-weight-500;

@collapse-content-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@collapse-content-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-1');
@collapse-content-font-size: @font-size-body-3;
@collapse-content-padding-vertical: @spacing-4;
@collapse-content-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-1');

@collapse-expand-icon-size: 14px;
@collapse-expand-icon-size-bg: @size-4;
@collapse-expand-icon-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@collapse-expand-icon-spacing-text: 5px;
@collapse-color-expand-icon: var(~'@{arco-cssvars-prefix}-color-neutral-7');

@collapse-item-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@collapse-item-border-width: @border-1;
@collapse-color-box-shadow: var(~'@{arco-cssvars-prefix}-color-primary-light-3');

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


@collapse-prefix-cls: ~'@{prefix}-collapse';

.icon-hover(
  ~'@{collapse-prefix-cls}-item',
  @collapse-expand-icon-size,
  @collapse-expand-icon-size-bg
);

.icon-hover-bg(~'@{collapse-prefix-cls}-item', @collapse-expand-icon-color-bg);

.@{collapse-prefix-cls} {
  overflow: hidden;
  border-radius: @collapse-border-radius;
  border: @collapse-border-width solid @collapse-color-border;
  line-height: @collapse-line-height;

  &-rtl {
    direction: rtl;
  }

  &-item {
    border-bottom: @collapse-item-border-width solid @collapse-item-color-border;
    box-sizing: border-box;

    &-active {
      > .@{collapse-prefix-cls}-item-header {
        background-color: @collapse-title-color-bg_active;
        border-color: @collapse-title-color-border;
        transition: border-color 0s ease 0s;

        .@{collapse-prefix-cls}-item-header-title {
          font-weight: @collapse-title-font-weight_active;
        }
      }
    }

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      box-sizing: border-box;
      padding-top: @collapse-title-padding-vertical;
      padding-bottom: $padding-top;
      background-color: @collapse-title-color-bg;
      border-bottom: @collapse-title-border-width solid @color-transparent;
      color: @collapse-title-color-text;
      cursor: pointer;
      font-size: @collapse-title-font-size;
      overflow: hidden;
      line-height: @collapse-title-line-height;
      // 保证在收起动画完成时才隐藏边框
      transition: border-color 0s ease 0.19s;

      &[data-active-region='header'] {
        cursor: unset;

        > .@{collapse-prefix-cls}-item-header-title,
        > .@{prefix}-icon-hover {
          cursor: pointer;
        }
      }

      &[data-active-region='icon'] {
        cursor: unset;

        > .@{prefix}-icon-hover {
          cursor: pointer;
        }
      }

      &:focus-visible {
        box-shadow: inset 0 0 0 2px @collapse-color-box-shadow;
      }

      &-left {
        padding-left: @collapse-title-padding-horizontal + @collapse-expand-icon-size +
          @collapse-expand-icon-spacing-text;
        padding-right: @collapse-title-padding-horizontal;
      }

      &-right {
        padding-left: @collapse-title-padding-horizontal;
        padding-right: @collapse-title-padding-horizontal + @collapse-expand-icon-size +
          @collapse-expand-icon-spacing-text;
      }

      &-disabled {
        cursor: not-allowed;
        color: @collapse-title-color-text_disabled;
        background-color: @collapse-title-color-bg_disabled;

        .@{collapse-prefix-cls}-item-header-icon {
          color: @collapse-title-color-text_disabled;
        }
      }

      &-title {
        display: inline;
      }

      &-extra {
        float: right;
      }
    }

    // expand icon style
    & &-icon-hover {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: @collapse-title-padding-horizontal;
      text-align: center;

      &-right {
        right: @collapse-title-padding-horizontal;
        left: unset;

        > .@{collapse-prefix-cls}-item-header-icon-down {
          transform: rotate(-90deg);
        }
      }
    }

    &-header-icon {
      color: @collapse-color-expand-icon;
      font-size: @collapse-expand-icon-size;
      transition: transform @transition-duration-2 @transition-timing-function-standard;
      vertical-align: middle;
      position: relative;
      display: block;

      &-down {
        transform: rotate(90deg);
      }
    }

    &-content {
      display: none;
      overflow: hidden;
      position: relative;
      color: @collapse-content-color-text;
      background-color: @collapse-content-color-bg;
      font-size: @collapse-content-font-size;
      // 展开动画时间使用 0.2s
      transition: height @transition-duration-2 @transition-timing-function-standard;

      &-expanded {
        display: block;
        height: auto;
      }

      &-box {
        padding: @collapse-content-padding-vertical @collapse-title-padding-horizontal
          @collapse-content-padding-vertical
          (
            @collapse-title-padding-horizontal + @collapse-expand-icon-size-bg +
              @collapse-expand-icon-spacing-text
          );
      }
    }

    &&-disabled > &-content {
      color: @collapse-content-color-text_disabled;
    }

    &-no-icon > &-header {
      padding-left: @collapse-title-padding-horizontal;
      padding-right: @collapse-title-padding-horizontal;
    }

    &:last-of-type {
      border-bottom: none;
    }
  }

  &.@{collapse-prefix-cls}-borderless {
    border: none;
  }

  &::after {
    display: table;
    content: '';
    clear: both;
  }
}


/********** Collapse end ***************/
    


/********** ColorPicker  ***************/




/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/


@color-input-size-mini-padding-horizontal: @spacing-2;
@color-input-size-small-padding-horizontal: @spacing-2;
@color-input-size-default-padding-horizontal: @spacing-2;
@color-input-size-large-padding-horizontal: 5px;

@color-preview-size-mini: @size-4;
@color-preview-size-small: 22px;
@color-preview-size-default: @size-6;
@color-preview-size-large: 26px;

@color-input-bg-color: var(~'@{arco-cssvars-prefix}-color-fill-2');
@color-input-bg-color-hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@color-value-margin-left: @spacing-3;
@color-value-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
@color-value-font-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@color-value-size-mini-font-size: @font-size-body-1;
@color-value-size-small-font-size: @font-size-body-3;
@color-value-size-default-font-size: @font-size-body-3;
@color-value-size-large-font-size: @font-size-body-3;

@color-input-border-radius: @border-radius-small;
@color-preview-border-size: @border-1;
@color-preview-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
@color-value-font-size: @font-weight-400;

@color-panel-width: 260px;
@color-panel-padding: @spacing-6;
@color-panel-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
@color-panel-border-radius: @border-radius-small;
@color-panel-bg-color: var(~'@{arco-cssvars-prefix}-color-bg-1');
@color-panel-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 10%);

@color-palette-height: 178px;
@color-palette-handle-size: @size-4;
@color-palette-handle-border-size: @border-2;
@color-palette-handle-border-color: var(~'@{arco-cssvars-prefix}-color-bg-white');

@color-control-bar-width: 182px;
@color-control-bar-height: 14px;
@color-control-bar-handle-size: @size-4;
@color-control-bar-handle-bg-color: var(~'@{arco-cssvars-prefix}-color-bg-white');
@color-control-bar-handle-border-color: var(~'@{arco-cssvars-prefix}-color-border-2');
@color-control-bar-alpha-margin-top: @spacing-6;
@color-control-bar-gradient-margin: @spacing-6;

@color-panel-input-margin-top: @spacing-6;
@color-panel-input-group-margin-left: @spacing-6;
@color-panel-preview-size: 40px;
@color-panel-format-select-width: 58px;
@color-panel-alpha-input-width: 52px;

@color-panel-section-title-font-size: @font-size-caption;
@color-panel-section-title-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
@color-panel-empty-font-size: @font-size-body-1;
@color-panel-empty-font-color: var(~'@{arco-cssvars-prefix}-color-text-3');

@color-panel-block-size: @size-4;
@color-panel-block-margin: @spacing-3;
@color-panel-block-border-radius: @border-2;


@color-picker-prefix-cls: ~'@{prefix}-color-picker';

.@{color-picker-prefix-cls} {
  display: inline-flex;
  background-color: @color-input-bg-color;
  align-items: center;
  border-radius: @color-input-border-radius;
  box-sizing: border-box;

  &-preview {
    border: @color-preview-border-size solid @color-preview-border-color;
    box-sizing: border-box;
    flex: none;
  }

  &-value {
    margin-left: @color-value-margin-left;
    font-weight: @color-value-font-size;
    color: @color-value-font-color;
  }

  &-input {
    display: none;
  }

  &:hover {
    cursor: pointer;
    background-color: @color-input-bg-color-hover;
  }

  &-size-default {
    min-height: @input-size-default-height;
    padding: (@input-size-default-height - @color-preview-size-default) / 2
      @color-input-size-default-padding-horizontal;

    .@{color-picker-prefix-cls}-preview {
      height: @color-preview-size-default;
      width: @color-preview-size-default;
    }

    .@{color-picker-prefix-cls}-value {
      font-size: @color-value-size-default-font-size;
    }
  }

  &-size-mini {
    min-height: @input-size-mini-height;
    padding: (@input-size-mini-height - @color-preview-size-mini) / 2
      @color-input-size-mini-padding-horizontal;

    .@{color-picker-prefix-cls}-preview {
      height: @color-preview-size-mini;
      width: @color-preview-size-mini;
    }

    .@{color-picker-prefix-cls}-value {
      font-size: @color-value-size-mini-font-size;
    }
  }

  &-size-small {
    min-height: @input-size-small-height;
    padding: (@input-size-small-height - @color-preview-size-small) / 2
      @color-input-size-small-padding-horizontal;

    .@{color-picker-prefix-cls}-preview {
      height: @color-preview-size-small;
      width: @color-preview-size-small;
    }

    .@{color-picker-prefix-cls}-value {
      font-size: @color-value-size-small-font-size;
    }
  }

  &-size-large {
    min-height: @input-size-large-height;
    padding: (@input-size-large-height - @color-preview-size-large) / 2
      @color-input-size-large-padding-horizontal;

    .@{color-picker-prefix-cls}-preview {
      height: @color-preview-size-large;
      width: @color-preview-size-large;
    }

    .@{color-picker-prefix-cls}-value {
      font-size: @color-value-size-large-font-size;
    }
  }

  &&-disabled {
    background-color: @color-input-bg-color;
    cursor: not-allowed;

    .@{color-picker-prefix-cls}-value {
      color: @color-value-font-color_disabled;
    }
  }
}

.@{color-picker-prefix-cls}-panel {
  width: @color-panel-width;
  border-radius: @color-panel-border-radius;
  background-color: @color-panel-bg-color;
  box-shadow: @color-panel-box-shadow;

  .@{color-picker-prefix-cls}-palette {
    width: 100%;
    height: @color-palette-height;
    position: relative;
    cursor: pointer;
    background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
      linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0%));
    overflow: hidden;
    border-left: 1px solid @color-panel-border-color;
    border-top: 1px solid @color-panel-border-color;
    border-right: 1px solid @color-panel-border-color;
    box-sizing: border-box;

    .@{color-picker-prefix-cls}-handler {
      width: @color-palette-handle-size;
      height: @color-palette-handle-size;
      border-radius: @border-radius-circle;
      position: absolute;
      background-color: transparent;
      transform: translate(-50%, -50%);
      border: @color-palette-handle-border-size solid @color-palette-handle-border-color;
      box-sizing: border-box;
    }
  }

  .@{color-picker-prefix-cls}-panel-control {
    padding: @color-panel-padding;

    .@{color-picker-prefix-cls}-control-wrapper {
      display: flex;
      align-items: center;

      .@{color-picker-prefix-cls}-preview {
        margin-left: auto;
        width: @color-panel-preview-size;
        height: @color-panel-preview-size;
        border-radius: @border-radius-medium;
        border: 1px solid @color-panel-border-color;
        box-sizing: border-box;
      }

      .@{color-picker-prefix-cls}-control-bar-alpha {
        margin-top: @color-control-bar-alpha-margin-top;
      }
    }

    .@{color-picker-prefix-cls}-input-wrapper {
      margin-top: @color-panel-input-margin-top;
      display: flex;

      .@{color-picker-prefix-cls}-group-wrapper {
        margin-left: @color-panel-input-group-margin-left;
        display: flex;
        flex: 1;
      }

      .@{prefix}-select-view,
      .@{prefix}-input-inner-wrapper {
        padding: 0 @spacing-3;
      }
    }
  }

  .@{color-picker-prefix-cls}-panel-control-gradient {
    padding: @color-panel-padding @color-panel-padding 0;
    .@{color-picker-prefix-cls}-control-bar-gradient {
      margin: 0 @color-control-bar-handle-size / 2 @color-control-bar-gradient-margin;
      .@{color-picker-prefix-cls}-control-bar {
        width: 100%;
      }
    }
    .@{color-picker-prefix-cls}-panel-control-gradient-tag {
      margin-bottom: @color-control-bar-gradient-margin;
    }
  }

  .@{color-picker-prefix-cls}-panel-colors {
    padding: @color-panel-padding;
    border-top: 1px solid @color-panel-border-color;

    .@{color-picker-prefix-cls}-colors-section:not(:first-child) {
      margin-top: @spacing-6;
    }

    .@{color-picker-prefix-cls}-colors-text {
      font-size: @color-panel-section-title-font-size;
      font-weight: @font-weight-400;
      color: @color-panel-section-title-font-color;
    }

    .@{color-picker-prefix-cls}-colors-empty {
      margin: @spacing-6 0;
      font-size: @color-panel-empty-font-size;
      color: @color-panel-empty-font-color;
    }

    .@{color-picker-prefix-cls}-colors-wrapper {
      margin-top: @spacing-4;
    }

    .@{color-picker-prefix-cls}-colors-list {
      display: flex;
      flex-wrap: wrap;
      margin: -8px -4px 0;
    }

    .@{color-picker-prefix-cls}-color-block {
      margin: @color-panel-block-margin @color-panel-block-margin / 2 0;
      width: @color-panel-block-size;
      height: @color-panel-block-size;
      cursor: pointer;
      border-radius: @color-panel-block-border-radius;
      transition: transform ease-out 60ms;
      background-image: conic-gradient(
        rgba(0, 0, 0, 6%) 0 25%,
        transparent 0 50%,
        rgba(0, 0, 0, 6%) 0 75%,
        transparent 0
      );
      background-size: 8px 8px;
      overflow: hidden;

      .@{color-picker-prefix-cls}-block {
        width: 100%;
        height: 100%;
      }

      &:hover {
        transform: scale(1.1);
      }
    }
  }

  .@{color-picker-prefix-cls}-control-bar-bg {
    background-image: conic-gradient(
      rgba(0, 0, 0, 6%) 0 25%,
      transparent 0 50%,
      rgba(0, 0, 0, 6%) 0 75%,
      transparent 0
    );
    background-size: 8px 8px;
  }

  .@{color-picker-prefix-cls}-control-bar {
    width: @color-control-bar-width;
    height: @color-control-bar-height;
    position: relative;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid @color-panel-border-color;
    box-sizing: border-box;

    .@{color-picker-prefix-cls}-handler {
      width: @color-control-bar-handle-size;
      height: @color-control-bar-handle-size;
      border-radius: @border-radius-circle;
      position: absolute;
      top: -2px;
      background-color: @color-control-bar-handle-bg-color;
      transform: translateX(-50%);
      border: 1px solid @color-control-bar-handle-border-color;
      box-sizing: border-box;

      &-center {
        position: absolute;
        width: @color-control-bar-handle-size - 8;
        height: @color-control-bar-handle-size - 8;
        border-radius: @border-radius-circle;
        transform: translate(3px, 3px);
      }
    }

    &-hue {
      background: linear-gradient(
        90deg,
        #f00 0,
        #ff0 17%,
        #0f0 33%,
        #0ff 50%,
        #00f 67%,
        #f0f 83%,
        #f00
      );
    }
  }

  .@{color-picker-prefix-cls}-select-type {
    width: @color-panel-format-select-width;
  }

  .@{color-picker-prefix-cls}-input-group {
    display: flex;

    & > * {
      flex: 1;
    }
  }

  .@{color-picker-prefix-cls}-input-alpha {
    width: @color-panel-alpha-input-width;
    flex: 0 0 auto;
  }

  .@{color-picker-prefix-cls}-input-hex {
    .@{prefix}-input {
      padding-left: @spacing-2;
    }
  }
}

.@{color-picker-prefix-cls}-type-dropdown {
  & .@{prefix}-select-option {
    font-size: @font-size-body-1 !important;
    line-height: @size-mini !important;
  }
}


/********** ColorPicker end ***************/
    


/********** Comment  ***************/



@comment-color-author-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@comment-color-datetime-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@comment-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@comment-color-actions-text: var(~'@{arco-cssvars-prefix}-color-text-2');

@comment-font-size: @font-size-body-3;
@comment-font-action-size: @font-size-body-3;
@comment-font-author-size: @font-size-body-3;
@comment-font-datetime-size: @font-size-body-1;
@comment-margin-avatar-right: @spacing-6;
@comment-margin-author-right: @spacing-4;
@comment-margin-actions-top: @spacing-4;
@comment-margin-bottom: @spacing-8;
@comment-margin-actions-right: @spacing-4;
@comment-size-avatar-width: @size-8;


@comment-prefix-cls: ~'@{prefix}-comment';

.@{comment-prefix-cls} {
  display: flex;
  flex-wrap: nowrap;
  line-height: @line-height-base;

  &:not(:first-of-type),
  &-inner-comment {
    margin-top: @comment-margin-bottom;
  }

  &-inner {
    flex: 1;
  }

  &-avatar {
    flex-shrink: 0;
    margin-right: @comment-margin-avatar-right;
    cursor: pointer;

    > img {
      width: @comment-size-avatar-width;
      height: @comment-size-avatar-width;
      border-radius: @radius-circle;
    }
  }

  &-author {
    color: @comment-color-author-text;
    font-size: @comment-font-author-size;
    margin-right: @comment-margin-author-right;
  }

  &-datetime {
    color: @comment-color-datetime-text;
    font-size: @comment-font-datetime-size;
  }

  &-content {
    font-size: @comment-font-size;
    color: @comment-color-content-text;
  }

  &-title-align-right {
    display: flex;
    justify-content: space-between;
  }

  &-actions {
    margin-top: @comment-margin-actions-top;
    color: @comment-color-actions-text;
    font-size: @comment-font-action-size;

    > *:not(:last-child) {
      margin-right: @comment-margin-actions-right;
    }
  }

  &-actions-align-right {
    display: flex;
    justify-content: flex-end;
  }
}

.@{comment-prefix-cls}-rtl {
  direction: rtl;

  .@{comment-prefix-cls} {
    &-title {
      display: flex;
      align-items: center;
    }

    &-avatar {
      margin-right: 0;
      margin-left: @comment-margin-avatar-right;
    }

    &-author {
      margin-right: 0;
      margin-left: @comment-margin-author-right;
    }

    &-actions {
      > *:not(:last-child) {
        margin-left: @comment-margin-actions-right;
        margin-right: 0;
      }
    }
  }
}


/********** Comment end ***************/
    


/********** DatePicker  ***************/

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}




/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/


@picker-size-mini: @size-mini;
@picker-size-small: @size-small;
@picker-size-default: @size-default;
@picker-size-large: @size-large;

@picker-size-mini-font-size-text: @font-size-body-1;
@picker-size-small-font-size-text: @font-size-body-3;
@picker-size-default-font-size-text: @font-size-body-3;
@picker-size-large-font-size-text: @font-size-body-3;

@picker-input-border-radius: @radius-small;

@picker-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@picker-size-shadow_focus: @shadow-distance-none;
@picker-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@picker-size-shadow_error_focus: @shadow-distance-none;

@picker-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@picker-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@picker-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@picker-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@picker-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@picker-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@picker-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');

@picker-color-border: @color-transparent;
@picker-color-border_hover: @color-transparent;
@picker-color-border_focus: @color-primary-6;
@picker-color-border_disabled: @color-transparent;
@picker-color-border_error: @color-transparent;
@picker-color-border_error_hover: @color-transparent;
@picker-color-border_error_focus: @color-danger-6;

@picker-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-3');
@picker-color-placeholder_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@picker-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@picker-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@picker-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@picker-color-separator: var(~'@{arco-cssvars-prefix}-color-text-3');
@picker-color-separator_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@picker-range-color-bg-input_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-1');

// calc
@picker-padding-horizontal: @spacing-2; // 4px
@picker-input-padding-horizontal: @input-padding-horizontal - @picker-padding-horizontal; // 8px

// warning
@picker-color-shadow_warning_focus: @input-color-shadow_warning_focus;
@picker-size-shadow_warning_focus: @picker-size-shadow_error_focus;
@picker-color-bg_warning: @input-color-bg_warning;
@picker-color-bg_warning_hover: @input-color-bg_warning_hover;
@picker-color-bg_warning_focus: @input-color-bg_warning_focus;
@picker-color-border_warning: @input-color-border_warning;
@picker-color-border_warning_hover: @input-color-border_warning_hover;
@picker-color-border_warning_focus: @input-color-border_warning_focus;

.picker-status(@status) {
  &-@{status}:not(&-disabled) {
    border-color: ~'@{picker-color-border_@{status}}';
    background-color: ~'@{picker-color-bg_@{status}}';

    &:hover {
      border-color: ~'@{picker-color-border_@{status}_hover}';
      background-color: ~'@{picker-color-bg_@{status}_hover}';
    }
  }

  &-@{status}&-focused:not(&-disabled) {
    &,
    &:hover {
      border-color: ~'@{picker-color-border_@{status}_focus}';
      background-color: ~'@{picker-color-bg_@{status}_focus}';
      box-shadow: 0 0 0 ~'@{picker-size-shadow_@{status}_focus}' ~'@{picker-color-shadow_@{status}_focus}';
    }
  }
}


.@{prefix}-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: @picker-padding-horizontal 11px 4px 4px;
  line-height: @line-height-base;
  border-radius: @picker-input-border-radius;
  background-color: @picker-color-bg;
  border: 1px solid @picker-color-border;
  box-sizing: border-box;
  transition: all @transition-duration-1 @transition-timing-function-linear;

  &-input {
    display: inline-flex;
    flex: 1;
  }

  input {
    text-align: left;
    padding: 0;
    padding-left: @picker-input-padding-horizontal;
    border: none;
    width: 100%;
    color: @picker-color-text;
    background-color: @color-transparent;
    line-height: @line-height-base;
    transition: all @transition-duration-1 @transition-timing-function-linear;

    &::placeholder {
      color: @picker-color-placeholder;
    }
  }

  &-input-placeholder input {
    color: @picker-color-placeholder;
  }

  &-has-prefix {
    padding-left: @input-padding-horizontal;
  }

  &-prefix {
    color: @input-color-prefix-text;
    padding-right: @picker-padding-horizontal;
    font-size: @input-size-default-icon-suffix-size;
  }

  &-suffix {
    width: 14px;
    margin-left: 4px;
    text-align: center;
  }

  &-suffix-icon {
    color: @picker-color-icon;
  }

  & &-clear-icon {
    display: none;
    font-size: 12px;
    color: var(~'@{arco-cssvars-prefix}-color-text-2');
  }

  &:hover {
    background-color: @picker-color-bg_hover;
    border-color: @picker-color-border_hover;
  }

  &:not(&-disabled):hover &-clear-icon {
    display: inline-block;
  }

  &:not(&-disabled):hover &-suffix &-clear-icon + span {
    display: none;
  }

  &-focused {
    box-shadow: 0 0 0 @picker-size-shadow_focus @picker-color-shadow_focus;
  }

  &-focused,
  &-focused:hover {
    background-color: @picker-color-bg_focus;
    border-color: @picker-color-border_focus;
  }

  &-focused &-input-active input,
  &-focused:hover &-input-active input {
    background: @picker-range-color-bg-input_focus;
  }

  .disabledInput() {
    input[disabled] {
      cursor: not-allowed;
      color: @picker-color-text_disabled;
      -webkit-text-fill-color: @picker-color-text_disabled;

      &::placeholder {
        color: @picker-color-placeholder_disabled;
      }
    }
  }

  .picker-status(error);
  .picker-status(warning);

  .disabledInput();

  &-disabled,
  &-disabled:hover {
    color: @picker-color-text_disabled;
    border-color: @picker-color-border_disabled;
    background-color: @picker-color-bg_disabled;
    cursor: not-allowed;

    .disabledInput();
  }

  &-separator {
    min-width: 10px;
    padding: 0 8px;
    color: @picker-color-separator;
  }

  &-disabled &-separator {
    color: @picker-color-separator_disabled;
  }

  &-disabled &-suffix-icon {
    color: @picker-color-icon_disabled;
  }

  // Size
  &-size-mini {
    height: @picker-size-mini;

    input {
      font-size: @picker-size-mini-font-size-text;
    }
  }

  &-size-small {
    height: @picker-size-small;

    input {
      font-size: @picker-size-small-font-size-text;
    }
  }

  &-size-default {
    height: @picker-size-default;

    input {
      font-size: @picker-size-default-font-size-text;
    }
  }

  &-size-large {
    height: @picker-size-large;

    input {
      font-size: @picker-size-large-font-size-text;
    }
  }
}

.@{prefix}-picker-rtl {
  direction: rtl;
  padding: 4px 4px 4px 11px;

  input {
    text-align: right;
    padding-left: 0;
    padding-right: 8px;
  }

  .@{prefix}-picker-suffix {
    margin-left: 0;
    margin-right: 4px;
  }
}



// Panel
@picker-container-border-radius: @radius-medium;

@picker-header-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-header-font-weight-text: @font-weight-500;
@picker-header-font-size: @font-size-body;
@picker-header-padding-horizontal: 24px;
@picker-header-padding-vertical: 24px;

@picker-panel-border-width: 1px;

@picker-panel-date-width: 265px;
@picker-panel-month-width: 265px;
@picker-panel-year-width: 265px;
@picker-panel-week-width: 298px;
@picker-panel-quarter-width: 265px;

@picker-panel-time-cell-width: 36px;
@picker-panel-time-cell-spacing-horizontal: 4px;
@picker-panel-time-padding-horizontal: 10px;

@picker-panel-cell-padding-vertical: 4px;
@picker-panel-cell-circle-height: 24px;

@picker-panel-row-padding-vertical: 2px;

@picker-color-switch-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@picker-color-bg-switch-icon: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@picker-color-bg-switch-icon_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');

@picker-cell-font-weight-in-view: @font-weight-500;
@picker-color-cell-text-in-view: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-cell-font-weight-not-in-view: @font-weight-500;
@picker-color-cell-text-not-in-view: var(~'@{arco-cssvars-prefix}-color-text-4');
@picker-color-bg-circle_selected: @color-primary-6;
@picker-color-bg-cell-in-range: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@picker-color-bg-cell-disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');
@picker-color-text-cell-range-boundary: var(~'@{arco-cssvars-prefix}-color-white');
@picker-color-bg-cell-range-boundary: @color-primary-6;
@picker-color-bg-cell-hover-in-range: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@picker-color-text-cell-hover-range-boundary: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-color-bg-cell-hover-range-boundary: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@picker-color-text-week-list-item: var(~'@{arco-cssvars-prefix}-color-text-2');
@picker-font-weight-week-list-item: @font-weight-500;

@picker-panel-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@picker-panel-color-text-cell_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-panel-color-bg-cell_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@picker-panel-color-text-cell_selected: var(~'@{arco-cssvars-prefix}-color-white');
@picker-panel-color-bg-cell_selected: @color-primary-6;
@picker-panel-color-current-time-dot: @color-primary-6;

@picker-panel-color-text-holder: var(~'@{arco-cssvars-prefix}-color-text-3');
@picker-panel-color-text-holder_active: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-panel-color-bg-label_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');

@picker-panel-border-radius-cell_selected: @picker-panel-cell-circle-height;
@picker-panel-cell-boundary-border-radius: @picker-panel-cell-circle-height;


@picker-prefix-cls: ~'@{prefix}-picker';

.@{prefix}-picker-container,
.@{prefix}-picker-range-container {
  border: @picker-panel-border-width solid @picker-panel-color-border;
  box-shadow: @popup-box-shadow-base;
  border-radius: @picker-container-border-radius;
  background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');
  box-sizing: border-box;
  min-height: 60px;
  overflow: hidden;

  &-shortcuts-placement-left {
    display: flex;
    align-items: flex-start;

    .@{prefix}-picker-shortcuts {
      display: flex;
      flex-direction: column;
      padding: 5px 8px;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;

      > * {
        margin: 5px 0;
      }
    }

    .@{picker-prefix-cls}-panel-wrapper,
    .@{picker-prefix-cls}-range-panel-wrapper {
      border-left: @picker-panel-border-width solid @picker-panel-color-border;
    }
  }
}

// panel only
.@{prefix}-picker-panel-only,
.@{prefix}-picker-range-panel-only {
  box-shadow: none;
}

.@{prefix}-picker-panel-only .@{prefix}-panel-date-inner,
.@{prefix}-picker-range-panel-only .@{prefix}-panel-date-inner {
  width: 100%;
}

.@{prefix}-picker-range-panel-only .@{prefix}-panel-date,
.@{prefix}-picker-range-panel-only .@{prefix}-panel-month,
.@{prefix}-picker-range-panel-only .@{prefix}-panel-year {
  width: 100%;
}

.@{picker-prefix-cls} {
  &-header {
    display: flex;
    padding: 8px 16px;
    border-bottom: @picker-panel-border-width solid @picker-panel-color-border;

    &-value {
      font-size: @picker-header-font-size;
      line-height: 24px;
      flex: 1;
      text-align: center;
      color: @picker-header-color-text;
      font-weight: @picker-header-font-weight-text;
      box-sizing: border-box;
    }

    &-icon {
      border-radius: 50%;
      text-align: center;
      font-size: 12px;
      transition: all @transition-duration-1 @transition-timing-function-linear;
      user-select: none;
      color: @picker-color-switch-icon;
      background-color: @picker-color-bg-switch-icon;
      width: 24px;
      height: 24px;
      line-height: 24px;
      margin-left: 2px;
      margin-right: 2px;
      box-sizing: border-box;
    }

    &-icon:not(&-icon-hidden) {
      cursor: pointer;

      &:hover {
        background-color: @picker-color-bg-switch-icon_hover;
      }
    }

    &-label {
      cursor: pointer;
      padding: 2px;
      border-radius: 2px;
      transition: all @transition-duration-1;

      &:hover {
        background-color: @picker-panel-color-bg-label_hover;
      }
    }
  }

  &-body {
    padding: 14px 16px;
  }

  &-week-list {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px 0;

    &-item {
      color: @picker-color-text-week-list-item;
      flex: 1;
      padding: 0;
      text-align: center;
      font-weight: @picker-font-weight-week-list-item;
      height: 32px;
      line-height: 32px;
    }
  }

  &-row {
    display: flex;
  }

  &-cell {
    position: relative;
    flex: 1;
    cursor: pointer;
    padding: @picker-panel-row-padding-vertical 0;
  }

  &-cell &-date {
    display: flex;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    padding: @picker-panel-cell-padding-vertical 0;
    justify-content: center;
  }

  &-date-value {
    color: @picker-color-cell-text-not-in-view;
    font-size: 14px;
    min-width: @picker-panel-cell-circle-height;
    height: @picker-panel-cell-circle-height;
    line-height: @picker-panel-cell-circle-height;
    text-align: center;
    border-radius: @picker-panel-border-radius-cell_selected;
    font-weight: @picker-cell-font-weight-not-in-view;
  }

  &-cell-in-view &-date-value {
    color: @picker-color-cell-text-in-view;
    font-weight: @picker-cell-font-weight-in-view;
  }

  &-cell:hover &-date-value {
    background-color: @picker-panel-color-bg-cell_hover;
    color: @picker-panel-color-text-cell_hover;
  }

  &-cell-today {
    position: relative;

    &::after {
      content: '';
      display: block;
      position: absolute;
      bottom: -2px;
      left: 50%;
      margin-left: -2px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: @picker-panel-color-current-time-dot;
    }
  }

  &-cell-in-range &-date {
    background-color: @picker-color-bg-cell-in-range;
  }

  &-cell-range-start &-date,
  &-cell-hover-range-start &-date {
    border-top-left-radius: @picker-panel-cell-boundary-border-radius;
    border-bottom-left-radius: @picker-panel-cell-boundary-border-radius;
  }

  &-cell-range-end &-date,
  &-cell-hover-range-end &-date {
    border-top-right-radius: @picker-panel-cell-boundary-border-radius;
    border-bottom-right-radius: @picker-panel-cell-boundary-border-radius;
  }

  &-cell-range-start:hover &-date-value,
  &-cell-range-end:hover &-date-value {
    background-color: unset;
  }

  &-cell-disabled &-date {
    background-color: @picker-color-bg-cell-disabled;
    cursor: not-allowed;
  }

  &-cell-disabled &-date-value,
  &-cell-disabled:hover &-date-value {
    color: @picker-color-cell-text-not-in-view;
    background-color: @color-transparent;
  }

  &-cell-selected &-date-value,
  &-cell-selected:hover &-date-value {
    color: @picker-panel-color-text-cell_selected;
    background-color: @picker-panel-color-bg-cell_selected;
    transition: background-color @transition-duration-1 @transition-timing-function-linear;
  }

  &-cell-hover-in-range &-date,
  &-cell-hover-range-start:not(&-cell-range-start):not(&-cell-range-end) &-date-value,
  &-cell-hover-range-end:not(&-cell-range-start):not(&-cell-range-end) &-date-value {
    background-color: @picker-color-bg-cell-hover-in-range;
  }

  &-cell-range-edge-in-hover-range &-date {
    border-radius: 0;
  }

  &-cell-hover-range-edge-in-range &-date {
    border-radius: 0;
  }

  &-cell-hidden &-date {
    display: none;
  }

  // Footer
  &-footer {
    width: min-content;
    min-width: 100%;

    &-btn-wrapper {
      border-top: @picker-panel-border-width solid @picker-panel-color-border;
      padding: 3px 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
    }

    &-extra-wrapper {
      padding: 8px 24px;
      color: var(~'@{arco-cssvars-prefix}-color-text-1');
      border-top: @picker-panel-border-width solid @picker-panel-color-border;
      box-sizing: border-box;
      font-size: 12px;
    }

    &-now-wrapper {
      border-top: @picker-panel-border-width solid @picker-panel-color-border;
      box-sizing: border-box;
      height: 36px;
      line-height: 36px;
      text-align: center;
    }
  }

  &-btn-select-date,
  &-btn-select-time {
    margin-right: 8px;
  }

  &-btn-confirm {
    margin: 5px 0;
  }

  &-shortcuts {
    flex: 1;

    & > * {
      margin: 5px 10px 5px 0;
    }
  }
}



@timepicker-wrapper-border-radius: @radius-medium;

@timepicker-column-width: 64px;
@timepicker-column-height: 224px;
@timepicker-cell-height: 24px;
@timepicker-cell-spacing: @spacing-4;
@timepicker-cell-font-size: @font-size-body-3;
@timepicker-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@timepicker-color-cell-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@timepicker-color-text-cell: var(~'@{arco-cssvars-prefix}-color-text-1');
@timepicker-color-bg-cell_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@timepicker-color-bg-cell_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
@timepicker-color-text-cell_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@timepicker-font-weight-cell: @font-weight-500;
@timepicker-font-weight-cell_active: @font-weight-500;
@timepicker-color-extra-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@timepicker-font-extra-size: @font-size-body-1;
@timepicker-extra-padding-horizontal: @spacing-4;
@timepicker-extra-padding-vertical: @spacing-4;
@timepicker-footer-padding-horizontal: @spacing-4;
@timepicker-footer-padding-vertical: @spacing-4;


@date-panel-prefix-cls: ~'@{prefix}-panel-date';
@time-picker-prefix-cls: ~'@{prefix}-timepicker';

@datepicker-timepicker-height: 276px;

.@{date-panel-prefix-cls} {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;

  &-inner {
    width: @picker-panel-date-width;
  }

  &-inner .@{prefix}-picker-body {
    padding-top: 0;
  }

  &-timepicker {
    display: flex;
    flex-direction: column;

    &-title {
      width: 100%;
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      border-bottom: @picker-panel-border-width solid @picker-panel-color-border;
      color: var(~'@{arco-cssvars-prefix}-color-text-1');
    }

    .@{time-picker-prefix-cls} {
      width: @picker-panel-date-width;
      height: @datepicker-timepicker-height;
      padding: 0 6px;
      overflow: hidden;

      &-list {
        width: 100%;
        height: 100%;
        padding: 0 4px;
        box-sizing: border-box;
      }

      &-list:not(:last-child) {
        border-right: 0;
      }

      ul::after {
        height: @datepicker-timepicker-height - @timepicker-cell-height - @timepicker-cell-spacing;
      }

      &-cell {
        width: 100%;
      }
    }
  }

  // TODO: remove
  &-holder {
    display: flex;
    width: 100%;
    border-top: @picker-panel-border-width solid @picker-panel-color-border;

    &-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: 50px;
      box-sizing: border-box;
      cursor: pointer;
      color: @picker-panel-color-text-holder;
      font-size: 16px;
      transition: color 0.2s;

      &:first-child {
        border-right: @picker-panel-border-width solid @picker-panel-color-border;
      }

      &:hover,
      &:active,
      &-active {
        color: @picker-panel-color-text-holder_active;
      }

      &-value {
        margin-left: 8px;
      }
    }
  }

  &:first-child &-holder {
    border-right: @picker-panel-border-width solid @picker-panel-color-border;
  }
}



// Panel
@picker-container-border-radius: @radius-medium;

@picker-header-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-header-font-weight-text: @font-weight-500;
@picker-header-font-size: @font-size-body;
@picker-header-padding-horizontal: 24px;
@picker-header-padding-vertical: 24px;

@picker-panel-border-width: 1px;

@picker-panel-date-width: 265px;
@picker-panel-month-width: 265px;
@picker-panel-year-width: 265px;
@picker-panel-week-width: 298px;
@picker-panel-quarter-width: 265px;

@picker-panel-time-cell-width: 36px;
@picker-panel-time-cell-spacing-horizontal: 4px;
@picker-panel-time-padding-horizontal: 10px;

@picker-panel-cell-padding-vertical: 4px;
@picker-panel-cell-circle-height: 24px;

@picker-panel-row-padding-vertical: 2px;

@picker-color-switch-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@picker-color-bg-switch-icon: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@picker-color-bg-switch-icon_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');

@picker-cell-font-weight-in-view: @font-weight-500;
@picker-color-cell-text-in-view: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-cell-font-weight-not-in-view: @font-weight-500;
@picker-color-cell-text-not-in-view: var(~'@{arco-cssvars-prefix}-color-text-4');
@picker-color-bg-circle_selected: @color-primary-6;
@picker-color-bg-cell-in-range: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@picker-color-bg-cell-disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');
@picker-color-text-cell-range-boundary: var(~'@{arco-cssvars-prefix}-color-white');
@picker-color-bg-cell-range-boundary: @color-primary-6;
@picker-color-bg-cell-hover-in-range: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@picker-color-text-cell-hover-range-boundary: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-color-bg-cell-hover-range-boundary: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@picker-color-text-week-list-item: var(~'@{arco-cssvars-prefix}-color-text-2');
@picker-font-weight-week-list-item: @font-weight-500;

@picker-panel-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@picker-panel-color-text-cell_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-panel-color-bg-cell_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@picker-panel-color-text-cell_selected: var(~'@{arco-cssvars-prefix}-color-white');
@picker-panel-color-bg-cell_selected: @color-primary-6;
@picker-panel-color-current-time-dot: @color-primary-6;

@picker-panel-color-text-holder: var(~'@{arco-cssvars-prefix}-color-text-3');
@picker-panel-color-text-holder_active: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-panel-color-bg-label_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');

@picker-panel-border-radius-cell_selected: @picker-panel-cell-circle-height;
@picker-panel-cell-boundary-border-radius: @picker-panel-cell-circle-height;


@month-panel-prefix-cls: ~'@{prefix}-panel-month';
@quarter-panel-prefix-cls: ~'@{prefix}-panel-quarter';
@year-panel-prefix-cls: ~'@{prefix}-panel-year';

.@{month-panel-prefix-cls},
.@{quarter-panel-prefix-cls},
.@{year-panel-prefix-cls} {
  box-sizing: border-box;
  width: @picker-panel-month-width;

  .@{prefix}-picker-date {
    padding: 4px;
  }

  .@{prefix}-picker-date-value {
    border-radius: @picker-panel-cell-boundary-border-radius;
    width: 100%;
  }

  .@{prefix}-picker-cell:not(.@{prefix}-picker-cell-selected):not(.@{prefix}-picker-cell-range-start):not(.@{prefix}-picker-cell-range-end):not(.@{prefix}-picker-cell-disabled):not(.@{prefix}-picker-cell-week)
    .@{prefix}-picker-date-value:hover {
    border-radius: @picker-panel-cell-boundary-border-radius;
  }
}



// Panel
@picker-container-border-radius: @radius-medium;

@picker-header-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-header-font-weight-text: @font-weight-500;
@picker-header-font-size: @font-size-body;
@picker-header-padding-horizontal: 24px;
@picker-header-padding-vertical: 24px;

@picker-panel-border-width: 1px;

@picker-panel-date-width: 265px;
@picker-panel-month-width: 265px;
@picker-panel-year-width: 265px;
@picker-panel-week-width: 298px;
@picker-panel-quarter-width: 265px;

@picker-panel-time-cell-width: 36px;
@picker-panel-time-cell-spacing-horizontal: 4px;
@picker-panel-time-padding-horizontal: 10px;

@picker-panel-cell-padding-vertical: 4px;
@picker-panel-cell-circle-height: 24px;

@picker-panel-row-padding-vertical: 2px;

@picker-color-switch-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@picker-color-bg-switch-icon: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@picker-color-bg-switch-icon_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');

@picker-cell-font-weight-in-view: @font-weight-500;
@picker-color-cell-text-in-view: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-cell-font-weight-not-in-view: @font-weight-500;
@picker-color-cell-text-not-in-view: var(~'@{arco-cssvars-prefix}-color-text-4');
@picker-color-bg-circle_selected: @color-primary-6;
@picker-color-bg-cell-in-range: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@picker-color-bg-cell-disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');
@picker-color-text-cell-range-boundary: var(~'@{arco-cssvars-prefix}-color-white');
@picker-color-bg-cell-range-boundary: @color-primary-6;
@picker-color-bg-cell-hover-in-range: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@picker-color-text-cell-hover-range-boundary: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-color-bg-cell-hover-range-boundary: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@picker-color-text-week-list-item: var(~'@{arco-cssvars-prefix}-color-text-2');
@picker-font-weight-week-list-item: @font-weight-500;

@picker-panel-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@picker-panel-color-text-cell_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-panel-color-bg-cell_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@picker-panel-color-text-cell_selected: var(~'@{arco-cssvars-prefix}-color-white');
@picker-panel-color-bg-cell_selected: @color-primary-6;
@picker-panel-color-current-time-dot: @color-primary-6;

@picker-panel-color-text-holder: var(~'@{arco-cssvars-prefix}-color-text-3');
@picker-panel-color-text-holder_active: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-panel-color-bg-label_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');

@picker-panel-border-radius-cell_selected: @picker-panel-cell-circle-height;
@picker-panel-cell-boundary-border-radius: @picker-panel-cell-circle-height;


@year-panel-prefix-cls: ~'@{prefix}-panel-year';

.@{year-panel-prefix-cls} {
  box-sizing: border-box;
  width: @picker-panel-year-width;
}



// Panel
@picker-container-border-radius: @radius-medium;

@picker-header-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-header-font-weight-text: @font-weight-500;
@picker-header-font-size: @font-size-body;
@picker-header-padding-horizontal: 24px;
@picker-header-padding-vertical: 24px;

@picker-panel-border-width: 1px;

@picker-panel-date-width: 265px;
@picker-panel-month-width: 265px;
@picker-panel-year-width: 265px;
@picker-panel-week-width: 298px;
@picker-panel-quarter-width: 265px;

@picker-panel-time-cell-width: 36px;
@picker-panel-time-cell-spacing-horizontal: 4px;
@picker-panel-time-padding-horizontal: 10px;

@picker-panel-cell-padding-vertical: 4px;
@picker-panel-cell-circle-height: 24px;

@picker-panel-row-padding-vertical: 2px;

@picker-color-switch-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@picker-color-bg-switch-icon: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@picker-color-bg-switch-icon_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');

@picker-cell-font-weight-in-view: @font-weight-500;
@picker-color-cell-text-in-view: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-cell-font-weight-not-in-view: @font-weight-500;
@picker-color-cell-text-not-in-view: var(~'@{arco-cssvars-prefix}-color-text-4');
@picker-color-bg-circle_selected: @color-primary-6;
@picker-color-bg-cell-in-range: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@picker-color-bg-cell-disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');
@picker-color-text-cell-range-boundary: var(~'@{arco-cssvars-prefix}-color-white');
@picker-color-bg-cell-range-boundary: @color-primary-6;
@picker-color-bg-cell-hover-in-range: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@picker-color-text-cell-hover-range-boundary: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-color-bg-cell-hover-range-boundary: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@picker-color-text-week-list-item: var(~'@{arco-cssvars-prefix}-color-text-2');
@picker-font-weight-week-list-item: @font-weight-500;

@picker-panel-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@picker-panel-color-text-cell_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-panel-color-bg-cell_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@picker-panel-color-text-cell_selected: var(~'@{arco-cssvars-prefix}-color-white');
@picker-panel-color-bg-cell_selected: @color-primary-6;
@picker-panel-color-current-time-dot: @color-primary-6;

@picker-panel-color-text-holder: var(~'@{arco-cssvars-prefix}-color-text-3');
@picker-panel-color-text-holder_active: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-panel-color-bg-label_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');

@picker-panel-border-radius-cell_selected: @picker-panel-cell-circle-height;
@picker-panel-cell-boundary-border-radius: @picker-panel-cell-circle-height;


@week-panel-prefix-cls: ~'@{prefix}-panel-week';
@picker-prefix-cls: ~'@{prefix}-picker';

.@{week-panel-prefix-cls} {
  box-sizing: border-box;

  &-wrapper {
    display: flex;
  }

  &-inner {
    width: @picker-panel-week-width;
  }

  &-inner .@{picker-prefix-cls}-body {
    padding-top: 0;
  }

  .@{picker-prefix-cls}-row-week {
    cursor: pointer;

    .@{picker-prefix-cls}-date-value {
      width: 100%;
      border-radius: 0;
    }
  }

  .@{picker-prefix-cls}-cell {
    .@{picker-prefix-cls}-date {
      border-radius: 0;
    }

    &:nth-child(2) {
      .@{picker-prefix-cls}-date {
        padding-left: 4px;
        border-top-left-radius: @picker-panel-cell-boundary-border-radius;
        border-bottom-left-radius: @picker-panel-cell-boundary-border-radius;

        .@{picker-prefix-cls}-date-value {
          border-top-left-radius: @picker-panel-border-radius-cell_selected;
          border-bottom-left-radius: @picker-panel-border-radius-cell_selected;
        }
      }
    }

    &:nth-child(8) {
      .@{picker-prefix-cls}-date {
        padding-right: 4px;
        border-top-right-radius: @picker-panel-cell-boundary-border-radius;
        border-bottom-right-radius: @picker-panel-cell-boundary-border-radius;

        .@{picker-prefix-cls}-date-value {
          border-top-right-radius: @picker-panel-border-radius-cell_selected;
          border-bottom-right-radius: @picker-panel-border-radius-cell_selected;
        }
      }
    }
  }

  .@{picker-prefix-cls}-row-week:hover
    .@{picker-prefix-cls}-cell:not(.@{picker-prefix-cls}-cell-week):not(.@{picker-prefix-cls}-cell-selected):not(.@{picker-prefix-cls}-cell-range-start):not(.@{picker-prefix-cls}-cell-range-end):not(.@{picker-prefix-cls}-cell-in-range):not(.@{picker-prefix-cls}-cell-hover-in-range) {
    .@{picker-prefix-cls}-date-value {
      background-color: @picker-panel-color-bg-cell_hover;
    }
  }
}



// Panel
@picker-container-border-radius: @radius-medium;

@picker-header-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-header-font-weight-text: @font-weight-500;
@picker-header-font-size: @font-size-body;
@picker-header-padding-horizontal: 24px;
@picker-header-padding-vertical: 24px;

@picker-panel-border-width: 1px;

@picker-panel-date-width: 265px;
@picker-panel-month-width: 265px;
@picker-panel-year-width: 265px;
@picker-panel-week-width: 298px;
@picker-panel-quarter-width: 265px;

@picker-panel-time-cell-width: 36px;
@picker-panel-time-cell-spacing-horizontal: 4px;
@picker-panel-time-padding-horizontal: 10px;

@picker-panel-cell-padding-vertical: 4px;
@picker-panel-cell-circle-height: 24px;

@picker-panel-row-padding-vertical: 2px;

@picker-color-switch-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@picker-color-bg-switch-icon: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@picker-color-bg-switch-icon_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');

@picker-cell-font-weight-in-view: @font-weight-500;
@picker-color-cell-text-in-view: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-cell-font-weight-not-in-view: @font-weight-500;
@picker-color-cell-text-not-in-view: var(~'@{arco-cssvars-prefix}-color-text-4');
@picker-color-bg-circle_selected: @color-primary-6;
@picker-color-bg-cell-in-range: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@picker-color-bg-cell-disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');
@picker-color-text-cell-range-boundary: var(~'@{arco-cssvars-prefix}-color-white');
@picker-color-bg-cell-range-boundary: @color-primary-6;
@picker-color-bg-cell-hover-in-range: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@picker-color-text-cell-hover-range-boundary: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-color-bg-cell-hover-range-boundary: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@picker-color-text-week-list-item: var(~'@{arco-cssvars-prefix}-color-text-2');
@picker-font-weight-week-list-item: @font-weight-500;

@picker-panel-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@picker-panel-color-text-cell_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-panel-color-bg-cell_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@picker-panel-color-text-cell_selected: var(~'@{arco-cssvars-prefix}-color-white');
@picker-panel-color-bg-cell_selected: @color-primary-6;
@picker-panel-color-current-time-dot: @color-primary-6;

@picker-panel-color-text-holder: var(~'@{arco-cssvars-prefix}-color-text-3');
@picker-panel-color-text-holder_active: var(~'@{arco-cssvars-prefix}-color-text-1');
@picker-panel-color-bg-label_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');

@picker-panel-border-radius-cell_selected: @picker-panel-cell-circle-height;
@picker-panel-cell-boundary-border-radius: @picker-panel-cell-circle-height;


@quarter-panel-prefix-cls: ~'@{prefix}-panel-quarter';

.@{quarter-panel-prefix-cls} {
  box-sizing: border-box;
  width: @picker-panel-quarter-width;
}



@range-picker-prefix-cls: ~'@{prefix}-picker-range';

.@{range-picker-prefix-cls} {
  &-wrapper {
    display: flex;
  }
}



@date-picker-prefix-cls: ~'@{prefix}-datepicker';

.@{date-picker-prefix-cls}-shortcuts-wrapper {
  width: 106px;
  height: 100%;
  max-height: 300px;
  overflow-y: auto;
  box-sizing: border-box;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;

  > li {
    width: 100%;
    padding: 6px 16px;
    cursor: pointer;
    box-sizing: border-box;

    &:hover {
      color: @color-primary-6;
    }
  }
}

.@{prefix}-picker-container-rtl,
.@{prefix}-picker-range-container-rtl {
  direction: rtl;

  .@{picker-prefix-cls} {
    &-cell-range-start,
    &-cell-hover-range-start {
      .@{picker-prefix-cls}-date {
        border-radius: 0 @picker-panel-cell-boundary-border-radius
          @picker-panel-cell-boundary-border-radius 0;
      }
    }

    &-cell-range-end,
    &-cell-hover-range-end {
      .@{picker-prefix-cls}-date {
        border-radius: @picker-panel-cell-boundary-border-radius 0 0
          @picker-panel-cell-boundary-border-radius;
      }
    }
  }

  .@{week-panel-prefix-cls} {
    .@{picker-prefix-cls}-cell {
      &:nth-child(2) {
        .@{picker-prefix-cls}-date {
          padding-right: 4px;
          padding-left: 0;
          border-radius: 0 @picker-panel-cell-boundary-border-radius
            @picker-panel-cell-boundary-border-radius 0;

          .@{picker-prefix-cls}-date-value {
            border-radius: 0 @picker-panel-border-radius-cell_selected
              @picker-panel-border-radius-cell_selected 0;
          }
        }
      }

      &:nth-child(8) {
        .@{picker-prefix-cls}-date {
          padding-left: 4px;
          padding-right: 0;
          border-radius: @picker-panel-cell-boundary-border-radius 0 0
            @picker-panel-cell-boundary-border-radius;

          .@{picker-prefix-cls}-date-value {
            border-radius: @picker-panel-border-radius-cell_selected 0 0
              @picker-panel-border-radius-cell_selected;
          }
        }
      }
    }
  }
}



/********** DatePicker end ***************/
    


/********** Descriptions  ***************/



@descriptions-border-width: 1px;
@descriptions-border-style: solid;
@descriptions-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@descriptions-border-radius: @radius-medium;
@descriptions-font-size-title: @font-size-title-1;

@descriptions-size-mini-title-margin-bottom: 6px;
@descriptions-size-small-title-margin-bottom: 8px;
@descriptions-size-medium-title-margin-bottom: 12px;
@descriptions-size-default-title-margin-bottom: 16px;
@descriptions-size-large-title-margin-bottom: 20px;

@descriptions-size-mini-font-size-text: @font-size-body-1;
@descriptions-size-small-font-size-text: @font-size-body-3;
@descriptions-size-medium-font-size-text: @font-size-body-3;
@descriptions-size-default-font-size-text: @font-size-body-3;
@descriptions-size-large-font-size-text: @font-size-body-3;

@descriptions-color-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@descriptions-color-text-label: var(~'@{arco-cssvars-prefix}-color-text-3');
@descriptions-color-text-value: var(~'@{arco-cssvars-prefix}-color-text-1');
@descriptions-font-weight-title: @font-weight-500;
@descriptions-font-weight-text-label: @font-weight-500;
@descriptions-font-weight-text-value: @font-weight-400;

@descriptions-border-color-bg-label: var(~'@{arco-cssvars-prefix}-color-fill-1');

@descriptions-item-size-mini-spacing-bottom: 2px;
@descriptions-item-size-small-spacing-bottom: 4px;
@descriptions-item-size-medium-spacing-bottom: 8px;
@descriptions-item-size-default-spacing-bottom: 12px;
@descriptions-item-size-large-spacing-bottom: 16px;

@descriptions-border-item-size-mini-padding-horizontal: @spacing-8;
@descriptions-border-item-size-mini-padding-vertical: 3px;
@descriptions-border-item-size-small-padding-horizontal: @spacing-8;
@descriptions-border-item-size-small-padding-vertical: 3px;
@descriptions-border-item-size-medium-padding-horizontal: @spacing-8;
@descriptions-border-item-size-medium-padding-vertical: 5px;
@descriptions-border-item-size-default-padding-horizontal: @spacing-8;
@descriptions-border-item-size-default-padding-vertical: 7px;
@descriptions-border-item-size-large-padding-horizontal: @spacing-8;
@descriptions-border-item-size-large-padding-vertical: 9px;


@descriptions-prefix-cls: ~'@{prefix}-descriptions';

.descriptions-size(@size) {
  &-size-@{size} &-title {
    margin-bottom: ~'@{descriptions-size-@{size}-title-margin-bottom}';
  }

  &-size-@{size} &-item-label,
  &-size-@{size} &-item-value {
    padding-bottom: ~'@{descriptions-item-size-@{size}-spacing-bottom}';
    padding-right: ~'@{descriptions-border-item-size-@{size}-padding-horizontal}';
    font-size: ~'@{descriptions-size-@{size}-font-size-text}';
  }

  &-size-@{size}&-border &-item-label,
  &-size-@{size}&-border &-item-value {
    padding: ~'@{descriptions-border-item-size-@{size}-padding-vertical}' ~'@{descriptions-border-item-size-@{size}-padding-horizontal}';
  }

  &-size-@{size}&-border&-layout-inline-vertical &-item {
    @_descriptions-padding-vertical: ~'descriptions-border-item-size-@{size}-padding-vertical';

    padding: @@_descriptions-padding-vertical + 5px ~'@{descriptions-border-item-size-@{size}-padding-horizontal}';
  }
}

.@{descriptions-prefix-cls} {
  &-table {
    width: 100%;
    border-collapse: collapse;
  }

  &-table-layout-fixed table {
    table-layout: fixed;
  }

  &-title {
    font-size: @descriptions-font-size-title;
    color: @descriptions-color-title;
    font-weight: @descriptions-font-weight-title;
    line-height: @line-height-base;
    margin-bottom: @descriptions-size-default-title-margin-bottom;
  }

  &-item,
  &-item-label,
  &-item-value {
    padding: 0 4px @descriptions-item-size-default-spacing-bottom 0;
    text-align: left;
    box-sizing: border-box;
    font-size: @descriptions-size-default-font-size-text;
    line-height: @line-height-base;
  }

  &-item-label {
    color: @descriptions-color-text-label;
    font-weight: @descriptions-font-weight-text-label;
    width: 1px;
    white-space: nowrap;
  }

  &-table-layout-fixed &-item-label {
    width: auto;
  }

  &-item-value {
    color: @descriptions-color-text-value;
    font-weight: @descriptions-font-weight-text-value;
  }

  &-item-label-inline,
  &-item-value-inline {
    text-align: left;
    box-sizing: border-box;
    font-size: @descriptions-size-default-font-size-text;
    line-height: @line-height-base;
  }

  &-item-label-inline {
    color: @descriptions-color-text-label;
    font-weight: @descriptions-font-weight-text-label;
    margin-bottom: 2px;
  }

  &-item-value-inline {
    color: @descriptions-color-text-value;
    font-weight: @descriptions-font-weight-text-value;
  }

  &-layout-inline-horizontal &-item-label-inline {
    margin-right: 4px;
  }

  &-layout-inline-horizontal &-item-label-inline,
  &-layout-inline-horizontal &-item-value-inline {
    display: inline-block;
    margin-bottom: 0;
  }

  &-border&-layout-inline-vertical &-item {
    padding: @descriptions-border-item-size-default-padding-vertical + 5px
      @descriptions-border-item-size-default-padding-horizontal;
  }

  &-border &-body {
    border: @descriptions-border-width @descriptions-border-style @descriptions-color-border;
    border-radius: @descriptions-border-radius;
    overflow: hidden;
  }

  &-border &-row:not(:last-child) {
    border-bottom: @descriptions-border-width @descriptions-border-style @descriptions-color-border;
  }

  &-border:not(&-rtl) &-item,
  &-border:not(&-rtl) &-item-label,
  &-border:not(&-rtl) &-item-value {
    border-right: @descriptions-border-width @descriptions-border-style @descriptions-color-border;
  }

  &-border &-item,
  &-border &-item-label,
  &-border &-item-value {
    padding: @descriptions-border-item-size-default-padding-vertical
      @descriptions-border-item-size-default-padding-horizontal;
  }

  &-border &-item-label {
    background-color: @descriptions-border-color-bg-label;
  }

  &-border &-item-value:last-child {
    border-right: none;
  }

  &-border &-item:last-child {
    border-right: none;
  }

  &-border&-layout-vertical &-item-label:last-child {
    border-right: none;
  }

  &-layout-vertical:not(&-border) &-item-value:first-child {
    padding-left: 0;
  }

  // Size
  .descriptions-size(mini);

  .descriptions-size(small);

  .descriptions-size(medium);

  .descriptions-size(large);
}

.@{descriptions-prefix-cls}-rtl {
  direction: rtl;

  .@{descriptions-prefix-cls} {
    &-item,
    &-item-label,
    &-item-value {
      text-align: right;
      padding: 0 0 @descriptions-item-size-default-spacing-bottom 4px;
    }

    &-item-label-inline,
    &-item-value-inline {
      text-align: right;
    }
  }

  &.@{descriptions-prefix-cls} {
    &-layout-inline-horizontal {
      .@{descriptions-prefix-cls}-item-label-inline {
        margin-right: 0;
        margin-left: 4px;
      }
    }

    &-border {
      .@{descriptions-prefix-cls}-item,
      .@{descriptions-prefix-cls}-item-label,
      .@{descriptions-prefix-cls}-item-value {
        border-left: @descriptions-border-width @descriptions-border-style
          @descriptions-color-border;
        padding: @descriptions-border-item-size-default-padding-vertical
          @descriptions-border-item-size-default-padding-horizontal;
      }

      .@{descriptions-prefix-cls}-item:last-child,
      .@{descriptions-prefix-cls}-item-value:last-child {
        border-left: none;
      }

      &.@{descriptions-prefix-cls}-layout-vertical {
        .@{descriptions-prefix-cls}-item-label:last-child {
          border-left: none;
        }
      }
    }

    &-layout-vertical:not(&-border) {
      .@{descriptions-prefix-cls}-item-value:first-child {
        padding-right: 0;
      }
    }
  }
}


/********** Descriptions end ***************/
    


/********** Divider  ***************/



@divider-margin-horizontal: @spacing-6;
@divider-margin-vertical: @spacing-8;
@divider-margin-vertical_text: @spacing-8;
@divider-margin-text: @spacing-7;
@divider-position-text-left: @spacing-9;
@divider-position-text-right: @spacing-9;
@divider-font-size: @font-size-body-3;
@divider-font-weight: @font-weight-500;

@divider-size: 1px;
@divider-line-style: @border-solid;
@divider-color-bg: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@divider-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');


@divider-prefix-cls: ~'@{prefix}-divider';

.@{divider-prefix-cls} {
  &-horizontal {
    position: relative;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin: @divider-margin-vertical 0;
    border-bottom: @divider-size @divider-line-style @divider-color-bg;
    clear: both;

    &.@{divider-prefix-cls}-with-text {
      margin: @divider-margin-vertical_text 0;
      display: flex;
      align-items: center;
      border-bottom-width: 0;
      border-bottom-style: @divider-line-style;

      &::before,
      &::after {
        content: '';
        height: 0;
        flex: 1;
        border-bottom: @divider-size;
        border-bottom-style: inherit;
        border-bottom-color: inherit;
      }
    }

    &.@{divider-prefix-cls}-with-text-left:before {
      flex-basis: @divider-position-text-left;
      flex-grow: 0;
    }

    &.@{divider-prefix-cls}-with-text-right:after {
      flex-basis: @divider-position-text-right;
      flex-grow: 0;
    }
  }

  &-vertical {
    display: inline-block;
    min-width: 1px;
    max-width: 1px;
    height: 1em;
    margin: 0 @divider-margin-horizontal;
    border-left: @divider-size @divider-line-style @divider-color-bg;
    vertical-align: middle;
  }

  // 仅水平分割线才支持文字，只考虑水平情况
  &-text {
    box-sizing: border-box;
    padding: 0 @divider-margin-text;
    font-size: @divider-font-size;
    font-weight: @divider-font-weight;
    line-height: 2;
    color: @divider-color-text;
  }
}


/********** Divider end ***************/
    


/********** Drawer  ***************/



@drawer-size-header-height: @size-12;
@drawer-margin-footer-button-left: @spacing-6;
@drawer-font-header-size: @font-size-title-1;
@drawer-font-header-weight: @font-weight-500;
@drawer-padding-horizontal: @spacing-7;
@drawer-padding-footer-vertical: @spacing-7;
@drawer-padding-content-vertical: @spacing-6;

@drawer-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@drawer-color-header-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@drawer-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-1');

@drawer-position-close-icon-right: @spacing-7;
@drawer-font-size-close-icon: @size-3;


@drawer-prefix-cls: ~'@{prefix}-drawer';

.@{drawer-prefix-cls}-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(~'@{arco-cssvars-prefix}-color-mask-bg');
}

.@{drawer-prefix-cls}-no-mask {
  pointer-events: none;

  .@{drawer-prefix-cls} {
    pointer-events: auto;
  }
}

.@{drawer-prefix-cls}-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: @z-index-drawer;

  &-hide {
    display: none;
  }
}

.@{drawer-prefix-cls} {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(~'@{arco-cssvars-prefix}-color-bg-3');
  line-height: @line-height-base;

  &-wrapper {
    position: relative;
    height: 100%;
  }

  &-fixed {
    position: fixed;
    top: 0;
    z-index: @z-index-drawer;
  }

  &-inner {
    height: 100%;
    overflow: hidden;
  }

  &-scroll {
    overflow: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  &-header {
    height: @drawer-size-header-height;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 @drawer-padding-horizontal;
    border-bottom: @border-1 solid @drawer-color-border;
    flex-shrink: 0;

    &-title {
      font-size: @drawer-font-header-size;
      font-weight: @drawer-font-header-weight;
      color: @drawer-color-header-text;
      text-align: left;
    }
  }

  &-footer {
    box-sizing: border-box;
    padding: @drawer-padding-footer-vertical @drawer-padding-horizontal;
    border-top: @border-1 solid @drawer-color-border;
    text-align: right;
    flex-shrink: 0;

    > .@{prefix}-btn {
      margin-left: @drawer-margin-footer-button-left;
    }
  }

  & &-close-icon {
    position: absolute;
    right: @drawer-position-close-icon-right +
      ((@icon-hover-size-default-height - @drawer-font-size-close-icon) / 2);
    top: ((@drawer-size-header-height - @drawer-font-size-close-icon) / 2);
    cursor: pointer;
    z-index: 1;
    font-size: @drawer-font-size-close-icon;
    color: @drawer-color-header-text;
  }

  &-content {
    flex: 1;
    height: 100%;
    padding: @drawer-padding-content-vertical @drawer-padding-horizontal;
    color: @drawer-color-content-text;
    box-sizing: border-box;
    position: relative;
    overflow: auto;

    // &-inner {
    //   max-height: 100%;
    //   overflow: auto;
    //   padding: 0 28px;
    //   position: relative;
    //   box-sizing: border-box;
    // }
  }
}

.@{drawer-prefix-cls}-rtl {
  direction: rtl;

  .@{drawer-prefix-cls}-close-icon {
    right: initial;
    left: @drawer-position-close-icon-right +
      ((@icon-hover-size-default-height - @drawer-font-size-close-icon) / 2);
  }

  .@{drawer-prefix-cls}-footer {
    text-align: left;
  }
}


/********** Drawer end ***************/
    


/********** Dropdown  ***************/

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}



/**********************************************
 * Popup Box
 **********************************************/
@dropdown-max-height: @size-50;
@dropdown-border-radius: @radius-medium;
@dropdown-padding-vertical: @spacing-2;
@dropdown-font-size: @font-size-body-3;
@dropdown-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@dropdown-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
@dropdown-box-shadow: @shadow2-down;

/**********************************************
 * Popup Options
 * status: default / disabled / selected / hover
 **********************************************/
@dropdown-option-height: @size-9;
@dropdown-option-padding-horizontal: @spacing-6;
@dropdown-option-font-weight_selected: @font-weight-500;

@dropdown-option-color-bg_default: @color-transparent;
@dropdown-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@dropdown-option-color-bg_selected: @color-transparent;
@dropdown-option-color-bg_disabled: @color-transparent;

@dropdown-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@dropdown-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@dropdown-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-text-1');
@dropdown-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// option group title
@dropdown-group-title-height: @size-5;
@dropdown-group-title-padding-horizontal: @spacing-6;
@dropdown-group-title-margin-top: @spacing-4;
@dropdown-group-title-font-size: @font-size-body-1;
@dropdown-group-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');

@dropdown-margin-left-suffix-icon: @spacing-6;

/**********************************************
 * Theme dark
 **********************************************/
@dropdown-dark-color-bg: var(~'@{arco-cssvars-prefix}-color-menu-dark-bg');
@dropdown-dark-color-border: @dropdown-dark-color-bg;

@dropdown-dark-option-color-bg_default: @color-transparent;
@dropdown-dark-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');
@dropdown-dark-option-color-bg_selected: @color-transparent;
@dropdown-dark-option-color-bg_disabled: @color-transparent;

@dropdown-dark-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-4');
@dropdown-dark-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-4');
@dropdown-dark-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-white');
@dropdown-dark-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-2');

@dropdown-dark-group-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');


@dropdown-prefix-cls: ~'@{prefix}-dropdown';

.@{dropdown-prefix-cls} {
  &-menu {
    position: relative;
    box-sizing: border-box;
    max-height: @dropdown-max-height;
    padding: @dropdown-padding-vertical 0;
    border: 1px solid @dropdown-color-border;
    border-radius: @dropdown-border-radius;
    background-color: @dropdown-color-bg;
    box-shadow: @dropdown-box-shadow;
    overflow: auto;

    &-hidden {
      display: none;
    }

    &-item,
    &-pop-header {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      height: @dropdown-option-height;
      padding: 0 @dropdown-option-padding-horizontal;
      font-size: @dropdown-font-size;
      line-height: $height;
      text-align: left;
      cursor: pointer;
      // 避免 Trigger 的小箭头位于其上方
      z-index: 1;
      .text-ellipsis();

      // default
      color: @dropdown-option-color-text_default;
      background-color: @dropdown-option-color-bg_default;

      // selected
      &.@{dropdown-prefix-cls}-menu-selected {
        color: @dropdown-option-color-text_selected;
        background-color: @dropdown-option-color-bg_selected;
        font-weight: @dropdown-option-font-weight_selected;
        transition: all @transition-duration-1 @transition-timing-function-linear;
      }

      // hover
      &:hover {
        color: @dropdown-option-color-text_hover;
        background-color: @dropdown-option-color-bg_hover;
      }

      // focus by Tab
      &:focus-visible {
        box-shadow: 0 0 0 2px @color-primary-6 inset;
      }

      // hotkey active
      &.@{dropdown-prefix-cls}-menu-active {
        box-shadow: 0 0 0 1px @color-primary-6 inset;
      }

      // disabled
      &.@{dropdown-prefix-cls}-menu-disabled {
        color: @dropdown-option-color-text_disabled;
        background-color: @dropdown-option-color-bg_disabled;
        cursor: not-allowed;
      }

      // overwrite color of links
      a,
      a:hover,
      a:focus,
      a:active {
        color: inherit;
        cursor: inherit;
        text-decoration: none;
      }

      > a:only-child::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
    }

    &-pop-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .@{dropdown-prefix-cls}-menu-icon-suffix {
        margin-left: @dropdown-margin-left-suffix-icon;
      }
    }

    &-group {
      &:first-child &-title {
        margin-top: @dropdown-group-title-margin-top - @dropdown-padding-vertical;
      }
    }

    &-group-title {
      margin-top: @dropdown-group-title-margin-top;
      box-sizing: border-box;
      width: 100%;
      padding: 0 @dropdown-group-title-padding-horizontal;
      line-height: @dropdown-group-title-height;
      font-size: @dropdown-group-title-font-size;
      color: @dropdown-group-title-color-text;
      .text-ellipsis();
    }
  }

  &-menu-dark {
    border-color: @dropdown-dark-color-border;
    background-color: @dropdown-dark-color-bg;

    .@{dropdown-prefix-cls}-menu-item,
    .@{dropdown-prefix-cls}-menu-pop-header {
      // default
      color: @dropdown-dark-option-color-text_default;
      background-color: @dropdown-dark-option-color-bg_default;

      // selected
      &.@{dropdown-prefix-cls}-menu-selected {
        color: @dropdown-dark-option-color-text_selected;
        background-color: @dropdown-dark-option-color-bg_selected;

        &:hover {
          color: @dropdown-dark-option-color-text_selected;
        }
      }

      // hover
      &:hover {
        color: @dropdown-dark-option-color-text_hover;
        background-color: @dropdown-dark-option-color-bg_hover;
      }

      // disabled
      &.@{dropdown-prefix-cls}-menu-disabled {
        color: @dropdown-dark-option-color-text_disabled;
        background-color: @dropdown-dark-option-color-bg_disabled;
      }
    }

    .@{dropdown-prefix-cls}-menu-group-title {
      color: @dropdown-dark-group-title-color-text;
    }
  }

  &-menu-pop-trigger {
    // 下拉框的 menu 弹出不需要小箭头
    .@{prefix}-trigger-arrow {
      display: none;
    }
  }

  &-menu + .@{prefix}-trigger-arrow {
    background-color: @dropdown-color-bg;
  }
}

.@{dropdown-prefix-cls}-menu-rtl {
  .@{dropdown-prefix-cls}-menu {
    &-item,
    &-pop-header {
      text-align: right;

      .@{dropdown-prefix-cls}-menu-icon-suffix {
        margin-left: 0;
        margin-right: @dropdown-margin-left-suffix-icon;
      }
    }
  }
}


/********** Dropdown end ***************/
    


/********** Empty  ***************/


@empty-spacing-padding: @spacing-5;
@empty-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-gray-5'));;
@empty-color-text:  rgb(var(~'@{arco-cssvars-prefix}-gray-5'));;
@empty-font-size-image: @size-12;
@empty-font-size-text: @font-size-body-3;
@empty-spacing-image-margin-bottom: @spacing-2;
@empty-size-img-height: @size-20;


@empty-prefix-cls: ~'@{prefix}-empty';

.@{empty-prefix-cls} {
  width: 100%;
  padding: @empty-spacing-padding 0;
  box-sizing: border-box;

  & &-wrapper {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: @empty-color-icon;

    .@{empty-prefix-cls}-image {
      font-size: @empty-font-size-image;
      line-height: 1;
      margin-bottom: @empty-spacing-image-margin-bottom;
    }

    img {
      height: @empty-size-img-height;
    }
  }

  & &-description {
    color: @empty-color-text;
    font-size: @empty-font-size-text;
  }
}


/********** Empty end ***************/
    


/********** Form  ***************/



@form-size-mini-margin-item-bottom: @spacing-7;
@form-size-small-margin-item-bottom: @spacing-8;
@form-size-default-margin-item-bottom: @spacing-8;
@form-size-large-margin-item-bottom: @spacing-8;

@form-size-mini-size-item-height: @size-mini;
@form-size-small-size-item-height: @size-small;
@form-size-default-size-item-height: @size-default;
@form-size-large-size-item-height: @size-large;

@form-size-mini-font-label-size: @font-size-body-1;
@form-size-small-font-label-size: @font-size-body-3;
@form-size-large-font-label-size: @font-size-body-3;
@form-size-default-font-label-size: @font-size-body-3;
@form-font-extra-text-size: @font-size-body-1;
@form-font-error-text-size: @font-size-body-1;

@form-margin-label-right: @spacing-7;
@form-margin-extra-bottom: @spacing-2;
@form-margin-extra-top: @spacing-2;
@form-inline-margin-item-right: @spacing-9;
@form-inline-margin-item-bottom: @spacing-4;
@form-vertical-margin-label-bottom: @spacing-4;

@form-color-extra-text: var(~'@{arco-cssvars-prefix}-color-text-3');

@form-color-text-label: var(~'@{arco-cssvars-prefix}-color-text-2');
@form-color-text-tooltip: var(~'@{arco-cssvars-prefix}-color-text-4');
@form-margin-tooltip-left: @spacing-2;

@form-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@form-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@form-color-bg_warning_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@form-color-border_warning: @color-transparent;
@form-color-border_warning_focus: @color-warning-6;
@form-color-border_warning_hover: @color-transparent;
@form-size-shadow_warning_focus: @shadow-distance-none;
@form-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');

@form-color-bg_success: var(~'@{arco-cssvars-prefix}-color-fill-2');
@form-color-bg_success_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@form-color-bg_success_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@form-color-border_success: @color-transparent;
@form-color-border_success_focus: @color-success-6;
@form-color-border_success_hover: @color-transparent;
@form-size-shadow_success_focus: @shadow-distance-none;
@form-color-shadow_success_focus: var(~'@{arco-cssvars-prefix}-color-success-light-2');

@form-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@form-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@form-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@form-color-border_error: @color-transparent;
@form-color-border_error_focus: @color-danger-6;
@form-color-border_error_hover: @color-transparent;
@form-size-shadow_error_focus: @shadow-distance-none;
@form-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');

@form-color-bg_validating: var(~'@{arco-cssvars-prefix}-color-fill-2');
@form-color-bg_validating_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@form-color-bg_validating_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@form-color-border_validating: @color-transparent;
@form-color-border_validating_focus: @color-primary-6;
@form-color-border_validating_hover: @color-transparent;
@form-size-shadow_validating_focus: @shadow-distance-none;
@form-color-shadow_validating_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');

@form-color-tip-text_success: @color-success-6;
@form-color-tip-icon-text_success: @color-success-6;
@form-color-tip-text_error: @color-danger-6;
@form-color-tip-icon-text_error: @color-danger-6;
@form-color-tip-text_warning: @color-warning-6;
@form-color-tip-icon-text_warning: @color-warning-6;
@form-color-tip-text_validating: @color-primary-6;
@form-color-tip-icon-text_validating: @color-primary-6;


@form-prefix-cls: ~'@{prefix}-form';

.@{form-prefix-cls} {
  width: 100%;
  display: flex;
  flex-direction: column;

  &-inline {
    flex-flow: row wrap;
  }

  &-inline &-item {
    width: auto;
    margin-bottom: @form-inline-margin-item-bottom;
  }

  &-item {
    width: 100%;
    margin-bottom: @form-size-default-margin-item-bottom;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    &&-hidden {
      display: none;
    }

    > .@{form-prefix-cls}-label-item {
      padding-right: @form-margin-label-right;
    }

    &&-error {
      margin-bottom: 0;
    }
  }

  &-item-wrapper-flex.@{prefix}-col {
    flex: 1;
  }

  /** size style **/

  &-size-mini &-label-item {
    line-height: @form-size-mini-size-item-height;
    font-size: @form-size-mini-font-label-size;

    > label {
      font-size: @form-size-mini-font-label-size;
    }
  }

  &-size-mini &-item-control {
    min-height: @form-size-mini-size-item-height;
  }

  &-size-small &-label-item {
    line-height: @form-size-small-size-item-height;

    > label {
      font-size: @form-size-small-font-label-size;
    }
  }

  &-size-small &-item-control {
    min-height: @form-size-small-size-item-height;
  }

  &-size-large &-label-item {
    line-height: @form-size-large-size-item-height;

    > label {
      font-size: @form-size-large-font-label-size;
    }
  }

  &-size-large &-item-control {
    min-height: @form-size-large-size-item-height;
  }

  &-extra {
    font-size: @form-font-extra-text-size;
    color: @form-color-extra-text;
    margin-top: @form-margin-extra-top;
  }

  &-message {
    font-size: @form-font-error-text-size;
    color: @form-color-tip-text_error;
    min-height: @form-size-default-margin-item-bottom;
    line-height: @form-size-default-margin-item-bottom;

    &-help {
      color: @form-color-extra-text;
    }

    + .@{form-prefix-cls}-extra {
      margin-bottom: @form-margin-extra-bottom;
      margin-top: 0;
    }
  }

  &-layout-vertical {
    display: block;

    > .@{form-prefix-cls}-label-item {
      line-height: @line-height-base;
      white-space: normal;
      text-align: left;
      padding: 0;
      margin-bottom: @form-vertical-margin-label-bottom;
    }
  }

  &-layout-inline {
    margin-right: @form-inline-margin-item-right;
  }

  &-label-item {
    text-align: right;
    white-space: nowrap;
    line-height: @form-size-default-size-item-height;

    &-flex.@{prefix}-col {
      flex: 0;

      > label {
        white-space: nowrap;
      }
    }

    > label {
      font-size: @form-size-default-font-label-size;
      white-space: normal;
      color: @form-color-text-label;
    }

    .@{form-prefix-cls}-item-tooltip {
      margin-left: @form-margin-tooltip-left;
      color: @form-color-text-tooltip;
    }

    .@{form-prefix-cls}-item-symbol {
      color: @color-danger-6;
      font-size: @font-size-body-1;
      line-height: 1;

      svg {
        transform: scale(0.5);
      }
    }
  }

  &-label-item-left {
    text-align: left;
  }

  &-item-control {
    display: flex;
    align-items: center;
    min-height: @form-size-default-size-item-height;
    width: 100%;

    &-children {
      width: 100%;
      flex: 1;
    }

    &-wrapper {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /** slider display: block **/

  .@{prefix}-slider {
    display: block;
  }
}

// Copied from Select
.select-color (@prefixCls, @status) {
  .@{prefixCls}:not(.@{prefixCls}-disabled) {
    .@{prefixCls}-view {
      background-color: ~'@{form-color-bg_@{status}}';
      border-color: ~'@{form-color-border_@{status}}';
    }

    &:hover {
      .@{prefixCls}-view {
        background-color: ~'@{form-color-bg_@{status}_hover}';
        border-color: ~'@{form-color-border_@{status}_hover}';
      }
    }
  }

  .@{prefixCls}:not(.@{prefixCls}-disabled).@{prefixCls}-focused {
    .@{prefixCls}-view {
      background-color: ~'@{form-color-bg_@{status}_focus}';
      border-color: ~'@{form-color-border_@{status}_focus}';
      box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
    }
  }
}

.picker(@status) {
  .@{prefix}-picker:not(.@{prefix}-picker-disabled) {
    border-color: ~'@{form-color-border_@{status}}';
    background-color: ~'@{form-color-bg_@{status}}';

    &:hover {
      border-color: ~'@{form-color-border_@{status}_hover}';
      background-color: ~'@{form-color-bg_@{status}_hover}';
    }
  }

  .@{prefix}-picker-focused:not(.@{prefix}-picker-disabled) {
    &,
    &:hover {
      border-color: ~'@{form-color-border_@{status}_focus}';
      background-color: ~'@{form-color-bg_@{status}_focus}';
      box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
    }
  }
}

// Copied from InputTag
.input-tag-color(@status) {
  .@{prefix}-input-tag {
    background-color: ~'@{form-color-bg_@{status}}';
    border-color: ~'@{form-color-border_@{status}}';

    &:hover {
      border-color: ~'@{form-color-border_@{status}_hover}';
      background-color: ~'@{form-color-bg_@{status}_hover}';
    }

    &.@{prefix}-input-tag-focus when not (@status = disabled) {
      border-color: ~'@{form-color-border_@{status}_focus}';
      background-color: ~'@{form-color-bg_@{status}_focus}';
      box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
    }
  }
}

.validate-status (@status) {
  /** input， input number **/
  // copy from input

  & {
    // 禁用优先级u高于status
    .@{prefix}-input:not(.@{prefix}-input-disabled),
    .@{prefix}-input-inner-wrapper:not(.@{prefix}-input-inner-wrapper-disabled),
    .@{prefix}-textarea:not(.@{prefix}-textarea-disabled) {
      .@{prefix}-form-item-status-@{status} & {
        border-color: ~'@{form-color-border_@{status}}';
        background-color: ~'@{form-color-bg_@{status}}';

        &:hover {
          border-color: ~'@{form-color-border_@{status}_hover}';
          background-color: ~'@{form-color-bg_@{status}_hover}';
        }
      }
    }

    .@{prefix}-input-inner-wrapper,
    .@{prefix}-textarea {
      .@{prefix}-form-item-status-@{status} &&-focus,
      .@{prefix}-form-item-status-@{status} &&-focus:hover {
        border-color: ~'@{form-color-border_@{status}_focus}';
        background-color: ~'@{form-color-bg_@{status}_focus}';
        box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
      }
    }

    // 单独input ，没有前后缀
    .@{prefix}-input {
      .@{prefix}-form-item-status-@{status} &:focus,
      .@{prefix}-form-item-status-@{status} &:focus:hover {
        border-color: ~'@{form-color-border_@{status}_focus}';
        background-color: ~'@{form-color-bg_@{status}_focus}';
        box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
      }
    }

    // 前后缀 或者清楚图标时，input不设置背景色
    .@{prefix}-form-item-status-@{status} .@{prefix}-input-inner-wrapper .@{prefix}-input {
      background: none;
      box-shadow: none;

      &:hover {
        background: none;
        box-shadow: none;
      }
    }

    .@{prefix}-form-item-status-@{status} {
      /** select **/
      .select-color(~'@{prefix}-select', @status);

      /** cascader **/
      .select-color(~'@{prefix}-cascader', @status);

      /** treeselect **/
      .select-color(~'@{prefix}-tree-select', @status);

      /** Datepicker **/
      .picker(@status);

      /** InputTag **/
      .input-tag-color(@status);
    }
  }

  .@{prefix}-form-item-status-@{status} {
    .@{form-prefix-cls}-message-help {
      color: ~'@{form-color-tip-text_@{status}}';

      .@{form-prefix-cls}-message-help-warning {
        color: @form-color-tip-text_warning;
      }
    }
  }

  .@{form-prefix-cls}-item-feedback-@{status} {
    color: ~'@{form-color-tip-icon-text_@{status}}';
  }
}
.validate-status(validating);

.validate-status(success);

.validate-status(warning);

.validate-status(error);

.@{form-prefix-cls}-item-control-children {
  position: relative;
}

.@{form-prefix-cls}-item-feedback {
  position: absolute;
  right: 9px;
  top: 50%;
  font-size: 14px;
  transform: translateY(-50%);

  .@{prefix}-icon-loading {
    font-size: 12px;
  }
}

.form-item-has-feedback(@rtl) {
  @direction: if(@rtl = ~'rtl', left, right);

  .select-view(@prefix) {
    .@{prefix}.@{prefix}-multiple .@{prefix}-view,
    .@{prefix}.@{prefix}-single .@{prefix}-view {
      padding-@{direction}: 28px;
    }

    .@{prefix}.@{prefix}-multiple .@{prefix}-suffix {
      padding-@{direction}: 0;
    }
  }

  .@{prefix}-input,
  .@{prefix}-input-inner-wrapper,
  .@{prefix}-textarea {
    padding-@{direction}: 28px;
  }

  .@{prefix}-input-number-mode-embed .@{prefix}-input-number-step-layer {
    @direction: 24px;
  }

  .select-view(~'@{prefix}-select');
  .select-view(~'@{prefix}-cascader');
  .select-view(~'@{prefix}-tree-select');

  // datepicker timepicker
  .@{prefix}-picker {
    padding-@{direction}: 28px;
  }

  .@{prefix}-picker-suffix {
    .@{prefix}-picker-suffix-icon,
    .@{prefix}-picker-clear-icon {
      margin-right: 0;
      margin-left: 0;
    }
  }

  // InputTag
  .@{prefix}-input-tag {
    padding-@{direction}: 23px;

    &-suffix {
      padding-@{direction}: 0;
    }
  }
}

.@{form-prefix-cls}-item-has-feedback {
  .form-item-has-feedback(ltr);
}

// rtl

.@{form-prefix-cls}-rtl .@{form-prefix-cls}-item-feedback {
  right: unset;
  left: 9px;
}

.@{form-prefix-cls}-rtl .@{form-prefix-cls}-item-has-feedback {
  .form-item-has-feedback(rtl);
}


.formblink-enter,
.formblink-appear {
  opacity: 0;
}

.formblink-enter-active,
.formblink-appear-active {
  opacity: 1;
  transition: opacity @transition-duration-3 @transition-timing-function-linear;
}

.formblink-enter-done {
  animation: ~'@{prefix}-form-blink' @transition-duration-5 @transition-timing-function-linear;
}

@keyframes ~'@{prefix}-form-blink' {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

.@{form-prefix-cls}-rtl {
  direction: rtl;

  .@{form-prefix-cls} {
    &-item {
      > .@{form-prefix-cls}-label-item {
        padding-left: @form-margin-label-right;
        padding-right: 0;
      }
    }

    &-label-item {
      text-align: left;
    }
  }

  .@{form-prefix-cls}-layout-vertical {
    > .@{form-prefix-cls}-label-item {
      text-align: right;
    }
  }

  .@{form-prefix-cls}-layout-inline {
    margin-right: 0;
    margin-left: @form-inline-margin-item-right;
  }
}


/********** Form end ***************/
    


/********** Grid  ***************/



@row-prefix-cls: ~'@{prefix}-row';

.@{row-prefix-cls} {
  display: flex;
  flex-flow: row wrap;

  &-align-start {
    align-items: flex-start;
  }

  &-align-center {
    align-items: center;
  }

  &-align-end {
    align-items: flex-end;
  }

  &-justify-start {
    justify-content: flex-start;
  }

  &-justify-center {
    justify-content: center;
  }

  &-justify-end {
    justify-content: flex-end;
  }

  &-justify-space-around {
    justify-content: space-around;
  }

  &-justify-space-between {
    justify-content: space-between;
  }

  &-rtl {
    direction: rtl;
  }
}



@col-prefix-cls: ~'@{prefix}-col';

.@{col-prefix-cls} {
  position: relative;
  box-sizing: border-box;

  &-rtl {
    direction: rtl;
  }

  .span(@span, @adaptation) when (@span >= 0) {
    .span((@span - 1), @adaptation);

    @usedAdaptation: if(@adaptation = '', ~'', ~'-@{adaptation}');

    &@{usedAdaptation}-@{span} {
      .col-style(@span) when (@span > 0) {
        display: block;
        width: (100% / 24) * @span;
        flex: 0 0 (100% / 24) * @span;
      }

      .col-style(@span) when (@span = 0) {
        display: none;
      }

      .col-style(@span);
    }
  }

  .offset(@offset, @adaptation) when (@offset >= 0) {
    .offset((@offset - 1), @adaptation);

    @usedAdaptation: if(@adaptation = '', ~'', ~'-@{adaptation}');

    &@{usedAdaptation}-offset-@{offset} {
      margin-left: (100% / 24) * @offset;
    }

    &@{usedAdaptation}-offset-@{offset}&-rtl {
      margin-left: 0;
      margin-right: (100% / 24) * @offset;
    }
  }

  .order(@order, @adaptation) when (@order >= 0) {
    .order((@order - 1), @adaptation);

    @usedAdaptation: if(@adaptation = '', ~'', ~'-@{adaptation}');

    &@{usedAdaptation}-order-@{order} {
      order: @order;
    }
  }

  .pull(@count, @adaptation) when (@count >= 0) {
    .pull((@count - 1), @adaptation);

    @usedAdaptation: if(@adaptation = '', ~'', ~'-@{adaptation}');

    &@{usedAdaptation}-pull-@{count} {
      right: (100% / 24) * @count;
    }

    &@{usedAdaptation}-pull-@{count}&-rtl {
      right: unset;
      left: (100% / 24) * @count;
    }
  }

  .push(@count, @adaptation) when (@count >= 0) {
    .push((@count - 1), @adaptation);

    @usedAdaptation: if(@adaptation = '', ~'', ~'-@{adaptation}');

    &@{usedAdaptation}-push-@{count} {
      left: (100% / 24) * @count;
    }

    &@{usedAdaptation}-push-@{count}&-rtl {
      left: unset;
      right: (100% / 24) * @count;
    }
  }

  .span(24, '');
  .offset(23, '');
  .order(24, '');
  .pull(24, '');
  .push(24, '');

  // adaptation
  .span(24, xs);
  .offset(23, xs);
  .order(24, xs);
  .pull(24, xs);
  .push(24, xs);

  @media (min-width: 576px) {
    .span(24, sm);
    .offset(23, sm);
    .order(24, sm);
    .pull(24, sm);
    .push(24, sm);
  }

  @media (min-width: 768px) {
    .span(24, md);
    .offset(23, md);
    .order(24, md);
    .pull(24, md);
    .push(24, md);
  }

  @media (min-width: 992px) {
    .span(24, lg);
    .offset(23, lg);
    .order(24, lg);
    .pull(24, lg);
    .push(24, lg);
  }

  @media (min-width: 1200px) {
    .span(24, xl);
    .offset(23, xl);
    .order(24, xl);
    .pull(24, xl);
    .push(24, xl);
  }

  @media (min-width: 1600px) {
    .span(24, xxl);
    .offset(23, xxl);
    .order(24, xxl);
    .pull(24, xxl);
    .push(24, xxl);
  }

  @media (min-width: 2000px) {
    .span(24, xxxl);
    .offset(23, xxxl);
    .order(24, xxxl);
    .pull(24, xxxl);
    .push(24, xxxl);
  }
}



@grid-prefix-cls: ~'@{prefix}-grid';

.@{grid-prefix-cls} {
  display: grid;

  &-rtl {
    direction: rtl;
  }
}



/********** Grid end ***************/
    


/********** Input  ***************/

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}



/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/

.input-status(@status) {
  // 禁用优先级u高于status
  &-@{status} {
    border-color: ~'@{input-color-border_@{status}}';
    background-color: ~'@{input-color-bg_@{status}}';

    &:hover {
      border-color: ~'@{input-color-border_@{status}_hover}';
      background-color: ~'@{input-color-bg_@{status}_hover}';
    }
  }

  // 前后缀或者清楚图标时，input不设置背景色
  &-@{status} .@{prefix}-input {
    background: none;
    box-shadow: none;

    &:hover {
      background: none;
      box-shadow: none;
    }
  }

  &-@{status}&-focus {
    &,
    &:hover {
      border-color: ~'@{input-color-border_@{status}_focus}';
      background-color: ~'@{input-color-bg_@{status}_focus}';
      box-shadow: 0 0 0 ~'@{input-size-shadow_@{status}_focus}' ~'@{input-color-shadow_@{status}_focus}';
    }
  }

  // 单独input ，没有前后缀
  &-@{status} {
    &:focus,
    &:focus:hover {
      border-color: ~'@{input-color-border_@{status}_focus}';
      background-color: ~'@{input-color-bg_@{status}_focus}';
      box-shadow: 0 0 0 ~'@{input-size-shadow_@{status}_focus}' ~'@{input-color-shadow_@{status}_focus}';
    }
  }
}


@input-prefix-cls: ~'@{prefix}-input';

.get-padding(@input-size-height, @input-font-size) {
  padding-top: (
    round(
      ((@input-size-height - @input-border-width * 2 - @line-height-base * @input-font-size) / 2)
    )
  );
  padding-bottom: round(
    ((@input-size-height - @input-border-width * 2 - @line-height-base * @input-font-size) / 2)
  );
}

.disabled-style() {
  background-color: @input-color-bg_disabled;
  cursor: not-allowed;
  color: @input-color-text_disabled;
  -webkit-text-fill-color: @input-color-text_disabled;
  border-color: @input-color-border_disabled;

  &:hover {
    border-color: @input-color-border_disabled;
    background-color: @input-color-bg_disabled;
    color: @input-color-text_disabled;
  }

  &::placeholder {
    color: @input-color-text_disabled;
  }
}

.input-style() {
  outline: none;
  appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
  width: 100%;
  border-radius: @input-border-radius;
  color: @input-color-text;
  padding-left: @input-padding-horizontal;
  padding-right: @input-padding-horizontal;
  font-size: @input-size-default-font-size;
  box-sizing: border-box;
  transition: color @transition-duration-1 @transition-timing-function-linear,
    border-color @transition-duration-1 @transition-timing-function-linear,
    background-color @transition-duration-1 @transition-timing-function-linear;
  border: @input-border-width solid @input-color-border;
  background-color: @input-color-bg;

  &::placeholder {
    color: @input-color-placeholder-text;
  }

  &:hover {
    background-color: @input-color-bg_hover;
    border-color: @input-color-border_hover;
  }

  &:focus,
  &&-focus {
    border-color: @input-color-border_focus;
    background-color: @input-color-bg_focus;
    box-shadow: 0 0 0 @input-size-shadow_focus @input-color-shadow_focus;
  }

  .input-status(error);
  .input-status(warning);
}

.@{input-prefix-cls} {
  .get-padding(@input-size-default-height, @input-size-default-font-size);

  line-height: @line-height-base;
  .input-style();

  &-autowidth {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;

    &:hover {
      text-overflow: unset;
    }
  }

  // 禁用样式
  &-disabled {
    .disabled-style();
  }

  input:disabled {
    color: @input-color-text_disabled;
    opacity: 1;
    -webkit-text-fill-color: @input-color-text_disabled;
  }

  &-word-limit {
    font-size: @input-font-tip-size;
    color: @input-color-tip-text;
    padding-left: @input-padding-word-limit-left;

    &-error {
      color: @input-color-border_error_focus;
    }
  }
  // 不同尺寸
  .size-height();
}

// 清除icon
.@{input-prefix-cls}-clear-icon {
  font-size: @input-size-icon-clear;
  cursor: pointer;
  color: @input-color-icon-clear;

  &:focus-visible::before {
    box-shadow: 0 0 0 2px @input-color-border_focus;
  }

  > svg {
    transition: color @transition-duration-1 @transition-timing-function-linear;
    position: relative;
  }
}

.@{input-prefix-cls}-inner-wrapper {
  .input-style();

  display: inline-flex;
  width: 100%;
  position: relative;
  align-items: center;

  .@{input-prefix-cls} {
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    border: none;
    background: none;
  }

  .@{input-prefix-cls}:hover,
  .@{input-prefix-cls}:focus {
    background: none;
    box-shadow: none;
  }

  // 有前缀
  &-has-prefix > .@{input-prefix-cls}-clear-wrapper .@{input-prefix-cls},
  &-has-prefix > .@{input-prefix-cls} {
    padding-left: @input-padding-horizontal;
  }

  .@{input-prefix-cls}-group-prefix,
  .@{input-prefix-cls}-group-suffix {
    user-select: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    height: 100%;

    > svg {
      font-size: @input-size-default-icon-suffix-size;
    }
  }

  .@{input-prefix-cls}-group-prefix {
    color: @input-color-prefix-text;
  }

  .@{input-prefix-cls}-group-suffix {
    color: @input-color-suffix-text;
  }

  &-disabled {
    // 禁用样式
    .disabled-style();

    .@{input-prefix-cls}-group-prefix,
    .@{input-prefix-cls}-group-suffix {
      color: inherit;
    }
  }

  .@{input-prefix-cls}-clear-icon {
    visibility: hidden;
  }

  &:hover {
    .@{input-prefix-cls}-clear-icon {
      visibility: visible;

      & ~ .@{input-prefix-cls}-group-suffix {
        margin-left: 4px;
      }
    }
  }

  &:not(&-focus) .@{input-prefix-cls}-clear-icon:hover::before {
    background-color: @input-color-icon-clear-bg_hover;
  }
}

.@{input-prefix-cls}-group-wrapper-autowidth {
  .@{input-prefix-cls}-group {
    display: flex;
    align-items: stretch;

    &-addbefore,
    &-after {
      display: inline-flex;
      height: unset;
      flex-shrink: 0;
      flex-grow: 0;
      width: auto;
      align-items: center;
    }
  }

  .@{input-prefix-cls}-inner-wrapper {
    overflow: hidden;
  }

  .@{input-prefix-cls} {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;

    &:hover {
      text-overflow: unset;
    }
  }
}

.@{input-prefix-cls}-group {
  display: table;
  width: 100%;
  height: 100%;
  // fix issue: https://github.com/arco-design/arco-design/issues/2310
  line-height: 0;

  > .@{input-prefix-cls}-inner-wrapper,
  > .@{input-prefix-cls} {
    border-radius: 0;

    &-focus {
      border-radius: @input-border-radius;
    }
  }

  > :first-child {
    border-top-left-radius: @input-border-radius;
    border-bottom-left-radius: @input-border-radius;
  }

  > :last-child {
    border-top-right-radius: @input-border-radius;
    border-bottom-right-radius: @input-border-radius;
  }
}

.@{input-prefix-cls}-group-addbefore,
.@{input-prefix-cls}-group-addafter {
  width: 1px;
  display: table-cell;
  white-space: nowrap;
  height: 100%;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0 @input-padding-horizontal;
  color: @input-color-addon-text;
  background-color: @input-color-addon-bg;
  border: 1px solid @input-color-addon-border_default;

  > svg {
    font-size: @input-size-default-icon-addon-size;
  }
}

.@{input-prefix-cls}-group-addafter {
  border-left: @input-border-addon-separator-width solid @input-color-addon-border;

  .addon(after, @input-size-default-height, @input-size-default-font-size);
}

.@{input-prefix-cls}-group-addbefore {
  border-right: @input-border-addon-separator-width solid @input-color-addon-border;

  .addon(before, @input-size-default-height, @input-size-default-font-size);
}

.@{input-prefix-cls}-group-wrapper {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  // height: @input-size-default-height;

  .group-size();

  .@{input-prefix-cls}-inner-wrapper {
    height: 100%;
  }

  &.@{input-prefix-cls}-disabled {
    cursor: not-allowed;
  }
}

.@{input-prefix-cls}-mirror {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.@{prefix}-textarea {
  .input-style();

  font-size: @textarea-font-size;
  vertical-align: top;
  position: relative;
  padding: @textarea-padding-vertical @textarea-padding-horizontal;
  max-width: 100%;
  min-height: @textarea-size-min-height;
  height: auto;
  line-height: @line-height-base;
  resize: vertical;
  overflow: auto;

  // 禁用样式
  &-disabled {
    .disabled-style();
  }
}

// input group compact
.@{input-prefix-cls}-group.@{input-prefix-cls}-group-compact {
  // select 圆角重置
  > .@{prefix}-select {
    vertical-align: unset;

    .@{prefix}-select-view {
      border-radius: 0;
    }
  }

  > * {
    border-radius: 0;

    .@{prefix}-input-group > :last-child,
    .@{prefix}-input-group > :first-child {
      border-radius: 0;
    }

    &:not(:last-child) {
      position: relative;
      border-right: @input-group-border-separator-width solid @input-group-color-separator-border;
      box-sizing: border-box;
    }

    &:first-child,
    &:first-child .@{prefix}-input-group > *:first-child {
      border-top-left-radius: @input-group-border-radius_compact;
      border-bottom-left-radius: @input-group-border-radius_compact;

      .@{prefix}-select {
        .@{prefix}-select-view {
          border-top-left-radius: @input-group-border-radius_compact;
          border-bottom-left-radius: @input-group-border-radius_compact;
        }
      }
    }

    &:last-child,
    &:last-child .@{prefix}-input-group > *:last-child {
      border-top-right-radius: @input-group-border-radius_compact;
      border-bottom-right-radius: @input-group-border-radius_compact;

      .@{prefix}-select {
        .@{prefix}-select-view {
          border-top-right-radius: @input-group-border-radius_compact;
          border-bottom-right-radius: @input-group-border-radius_compact;
        }
      }
    }
  }

  > .@{prefix}-input:not(:last-child) {
    border-right-color: @input-group-color-separator-border;

    &:focus {
      border-right-color: @input-color-border_focus;
    }
  }
}

// 前置后置标签
.addon(@position, @size-height, @size-font-size) {
  .item-style {
    margin-top: -1px;
    margin-bottom: -1px;
    width: auto;
    height: 100%;

    & when (@position = before) {
      margin-left: -@input-padding-horizontal - 1px;
      margin-right: -@input-padding-horizontal;
    }

    & when (@position = after) {
      margin-left: -@input-padding-horizontal;
      margin-right: -@input-padding-horizontal - 1px;
    }
  }

  // select,input 的边角和边框
  .border-radius() {
    & when (@position = before) {
      border-color: transparent;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & when (@position = after) {
      border-color: transparent;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .@{prefix}-input {
    .item-style();
    .border-radius();
  }

  // 作为前置/后置标签时，重写一些select的样式
  .@{prefix}-select {
    .item-style();

    .@{prefix}-select-view {
      border-radius: 0;
      background-color: inherit;
      border-color: transparent;
    }

    &.@{prefix}-select-single {
      .@{prefix}-select-view {
        height: 100%;
      }
    }
  }
}

// 不同尺寸的高度
.size-height {
  .height (@size-height, @size-font-size) {
    .get-padding(@size-height, @size-font-size);

    font-size: @size-font-size;
  }

  .padding-horizontal(@size) {
    @padding: ~'input-size-@{size}-padding-horizontal';

    &-group-wrapper-@{size} {
      .@{input-prefix-cls}-group-addbefore,
      .@{input-prefix-cls}-group-addafter {
        padding-left: @@padding;
        padding-right: @@padding;
      }
    }

    &-inner-wrapper&-inner-wrapper-@{size} {
      padding-left: @@padding;
      padding-right: @@padding;
    }

    &-size-@{size} {
      padding-left: @@padding;
      padding-right: @@padding;
    }
  }

  &-size-mini {
    line-height: 1.667;
    font-size: @input-size-mini-font-size;
    padding-top: (
      round(@input-size-mini-height - @input-border-width * 2 - $line-height * $font-size) / 2
    );
    padding-bottom: (
      round(@input-size-mini-height - @input-border-width * 2 - $line-height * $font-size) / 2
    );
  }

  &-size-small {
    .height(@input-size-small-height, @input-size-small-font-size);
  }

  &-size-large {
    .height(@input-size-large-height, @input-size-large-font-size);
  }

  .padding-horizontal(mini);
  .padding-horizontal(small);
  .padding-horizontal(large);
}

// 不同尺寸的带有前置后置标签的高度
.group-size {
  .size-font-size (@size-input-height, @size-font-size, @suffix-icon-size, @addon-icon-size) {
    .@{input-prefix-cls}-group {
      font-size: @size-font-size;
    }

    .@{input-prefix-cls}-inner-wrapper {
      .@{input-prefix-cls}-group-prefix,
      .@{input-prefix-cls}-group-suffix {
        font-size: @size-font-size;

        > svg {
          font-size: @suffix-icon-size;
        }
      }
    }

    .@{input-prefix-cls}-group-addbefore,
    .@{input-prefix-cls}-group-addafter {
      font-size: @size-font-size;
      height: @size-input-height - 2;

      > svg {
        font-size: @addon-icon-size;
      }
    }

    .@{input-prefix-cls}-group-addafter {
      .addon(after, @size-input-height, @size-font-size);
    }

    .@{input-prefix-cls}-group-addbefore {
      .addon(before, @size-input-height, @size-font-size);
    }
  }

  &&-mini {
    .size-font-size(
      @input-size-mini-height,
      @input-size-mini-font-size,
      @input-size-mini-icon-suffix-size,
      @input-size-mini-icon-addon-size
    );
  }

  &&-small {
    .size-font-size(
      @input-size-small-height,
      @input-size-small-font-size,
      @input-size-small-icon-suffix-size,
      @input-size-small-icon-addon-size
    );
  }

  &&-large {
    .size-font-size(
      @input-size-large-height,
      @input-size-large-font-size,
      @input-size-large-icon-suffix-size,
      @input-size-large-icon-addon-size
    );
  }

  &.@{input-prefix-cls}-custom-height {
    .size-font-size(
      @input-size-mini-height,
      @input-size-default-font-size,
      @input-size-default-icon-suffix-size,
      @input-size-default-icon-addon-size
    );

    .@{input-prefix-cls}-inner-wrapper {
      height: 100%;

      .@{input-prefix-cls} {
        height: 100%;
      }

      .@{input-prefix-cls}-clear-wrapper {
        height: 100%;

        .@{input-prefix-cls} {
          height: 100%;
        }
      }
    }
  }
}

@textarea-prefix-cls: ~'@{prefix}-textarea';

.@{textarea-prefix-cls}-wrapper {
  display: inline-block;
  position: relative;
  width: 100%;
}

.@{textarea-prefix-cls}-clear-wrapper {
  &:hover {
    .@{textarea-prefix-cls}-clear-icon {
      display: inline-block;
    }
  }

  .@{textarea-prefix-cls} {
    padding-right: @icon-hover-size-default-height;
  }
}

.@{textarea-prefix-cls} {
  &-word-limit {
    position: absolute;
    font-size: @textarea-font-tip-size;
    bottom: @textarea-layout-tip-bottom;
    right: @textarea-layout-tip-right;
    color: @textarea-color-tip-text;
    user-select: none;

    &-error {
      color: @input-color-border_error_focus;
    }
  }

  &-clear-icon {
    display: none;
    position: absolute;
    right: @textarea-layout-tip-right;
    top: @textarea-layout-top-icon-clear;
    font-size: @textarea-size-icon-clear;
    color: @input-color-icon-clear;

    > svg {
      transition: color @transition-duration-1 @transition-timing-function-linear;
      position: relative;
    }
  }
}

.@{input-prefix-cls}-search.@{input-prefix-cls}-group-wrapper {
  .@{input-prefix-cls}-group-addbefore {
    transition: all @transition-duration-1 @transition-timing-function-linear;
  }

  .@{input-prefix-cls}-group-addafter {
    padding: 0;
    border: none;
  }

  .@{input-prefix-cls}-group-suffix {
    color: @search-color-icon;
    font-size: @search-size-icon;
  }

  &:not(.@{input-prefix-cls}-disabled) {
    .@{input-prefix-cls}-group-addbefore {
      cursor: pointer;
      color: @search-color-icon;
      font-size: @search-size-icon;
    }
  }

  .@{input-prefix-cls}-search-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 100%;
    font-size: @search-size-icon;
    color: @search-button-color-text;
  }
}

.@{input-prefix-cls}-search-button {
  .@{input-prefix-cls}-inner-wrapper:not(.@{input-prefix-cls}-inner-wrapper-rtl) {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.@{input-prefix-cls}-password.@{input-prefix-cls}-group-wrapper {
  &:not(.@{input-prefix-cls}-disabled) {
    .@{input-prefix-cls}-group-suffix {
      cursor: pointer;
      color: @password-color-eye-icon;
      font-size: @password-size-eye-icon;
    }
  }

  .@{input-prefix-cls}-password-visibility-icon:focus-visible {
    box-shadow: 0 0 0 2px @input-color-border_focus;
    border-radius: @radius-small;
  }
}

.@{input-prefix-cls}-group-wrapper-rtl {
  direction: rtl;

  .@{input-prefix-cls} {
    &-word-limit {
      padding-left: 0;
      padding-right: input-padding-word-limit-left;
    }
  }

  &.@{input-prefix-cls}-clear-wrapper {
    .@{input-prefix-cls} {
      padding-right: 0;
      padding-left: @input-size-icon-clear + @input-padding-horizontal;
    }
  }

  .@{input-prefix-cls}-group {
    > :first-child {
      border-radius: 0 @input-border-radius @input-border-radius 0;
    }

    > :last-child {
      border-radius: @input-border-radius 0 0 @input-border-radius;
    }

    &-addafter {
      border-left: none;
      border-right: @input-border-addon-separator-width solid @input-color-addon-border;
      .addon(before, @input-size-default-height, @input-size-default-font-size);
    }

    &-addbefore {
      border-right: none;
      border-left: @input-border-addon-separator-width solid @input-color-addon-border;
      .addon(after, @input-size-default-height, @input-size-default-font-size);
    }

    &.@{input-prefix-cls}-group-compact {
      > * {
        &:not(:last-child) {
          border-right: none;
          border-left: @input-group-border-separator-width solid @input-group-color-separator-border;
        }
        &:first-child,
        &:first-child .@{prefix}-input-group > *:first-child {
          border-radius: 0 @input-group-border-radius_compact @input-group-border-radius_compact 0;

          .@{prefix}-select {
            .@{prefix}-select-view {
              border-radius: 0 @input-group-border-radius_compact @input-group-border-radius_compact
                0;
            }
          }
        }

        &:last-child,
        &:last-child .@{prefix}-input-group > *:last-child {
          border-radius: @input-group-border-radius_compact 0 0 @input-group-border-radius_compact;
          .@{prefix}-select {
            .@{prefix}-select-view {
              border-radius: @input-group-border-radius_compact 0 0
                @input-group-border-radius_compact;
            }
          }
        }
      }

      > .@{prefix}-input:not(:last-child) {
        border-left-color: @input-group-color-separator-border;

        &:focus {
          border-left-color: @input-color-border_focus;
        }
      }
    }
  }

  &.@{input-prefix-cls}-search {
    .@{input-prefix-cls}-search-btn {
      border-radius: @input-border-radius 0 0 @input-border-radius;
    }
  }
}

.@{input-prefix-cls}-inner-wrapper-rtl {
  direction: rtl;

  &.@{input-prefix-cls}-inner-wrapper-has-prefix
    > .@{input-prefix-cls}-clear-wrapper
    .@{input-prefix-cls},
  &.@{input-prefix-cls}-inner-wrapper-has-prefix > .@{input-prefix-cls} {
    padding-left: 0;
    padding-right: @input-padding-horizontal;
  }

  > .@{input-prefix-cls}-clear-wrapper {
    .@{input-prefix-cls} {
      padding-right: 0;
      padding-left: @input-size-icon-clear;
    }

    .@{input-prefix-cls}-clear-icon {
      right: initial;
      left: @input-spacing-clear-icon-right;
    }
  }

  &:hover {
    .@{input-prefix-cls}-clear-icon {
      & ~ .@{input-prefix-cls}-group-suffix {
        margin-left: 4px;
      }
    }
  }
}

.@{input-prefix-cls}-search-button {
  .@{input-prefix-cls}-inner-wrapper-rtl {
    border-left: none;
    border-radius: 0 @input-border-radius @input-border-radius 0;
  }
}

.@{textarea-prefix-cls}-wrapper-rtl {
  direction: rtl;

  .@{textarea-prefix-cls} {
    padding-left: @icon-hover-size-default-height;

    &-word-limit {
      right: initial;
      left: @textarea-layout-tip-right;
    }

    &-clear-icon {
      right: initial;
      left: @textarea-layout-tip-right;
    }
  }
}



/********** Input end ***************/
    


/********** InputTag  ***************/

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}




/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/


/**********************************************
 * size: mini / small / default / large
 **********************************************/
@input-tag-size-mini-height: @size-mini;
@input-tag-size-small-height: @size-small;
@input-tag-size-default-height: @size-default;
@input-tag-size-large-height: @size-large;

@input-tag-size-mini-tag-height: @size-5;
@input-tag-size-small-tag-height: @size-5;
@input-tag-size-default-tag-height: @size-6;
@input-tag-size-large-tag-height: @size-7;

@input-tag-size-mini-font-size: @font-size-body-1;
@input-tag-size-small-font-size: @font-size-body-3;
@input-tag-size-default-font-size: @font-size-body-3;
@input-tag-size-large-font-size: @font-size-title-1;

@input-tag-size-mini-padding_no_tag: @spacing-4;
@input-tag-size-small-padding_no_tag: @spacing-6;
@input-tag-size-default-padding_no_tag: @spacing-6;
@input-tag-size-large-padding_no_tag: @spacing-7;

/****************************************************
 * status: default / error / disabled _ (hover / focus)
 ****************************************************/
// text color
@input-tag-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-text_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// icon color
@input-tag-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-tag-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-tag-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// border color with focus & hover
@input-tag-color-border_default: @color-transparent;
@input-tag-color-border_default_hover: @color-transparent;
@input-tag-color-border_default_focus: @color-primary-6;
@input-tag-color-border_error: @color-transparent;
@input-tag-color-border_error_hover: @color-transparent;
@input-tag-color-border_error_focus: @color-danger-6;
@input-tag-color-border_disabled: @color-transparent;
@input-tag-color-border_disabled_hover: @input-tag-color-border_disabled;
@input-tag-color-border_disabled_focus: @input-tag-color-border_disabled;

// bg color with focus & hover
@input-tag-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-color-bg_default_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-color-bg_error: @color-danger-1;
@input-tag-color-bg_error_hover: @color-danger-2;
@input-tag-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-color-bg_disabled_hover: @input-tag-color-bg_disabled;

@input-tag-color-shadow_default_focus: @color-primary-2;
@input-tag-color-shadow_error_focus: @color-danger-2;
@input-tag-size-shadow_error_focus: @shadow-distance-none;
@input-tag-size-shadow_default_focus: @shadow-distance-none;

// input box
@input-tag-tag-margin-right: @spacing-2;
@input-tag-tag-margin-vertical: @spacing-1;
@input-tag-padding-horizontal: @spacing-2;
@input-tag-border-radius: @radius-small;
@input-tag-border-width: @border-1;
@input-tag-size-icon-clear: @size-3;
@input-tag-size-icon-clear_hover: @size-5;

// tags
@input-tag-tag-font-size: @font-size-body-1;
@input-tag-tag-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-tag-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-tag-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-tag-color-border_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-remove-icon-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-remove-icon-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-3');

// warning
@input-tag-color-text_warning: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-border_warning: @input-color-border_warning;
@input-tag-color-border_warning_hover: @input-color-border_warning_hover;
@input-tag-color-border_warning_focus: @input-color-border_warning_focus;
@input-tag-color-bg_warning: @input-color-bg_warning;
@input-tag-color-bg_warning_hover: @input-color-bg_warning_hover;
@input-tag-color-bg_warning_focus: @input-color-bg_warning_focus;
@input-tag-color-shadow_warning_focus: @input-color-shadow_warning_focus;
@input-tag-size-shadow_warning_focus: @input-size-shadow_warning_focus;

// addon
@input-tag-addon-padding-horizontal: @spacing-6;
@input-tag-color-addon-bg: @input-tag-color-bg_default;
@input-tag-color-addon-border: var(~'@{arco-cssvars-prefix}-color-border-2');
@input-tag-color-addon-border_default: @color-transparent;
@input-tag-border-addon-separator-width: @border-1;
@input-tag-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');



@arco-draggable-prefix-cls: ~'@{prefix}-draggable';

.@{arco-draggable-prefix-cls} {
  @keyframes ~'@{prefix}-draggable-item-blink' {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.3;
    }

    100% {
      opacity: 1;
    }
  }

  &-item {
    box-sizing: border-box;
    list-style: none;
    user-select: none;

    &-dragging {
      opacity: 0.3;
    }

    &-dragover {
      &.@{arco-draggable-prefix-cls}-item-gap-left {
        box-shadow: -1px 0 rgb(var(~'@{arco-cssvars-prefix}-primary-6'));
      }

      &.@{arco-draggable-prefix-cls}-item-gap-right {
        box-shadow: 1px 0 rgb(var(~'@{arco-cssvars-prefix}-primary-6'));
      }

      &.@{arco-draggable-prefix-cls}-item-gap-top {
        box-shadow: 0 -1px rgb(var(~'@{arco-cssvars-prefix}-primary-6'));
      }

      &.@{arco-draggable-prefix-cls}-item-gap-bottom {
        box-shadow: 0 1px rgb(var(~'@{arco-cssvars-prefix}-primary-6'));
      }
    }

    &-dragged {
      animation: ~'@{prefix}-draggable-item-blink' 0.8s;
      animation-timing-function: @transition-timing-function-linear;
    }
  }
}




/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/


/**********************************************
 * size: mini / small / default / large
 **********************************************/
@input-tag-size-mini-height: @size-mini;
@input-tag-size-small-height: @size-small;
@input-tag-size-default-height: @size-default;
@input-tag-size-large-height: @size-large;

@input-tag-size-mini-tag-height: @size-5;
@input-tag-size-small-tag-height: @size-5;
@input-tag-size-default-tag-height: @size-6;
@input-tag-size-large-tag-height: @size-7;

@input-tag-size-mini-font-size: @font-size-body-1;
@input-tag-size-small-font-size: @font-size-body-3;
@input-tag-size-default-font-size: @font-size-body-3;
@input-tag-size-large-font-size: @font-size-title-1;

@input-tag-size-mini-padding_no_tag: @spacing-4;
@input-tag-size-small-padding_no_tag: @spacing-6;
@input-tag-size-default-padding_no_tag: @spacing-6;
@input-tag-size-large-padding_no_tag: @spacing-7;

/****************************************************
 * status: default / error / disabled _ (hover / focus)
 ****************************************************/
// text color
@input-tag-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-text_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// icon color
@input-tag-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-tag-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-tag-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// border color with focus & hover
@input-tag-color-border_default: @color-transparent;
@input-tag-color-border_default_hover: @color-transparent;
@input-tag-color-border_default_focus: @color-primary-6;
@input-tag-color-border_error: @color-transparent;
@input-tag-color-border_error_hover: @color-transparent;
@input-tag-color-border_error_focus: @color-danger-6;
@input-tag-color-border_disabled: @color-transparent;
@input-tag-color-border_disabled_hover: @input-tag-color-border_disabled;
@input-tag-color-border_disabled_focus: @input-tag-color-border_disabled;

// bg color with focus & hover
@input-tag-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-color-bg_default_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-color-bg_error: @color-danger-1;
@input-tag-color-bg_error_hover: @color-danger-2;
@input-tag-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-color-bg_disabled_hover: @input-tag-color-bg_disabled;

@input-tag-color-shadow_default_focus: @color-primary-2;
@input-tag-color-shadow_error_focus: @color-danger-2;
@input-tag-size-shadow_error_focus: @shadow-distance-none;
@input-tag-size-shadow_default_focus: @shadow-distance-none;

// input box
@input-tag-tag-margin-right: @spacing-2;
@input-tag-tag-margin-vertical: @spacing-1;
@input-tag-padding-horizontal: @spacing-2;
@input-tag-border-radius: @radius-small;
@input-tag-border-width: @border-1;
@input-tag-size-icon-clear: @size-3;
@input-tag-size-icon-clear_hover: @size-5;

// tags
@input-tag-tag-font-size: @font-size-body-1;
@input-tag-tag-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-tag-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-tag-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-tag-color-border_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-remove-icon-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-remove-icon-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-3');

// warning
@input-tag-color-text_warning: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-border_warning: @input-color-border_warning;
@input-tag-color-border_warning_hover: @input-color-border_warning_hover;
@input-tag-color-border_warning_focus: @input-color-border_warning_focus;
@input-tag-color-bg_warning: @input-color-bg_warning;
@input-tag-color-bg_warning_hover: @input-color-bg_warning_hover;
@input-tag-color-bg_warning_focus: @input-color-bg_warning_focus;
@input-tag-color-shadow_warning_focus: @input-color-shadow_warning_focus;
@input-tag-size-shadow_warning_focus: @input-size-shadow_warning_focus;

// addon
@input-tag-addon-padding-horizontal: @spacing-6;
@input-tag-color-addon-bg: @input-tag-color-bg_default;
@input-tag-color-addon-border: var(~'@{arco-cssvars-prefix}-color-border-2');
@input-tag-color-addon-border_default: @color-transparent;
@input-tag-border-addon-separator-width: @border-1;
@input-tag-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');


@input-tag-prefix-cls: ~'@{prefix}-input-tag';

.input-tag-input-element-padding(@paddingLeft) {
  .@{input-tag-prefix-cls}-has-placeholder {
    input,
    .@{input-tag-prefix-cls}-input-mirror {
      box-sizing: border-box;
      padding-left: @paddingLeft;
    }
  }
}

.input-tag-input-element-padding-rtl(@paddingRight) {
  .@{input-tag-prefix-cls}-has-placeholder {
    input,
    .@{input-tag-prefix-cls}-input-mirror {
      padding-left: 0;
      padding-right: @paddingRight;
    }
  }
}


@input-tag-prefix-cls: ~'@{prefix}-input-tag';

.@{input-tag-prefix-cls} {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  padding-left: @input-tag-padding-horizontal;
  padding-right: @input-tag-padding-horizontal;
  border-radius: @input-tag-border-radius;
  vertical-align: top;
  cursor: text;
  transition: all @transition-duration-1 @transition-timing-function-linear;

  &-view {
    display: flex;
    width: 100%;
  }

  &-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-grow: 1;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }

  &-prefix,
  &-suffix {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 22px;
  }

  &-prefix {
    padding-left: 8px;
    padding-right: 4px;
  }

  &-suffix {
    padding-right: 8px;
  }

  & &-clear-icon {
    display: none;
    font-size: @input-tag-size-icon-clear;
    color: @input-tag-color-icon-clear;
    cursor: pointer;

    > svg {
      transition: color @transition-duration-1 @transition-timing-function-linear;
      position: relative;
    }
  }

  &:hover &-clear-icon {
    display: block;

    & ~ * {
      display: none;
    }
  }

  &:not(&-focus) {
    .@{input-tag-prefix-cls}-clear-icon:hover::before {
      background-color: @input-tag-color-icon-clear-bg_hover;
    }

    .@{prefix}-draggable-item {
      cursor: move;
    }
  }

  &-input {
    width: 4px;
    // width might be overwrite by inline-style, max-width make text-ellipsis work
    max-width: 100%;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    font-size: inherit;
    cursor: inherit;
    color: inherit;
    .text-ellipsis();

    // input is the first child means that input-tag has an empty value
    // we set width of input to 4px by default, and 100% when input-tag is empty to avoid wrap
    // see https://github.com/arco-design/arco-design/pull/1863
    &:first-child {
      width: 100%;
    }

    .@{prefix}-tag + &[disabled] {
      width: 0;
    }

    &-mirror {
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
      pointer-events: none;
    }

    &::placeholder {
      color: @input-tag-color-placeholder;
    }
  }

  &-tag {
    max-width: 100%;
    margin-right: @input-tag-tag-margin-right;
    font-size: @input-tag-tag-font-size;

    &-ellipsis {
      font-size: @input-tag-tag-font-size;
      margin: 0 4px;
    }
  }

  // 多状态下的颜色处理
  .status-color(@status) {
    background-color: ~'@{input-tag-color-bg_@{status}}';
    color: ~'@{input-tag-color-text_@{status}}';
    border: @input-tag-border-width solid ~'@{input-tag-color-border_@{status}}';

    &:hover {
      background-color: ~'@{input-tag-color-bg_@{status}_hover}';
      border: @input-tag-border-width solid ~'@{input-tag-color-border_@{status}_hover}';
    }

    &.@{input-tag-prefix-cls}-focus when not (@status = disabled) {
      background-color: ~'@{input-tag-color-bg_@{status}_focus}';
      border: @input-tag-border-width solid ~'@{input-tag-color-border_@{status}_focus}';
      box-shadow: 0 0 0 ~'@{input-tag-size-shadow_@{status}_focus}' ~'@{input-tag-color-shadow_@{status}_focus}';
    }
  }

  .@{prefix}-icon-hover {
    cursor: pointer;

    &.@{prefix}-icon-hover-disabled {
      cursor: not-allowed;
    }
  }

  .status-tag-color() {
    .@{input-tag-prefix-cls}-tag {
      color: @input-tag-color-text_default;
      border-color: @input-tag-tag-color-border;
      background-color: @input-tag-tag-color-bg;
    }

    .@{prefix}-icon-hover:hover::before {
      background-color: @input-tag-tag-remove-icon-color-bg;
    }

    &.@{input-tag-prefix-cls}-focus {
      .@{input-tag-prefix-cls}-tag {
        border-color: @input-tag-tag-color-border_focus;
        background-color: @input-tag-tag-color-bg_focus;
      }

      .@{prefix}-icon-hover:hover::before {
        background-color: @input-tag-tag-remove-icon-color-bg_focus;
      }
    }

    &.@{input-tag-prefix-cls}-disabled {
      .@{input-tag-prefix-cls}-tag {
        color: @input-tag-color-text_disabled;
        border-color: @input-tag-tag-color-border_disabled;
        background-color: @input-tag-tag-color-bg_disabled;
      }
    }
  }

  .status-color(default);
  .status-tag-color();

  &-warning {
    .status-color(warning);
  }

  &-error {
    .status-color(error);
  }

  &-disabled {
    .status-color(disabled);

    cursor: not-allowed;

    .@{input-tag-prefix-cls}-input::placeholder {
      color: @input-tag-color-text_disabled;
    }
  }

  &-readonly {
    cursor: default;
  }

  &-wrapper {
    display: inline-flex;
    align-items: stretch;
    width: 100%;

    .@{input-tag-prefix-cls} {
      min-width: 0; // 避免 .arco-input-tag 宽度超出 .arco-input-tag-wrapper
    }

    .@{input-tag-prefix-cls}:not(.@{input-tag-prefix-cls}-focused) {
      &:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  &-addafter,
  &-addbefore {
    display: flex;
    align-items: center;
    padding: 0 @input-tag-addon-padding-horizontal;
    color: @input-tag-color-addon-text;
    background-color: @input-tag-color-addon-bg;
    white-space: nowrap;
    border: 1px solid @input-tag-color-addon-border_default;
  }

  &-addbefore {
    border-right: @input-tag-border-addon-separator-width solid @input-tag-color-addon-border;
    border-top-left-radius: @input-tag-border-radius;
    border-bottom-left-radius: @input-tag-border-radius;
  }

  &-addafter {
    border-left: @input-tag-border-addon-separator-width solid @input-tag-color-addon-border;
    border-top-right-radius: @input-tag-border-radius;
    border-bottom-right-radius: @input-tag-border-radius;
  }
}

.@{input-tag-prefix-cls} {
  .size(@size) {
    &-size-@{size} {
      @ref-font-size: ~'input-tag-size-@{size}-font-size';
      @ref-height: ~'input-tag-size-@{size}-height';
      @ref-tag-height: ~'input-tag-size-@{size}-tag-height';
      @ref-padding-horizontal_not_tag: ~'input-tag-size-@{size}-padding_no_tag';

      @font-size: @@ref-font-size;
      @height: @@ref-height;
      @tag-height: @@ref-tag-height;
      @padding-horizontal_not_tag: @@ref-padding-horizontal_not_tag;

      font-size: @font-size;

      .@{input-tag-prefix-cls}-view {
        min-height: @height - @input-tag-border-width * 2;
      }

      .@{input-tag-prefix-cls}-inner {
        padding-top: (@height / 2) - (@tag-height / 2) - @input-tag-border-width -
          @input-tag-tag-margin-vertical;
        padding-bottom: $padding-top;
      }

      .@{input-tag-prefix-cls}-tag,
      .@{input-tag-prefix-cls}-tag + .@{input-tag-prefix-cls}-input {
        margin-top: (@input-tag-tag-margin-vertical / 2);
        margin-bottom: $margin-top;
        height: @tag-height;
        line-height: $height - 2;
      }

      &.@{input-tag-prefix-cls}-has-placeholder {
        input,
        .@{input-tag-prefix-cls}-input-mirror {
          box-sizing: border-box;
          padding-left: @padding-horizontal_not_tag - @input-tag-padding-horizontal;
        }
      }
    }
  }

  .size(mini);
  .size(default);
  .size(small);
  .size(large);
}

.@{input-tag-prefix-cls}-rtl {
  direction: rtl;
  padding-right: @input-tag-padding-horizontal;
  padding-left: @input-tag-padding-horizontal;

  .@{input-tag-prefix-cls}-prefix {
    padding-right: 8px;
    padding-left: 4px;
  }

  .@{input-tag-prefix-cls}-suffix {
    padding-right: 0;
    padding-left: 8px;
  }

  .@{input-tag-prefix-cls}-tag {
    margin-right: 0;
    margin-left: @input-tag-tag-margin-right;
  }

  .@{input-tag-prefix-cls}-input {
    &-mirror {
      right: 0;
      left: initial;
    }
  }

  .size(@size) {
    @ref-padding-horizontal_not_tag: ~'input-tag-size-@{size}-padding_no_tag';
    @padding-horizontal_not_tag: @@ref-padding-horizontal_not_tag;

    &.@{input-tag-prefix-cls}-size-@{size} {
      &.@{input-tag-prefix-cls}-has-placeholder {
        input,
        .@{input-tag-prefix-cls}-input-mirror {
          padding-right: @padding-horizontal_not_tag - @input-tag-padding-horizontal;
        }
      }
    }
  }

  .size(mini);
  .size(default);
  .size(small);
  .size(large);
}

.@{input-tag-prefix-cls}-wrapper-rtl {
  .@{input-tag-prefix-cls}-addbefore {
    border-right: unset;
    border-left: @input-tag-border-addon-separator-width solid @input-tag-color-addon-border;
  }

  .@{input-tag-prefix-cls}-addafter {
    border-left: unset;
    border-right: @input-tag-border-addon-separator-width solid @input-tag-color-addon-border;
  }
}


/********** InputTag end ***************/
    


/********** InputNumber  ***************/



@input-number-border-radius: @radius-small;
@input-number-step-layer-border-radius: 1px;

@input-number-size-mini-step-button-width: @size-mini;
@input-number-size-small-step-button-width: @size-small;
@input-number-size-default-step-button-width: @size-default;
@input-number-size-large-step-button-width: @size-large;

@input-number-step-button-color: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-number-step-button-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@input-number-step-button-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-number-step-button-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-number-step-button-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-number-step-button-color-bg_default_active: var(~'@{arco-cssvars-prefix}-color-fill-4');
@input-number-step-button-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-number-step-button-color-bg_disabled_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-number-step-button-color-bg_disabled_active: var(~'@{arco-cssvars-prefix}-color-fill-2');

@input-number-color-illegal_value: @color-danger-6;


@input-number-prefix-cls: ~'@{prefix}-input-number';
@input-prefix-cls: ~'@{prefix}-input';

.@{input-number-prefix-cls} {
  position: relative;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  border-radius: @input-number-border-radius;

  .transition() {
    transition: all @transition-duration-1 @transition-timing-function-linear;
  }

  &-step-button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-color: @input-number-step-button-color-border;
    background-color: @input-number-step-button-color-bg_default;
    color: @input-number-step-button-color;
    cursor: pointer;
    user-select: none;
    .transition();

    &:hover {
      border-color: $background-color;
      background-color: @input-number-step-button-color-bg_default_hover;
    }

    &:active {
      border-color: $background-color;
      background-color: @input-number-step-button-color-bg_default_active;
    }

    &-disabled {
      cursor: not-allowed;
      background-color: @input-number-step-button-color-bg_disabled;
      color: @input-number-step-button-color_disabled;

      &:hover,
      &:active {
        border-color: @input-number-step-button-color-border;
        background-color: @input-number-step-button-color-bg_disabled_hover;
      }
    }
  }

  &-prefix,
  &-suffix {
    .transition();
  }

  // embed mode
  &-mode-embed {
    .@{input-number-prefix-cls}-step-layer {
      opacity: 0;
      position: absolute;
      right: 4px;
      top: 4px;
      bottom: 4px;
      width: 18px;
      border-radius: @input-number-step-layer-border-radius;
      overflow: hidden;
      .transition();

      .@{input-number-prefix-cls}-step-button {
        width: 100%;
        height: 50%;
        font-size: 10px;
      }
    }

    &:not(.@{input-prefix-cls}-group-wrapper-disabled):hover
      .@{input-number-prefix-cls}-step-layer {
      opacity: 1;

      & ~ .@{input-number-prefix-cls}-suffix {
        opacity: 0;
        pointer-events: none;
      }
    }

    // 修正 InputNumber hover 时 StepButton 的 hover 背景色
    .@{input-prefix-cls}-inner-wrapper:not(.@{input-prefix-cls}-inner-wrapper-focus) {
      .@{input-number-prefix-cls}-step-button:not(.@{input-number-prefix-cls}-step-button-disabled):hover {
        background-color: @input-number-step-button-color-bg_default_active;
      }
    }
  }

  // rtl embed mode
  &-rtl&-mode-embed &-step-layer {
    right: unset;
    left: 4px;
  }

  // button mode
  &-mode-button {
    .@{input-prefix-cls} {
      text-align: center;

      &-group {
        position: relative;

        &-addbefore,
        &-addafter {
          padding: 0;
        }

        .@{input-number-prefix-cls}-step-button {
          position: absolute;
          top: 0;
          height: 100%;
          border: inherit;

          &:active {
            border-color: @input-number-step-button-color-bg_default_active;
          }
        }

        &-addbefore .@{input-number-prefix-cls}-step-button {
          left: 0;
          border-right-color: @input-number-step-button-color-border;
        }

        &-addafter .@{input-number-prefix-cls}-step-button {
          right: 0;
          border-left-color: @input-number-step-button-color-border;
        }
      }
    }

    .size(@size) {
      &.@{input-number-prefix-cls}-size-@{size} {
        @width: ~'@{input-number-size-@{size}-step-button-width}';

        .@{input-prefix-cls}-group-addbefore,
        .@{input-prefix-cls}-group-addafter {
          width: @width;

          .@{input-number-prefix-cls}-step-button {
            width: @width;
          }
        }
      }
    }

    .size(mini);
    .size(small);
    .size(default);
    .size(large);
  }

  &-readonly {
    .@{input-number-prefix-cls}-step-button {
      pointer-events: none;
      color: @input-number-step-button-color_disabled;
    }
  }

  &-illegal-value {
    input {
      color: @input-number-color-illegal_value;
    }
  }
}


/********** InputNumber end ***************/
    


/********** VerificationCode  ***************/



/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/




@verification-code-prefix-cls: ~'@{prefix}-verification-code';
@input-prefix-cls: ~'@{prefix}-input';

.@{verification-code-prefix-cls} {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  column-gap: 4px;

  .@{input-prefix-cls} {
    width: @input-size-default-height;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  .@{input-prefix-cls}-size-small {
    width: @input-size-small-height;
  }

  .@{input-prefix-cls}-size-mini {
    width: @input-size-mini-height;
  }

  .@{input-prefix-cls}-size-large {
    width: @input-size-large-height;
  }
}

.@{verification-code-prefix-cls}-rtl {
  direction: rtl;
}


/********** VerificationCode end ***************/
    


/********** Layout  ***************/



@layout-trigger-height: 48px;

// Layout Theme Dark(Default)
@layout-sider-background: var(~'@{arco-cssvars-prefix}-color-menu-dark-bg');
@layout-font-color-dark: var(~'@{arco-cssvars-prefix}-color-white');
@layout-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
@layout-trigger-dark-color: rgba(255, 255, 255, 0.2);

// Layout Theme Light
@layout-sider-background-light: var(~'@{arco-cssvars-prefix}-color-menu-light-bg');
@layout-trigger-light-color-border: var(~'@{arco-cssvars-prefix}-color-bg-5');


@layout-prefix-cls: ~'@{prefix}-layout';

.@{layout-prefix-cls} {
  display: flex;
  flex: 1;
  margin: 0;
  padding: 0;
  flex-direction: column;

  &-sider {
    position: relative;
    width: auto;
    margin: 0;
    padding: 0;
    flex: none; // flex: 0 0 auto; 当右侧文字过长的时候不会被压缩。
    background: @layout-sider-background;
    transition: width @transition-duration-2 @transition-timing-function-standard;

    &-children {
      height: 100%;
      overflow: auto;
    }

    &-collapsed &-children {
      /* width */
      &::-webkit-scrollbar {
        width: 0;
      }

      // /* Track */
      // &::-webkit-scrollbar-track {
      //   background: #f1f1f1;
      // }

      // /* Handle */
      // &::-webkit-scrollbar-thumb {
      //   background: #888;
      // }

      // /* Handle on hover */
      // &::-webkit-scrollbar-thumb:hover {
      //   background: #555;
      // }
    }

    &-has-trigger {
      padding-bottom: @layout-trigger-height;
      box-sizing: border-box;
    }

    &-trigger {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: 100%;
      height: @layout-trigger-height;
      background: @layout-trigger-dark-color;
      color: var(~'@{arco-cssvars-prefix}-color-white');
      cursor: pointer;
      transition: width @transition-duration-2 @transition-timing-function-standard;
      z-index: 1;

      &-light {
        background: @layout-sider-background-light;
        border-top: 1px solid @layout-trigger-light-color-border;
        color: @layout-font-color;
      }
    }
  }

  &-sider-light {
    background: @layout-sider-background-light;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 8%);
  }

  &-header {
    margin: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  &-content {
    flex: 1;
  }

  &-footer {
    flex: 0 0 auto;
    margin: 0;
  }
}

.@{layout-prefix-cls}-has-sider {
  flex-direction: row;

  > .@{layout-prefix-cls},
  > .@{layout-prefix-cls}-content {
    overflow-x: hidden;
  }
}


/********** Layout end ***************/
    


/********** Link  ***************/



@link-font-size: @font-size-body-3;
@link-line-height: @line-height-base;
@link-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@link-color-bg_active: var(~'@{arco-cssvars-prefix}-color-fill-3');
@link-padding-horizontal: @spacing-2;

@link-color-text: @color-link-6;
@link-color-text_hover: @link-color-text;
@link-color-text_active: @link-color-text;
@link-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-link-light-3');

@link-color-text_success: @color-success-6;
@link-color-text_success_hover: @link-color-text_success;
@link-color-text_success_active: @link-color-text_success;
@link-color-text_success_disabled: var(~'@{arco-cssvars-prefix}-color-success-light-3');

@link-color-text_error: @color-danger-6;
@link-color-text_error_active: @link-color-text_error;
@link-color-text_error_hover: @link-color-text_error;
@link-color-text_error_disabled: var(~'@{arco-cssvars-prefix}-color-danger-light-3');

@link-color-text_warning: @color-warning-6;
@link-color-text_warning_hover: @link-color-text_warning;
@link-color-text_warning_active: @link-color-text_warning;
@link-color-text_warning_disabled: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@link-margin-icon-right: @spacing-3;

@link-padding-vertical: 1px;
@link-size-icon: @size-3;
@link-border-radius: @radius-small;
@link-color-box-shadow: var(~'@{arco-cssvars-prefix}-color-link-light-3');


@link-prefix-cls: ~'@{prefix}-link';

.@{link-prefix-cls} {
  color: @link-color-text;
  font-size: @link-font-size;
  line-height: @link-line-height;
  display: inline-block;
  padding: @link-padding-vertical @link-padding-horizontal;
  text-decoration: none;
  cursor: pointer;
  border-radius: @link-border-radius;
  background-color: @color-transparent;
  transition: all @transition-duration-1 @transition-timing-function-linear;

  &:hover {
    color: @link-color-text_hover;
    background-color: @link-color-bg_hover;
  }

  &:active {
    transition: none;
    color: @link-color-text_active;
    background-color: @link-color-bg_active;
  }

  &:focus-visible {
    box-shadow: 0 0 0 2px @link-color-box-shadow;
  }

  &&-hoverless {
    background-color: unset;
    padding: 0;
    display: inline;

    &:active,
    &:hover {
      background-color: unset;
    }
  }

  &&-disabled {
    color: @link-color-text_disabled;
    background: none;
    cursor: not-allowed;
  }

  // 不同状态
  &-is-success {
    color: @link-color-text_success;

    &:hover {
      color: @link-color-text_success_hover;
    }

    &:active {
      color: @link-color-text_success_active;
    }
  }

  &-is-success&-disabled {
    color: @link-color-text_success_disabled;
  }

  &-is-error {
    color: @link-color-text_error;

    &:hover {
      color: @link-color-text_error_hover;
    }

    &:active {
      color: @link-color-text_error_active;
    }
  }

  &-is-error&-disabled {
    color: @link-color-text_error_disabled;
  }

  &-is-warning {
    color: @link-color-text_warning;

    &:hover {
      color: @link-color-text_warning_hover;
    }

    &:active {
      color: @link-color-text_warning_active;
    }
  }

  &-is-warning&-disabled {
    color: @link-color-text_warning_disabled;
  }

  &-icon {
    margin-right: @link-margin-icon-right;
    font-size: @link-size-icon;
  }

  &-rtl &-icon {
    margin-left: @link-margin-icon-right;
    margin-right: 0;
  }
}


/********** Link end ***************/
    


/********** List  ***************/



@list-border-width: 1px;
@list-border-color: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@list-border-radius: @radius-medium;

@list-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@list-font-size: @font-size-body-3;
@list-line-height: @line-height-base;

@list-color-text-header: var(~'@{arco-cssvars-prefix}-color-text-1');
@list-color-bg-item-hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
@list-font-size-header: @font-size-title-1;
@list-font-weight-header: @font-weight-500;
@list-line-height-header: 1.5;

/**********************************************
 * size:  small / default / large
 **********************************************/
@list-size-small-padding-vertical-header: @spacing-4;
@list-size-small-padding-horizontal-header: @spacing-8;
@list-size-small-padding-vertical-item: 9px;
@list-size-small-padding-horizontal-item: @spacing-8;

@list-size-default-padding-vertical-header: @spacing-6;
@list-size-default-padding-horizontal-header: @spacing-8;
@list-size-default-padding-vertical-item: 13px;
@list-size-default-padding-horizontal-item: @spacing-8;

@list-size-large-padding-vertical-header: @spacing-7;
@list-size-large-padding-horizontal-header: @spacing-8;
@list-size-large-padding-vertical-item: 17px;
@list-size-large-padding-horizontal-item: @spacing-8;

// meta
@list-meta-font-weight-title: @font-weight-500;
@list-meta-color-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@list-mete-color-description: var(~'@{arco-cssvars-prefix}-color-text-2');
@list-meta-margin-right-avatar: @spacing-7;
@list-meta-margin-bottom-title: @spacing-1;
@list-meta-padding-horizontal: @spacing-none;
@list-meta-padding-vertical: @spacing-2;

// actions
@list-action-gap: @spacing-8;
@list-action-margin-top: @spacing-2;

// pagination
@list-pagination-margin-top: @spacing-9;


@list-prefix-cls: ~'@{prefix}-list';

.@{list-prefix-cls} {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  border-radius: @list-border-radius;
  font-size: @list-font-size;
  line-height: @list-line-height;
  color: @list-color-text;
  overflow-y: auto;

  // clear float caused by Pagination in list wrapper
  &-wrapper::after {
    content: '';
    display: block;
    visibility: hidden;
    clear: both;
  }

  .size(@size) {
    &-@{size} {
      @ref-padding-vertical-header: ~'list-size-@{size}-padding-vertical-header';
      @ref-padding-horizontal-header: ~'list-size-@{size}-padding-horizontal-header';
      @ref-padding-vertical-item: ~'list-size-@{size}-padding-vertical-item';
      @ref-padding-horizontal-item: ~'list-size-@{size}-padding-horizontal-item';

      > .@{list-prefix-cls}-header {
        padding: @@ref-padding-vertical-header @@ref-padding-horizontal-header;
      }

      // 在存在列表嵌套的时候，通过 > 限定 size 仅对其直接子元素生效，避免影响被嵌套的列表的样式
      // when there is nested list, use > to limit the size to only its direct child elements, so as not to affect
      // the style of the nested list
      > .@{list-prefix-cls}-footer,
      > .@{list-prefix-cls}-content > .@{list-prefix-cls}-item,
      > .@{list-prefix-cls}-content .@{list-prefix-cls}-row-col > .@{list-prefix-cls}-item,
      > .@{list-prefix-cls}-content.@{list-prefix-cls}-virtual .@{list-prefix-cls}-item {
        padding: @@ref-padding-vertical-item @@ref-padding-horizontal-item;
      }
    }
  }

  .border() {
    border: @list-border-width solid @list-border-color;

    &-header,
    &-item:not(:last-child) {
      border-bottom: @list-border-width solid @list-border-color;
    }

    &-footer {
      border-top: @list-border-width solid @list-border-color;
    }

    &-no-border {
      border: none;
    }

    &-no-split {
      .@{list-prefix-cls}-header,
      .@{list-prefix-cls}-footer,
      .@{list-prefix-cls}-item {
        border: none;
      }
    }
  }

  .size(small);
  .size(default);
  .size(large);
  .border();

  &-header {
    font-size: @list-font-size-header;
    font-weight: @list-font-weight-header;
    line-height: @list-line-height-header;
    color: @list-color-text-header;
  }

  &-item {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;

    &-main {
      flex: 1;
      overflow: hidden;

      .@{list-prefix-cls}-item-action:not(:first-child) {
        margin-top: @list-action-margin-top;
      }
    }

    &-meta {
      display: flex;
      align-items: center;
      padding: @list-meta-padding-vertical @list-meta-padding-horizontal;

      &-avatar {
        display: flex;

        &:not(:last-child) {
          margin-right: @list-meta-margin-right-avatar;
        }
      }

      &-title {
        font-weight: @list-meta-font-weight-title;
        color: @list-meta-color-title;

        &:not(:last-child) {
          margin-bottom: @list-meta-margin-bottom-title;
        }
      }

      &-description {
        color: @list-mete-color-description;
      }
    }

    &-action {
      display: flex;
      flex-wrap: nowrap;
      align-self: center;
      list-style: none;

      > li {
        display: inline-block;
        cursor: pointer;

        &:not(:last-child) {
          margin-right: @list-action-gap;
        }
      }
    }
  }

  &-hoverable &-item:hover {
    background-color: @list-color-bg-item-hover;
  }

  &-pagination {
    float: right;
    margin-top: @list-pagination-margin-top;

    &::after {
      display: block;
      clear: both;
      height: 0;
      content: '';
      visibility: hidden;
      overflow: hidden;
    }
  }

  &-scroll-loading {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-content {
    flex: 1;

    .@{prefix}-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
}

.@{list-prefix-cls}-rtl {
  direction: rtl;

  .@{list-prefix-cls} {
    &-item-meta {
      &-avatar {
        &:not(:last-child) {
          margin-right: 0;
          margin-left: @list-meta-margin-right-avatar;
        }
      }
    }

    &-item-action {
      > li {
        &:not(:last-child) {
          margin-left: @list-action-gap;
          margin-right: 0;
        }
      }
    }
  }
}

.@{list-prefix-cls}-wrapper-rtl {
  .@{list-prefix-cls}-pagination {
    float: left;
  }
}


/********** List end ***************/
    


/********** Message  ***************/



@message-wrapper-margin-top: @spacing-12;
@message-wrapper-margin-bottom: @spacing-12;

@message-padding-top: @spacing-5;
@message-padding-bottom: @spacing-5;
@message-padding-left: @spacing-7;
@message-padding-right: @spacing-7;
@message-margin-bottom: @spacing-7;
@message-border-radius: @radius-small;
@message-font-size-icon: 20px;
@message-font-size-content: @font-size-body-3;
@message-icon-margin-right: @spacing-4;

@message-border-width: 1px;
@message-border-style: solid;
@message-box-shadow: @shadow2-down;

@message-color-close-icon: var(~'@{arco-cssvars-prefix}-color-text-1');
@message-close-icon-font-size: 12px;
@message-close-icon-top: 14px;
@message-close-icon-right: @spacing-6;
@message-close-icon-left: 14px;

@message-normal-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@message-normal-color-icon: var(~'@{arco-cssvars-prefix}-color-text-1');
@message-normal-color-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@message-normal-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

@message-info-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@message-info-color-icon: @color-primary-6;
@message-info-color-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@message-info-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

@message-success-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@message-success-color-icon: @color-success-6;
@message-success-color-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@message-success-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

@message-warning-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@message-warning-color-icon: @color-warning-6;
@message-warning-color-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@message-warning-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

@message-error-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@message-error-color-icon: @color-danger-6;
@message-error-color-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@message-error-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

@message-loading-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@message-loading-color-icon: @color-primary-6;
@message-loading-color-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@message-loading-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


@message-prefix-cls: ~'@{prefix}-message';

.@{message-prefix-cls}-wrapper {
  width: 100%;
  position: fixed;
  z-index: @z-index-message;
  padding: 0 10px;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
  left: 0;

  &-top {
    top: @message-wrapper-margin-top;
  }

  &-bottom {
    bottom: @message-wrapper-margin-bottom;
  }
}

.@{message-prefix-cls} {
  position: relative;
  display: inline-block;
  padding: @message-padding-top @message-padding-right @message-padding-bottom @message-padding-left;
  line-height: 1;
  border-radius: @message-border-radius;
  border: @message-border-width @message-border-style @message-normal-color-border;
  margin-bottom: @message-margin-bottom;
  background-color: @message-normal-color-bg;
  text-align: center;
  box-shadow: @message-box-shadow;
  overflow: hidden;
  pointer-events: auto;
  transition: opacity @transition-duration-1 @transition-timing-function-linear;

  &-closable {
    padding-right: @message-close-icon-left + @message-close-icon-font-size +
      @message-close-icon-right;
  }

  &-icon {
    font-size: @message-font-size-icon;
    color: @message-normal-color-icon;
    margin-right: @message-icon-margin-right;
    vertical-align: middle;
    display: inline-block;
    animation: ~'@{prefix}-msg-fade' @transition-duration-1 @transition-timing-function-linear,
      ~'@{prefix}-msg-fade' @transition-duration-4 @transition-timing-function-overshoot;
  }

  &-content {
    vertical-align: middle;
    color: @message-normal-color-content;
    font-size: @message-font-size-content;
  }

  &-info {
    background-color: @message-info-color-bg;
    border-color: @message-info-color-border;
  }

  &-info &-icon {
    color: @message-info-color-icon;
  }

  &-info &-content {
    color: @message-info-color-content;
  }

  &-success {
    background-color: @message-success-color-bg;
    border-color: @message-success-color-border;
  }

  &-success &-icon {
    color: @message-success-color-icon;
  }

  &-success &-content {
    color: @message-success-color-content;
  }

  &-warning {
    background-color: @message-warning-color-bg;
    border-color: @message-warning-color-border;
  }

  &-warning &-icon {
    color: @message-warning-color-icon;
  }

  &-warning &-content {
    color: @message-warning-color-content;
  }

  &-error {
    background-color: @message-error-color-bg;
    border-color: @message-error-color-border;
  }

  &-error &-icon {
    color: @message-error-color-icon;
  }

  &-error &-content {
    color: @message-error-color-content;
  }

  &-loading {
    background-color: @message-loading-color-bg;
    border-color: @message-loading-color-border;
  }

  &-loading &-icon {
    color: @message-loading-color-icon;
  }

  &-loading &-content {
    color: @message-loading-color-content;
  }

  &-close-btn {
    position: absolute;
    top: @message-close-icon-top;
    right: @message-close-icon-right;
    color: @message-color-close-icon;
    font-size: @message-close-icon-font-size;

    > svg {
      position: relative;
    }
  }

  .icon-hover(
    @message-prefix-cls,
    @message-close-icon-font-size,
    @message-close-icon-font-size + 8px
  );
}

.fadeMessage-enter,
.fadeMessage-appear {
  opacity: 0;
}

.fadeMessage-enter-active,
.fadeMessage-appear-active {
  opacity: 1;
  transition: opacity @transition-duration-1 @transition-timing-function-linear;
}

.fadeMessage-exit {
  opacity: 0;
  overflow: hidden;
}

.fadeMessage-exit-active {
  opacity: 0;
  height: 0;
  transition: all @transition-duration-3 @transition-timing-function-standard;
}

.@{message-prefix-cls}-rtl {
  direction: rtl;
  .@{message-prefix-cls}-icon {
    margin-right: 0;
    margin-left: @message-icon-margin-right;
  }
}

@keyframes ~'@{prefix}-msg-fade' {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ~'@{prefix}-msg-scale' {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}


/********** Message end ***************/
    


/********** Menu  ***************/



@menu-font-size: 14px;
@menu-line-height: @line-height-base;
@menu-border-radius: @radius-small;
@menu-font-weight-item-selected: @font-weight-500;
@menu-color-label-item-selected: @color-primary-6;
@menu-height-label-item-selected: 3px;
@menu-margin-left-item-suffix-icon: @spacing-3;
@menu-margin-right-item-prefix-icon: @spacing-7;
@menu-horizontal-margin-right-item-prefix-icon: @spacing-4;

// vertical 模式下 item 之间的间隙
@menu-item-gap: @spacing-2;
// vertical 下嵌套子菜单的层级缩进
@menu-item-indent-spacing: @spacing-8;

// 折叠按钮
@menu-width-collapse-button: @size-6;
@menu-height-collapse-button: @size-6;
@menu-border-radius-collapse-button: @radius-small;

/**********************************************
 * theme: light / dark
 * status: default / disabled / selected / hover
 **********************************************/
@menu-light-color-bg: var(~'@{arco-cssvars-prefix}-color-menu-light-bg');
@menu-light-color-bg-item_default: @menu-light-color-bg;
@menu-light-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@menu-light-color-bg-item_selected: var(~'@{arco-cssvars-prefix}-color-fill-2');
@menu-light-color-bg-item_disabled: @menu-light-color-bg;
@menu-light-color-item_default: var(~'@{arco-cssvars-prefix}-color-text-2');
@menu-light-color-item_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
@menu-light-color-item_selected: @color-primary-6;
@menu-light-color-submenu_selected: @color-primary-6;
@menu-light-color-bg-submenu_selected_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@menu-light-color-item_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@menu-light-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-3');
@menu-light-color-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-3');
@menu-light-color-icon_selected: @color-primary-6;
@menu-light-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@menu-light-color-group-title: var(~'@{arco-cssvars-prefix}-color-text-3');

@menu-dark-color-bg: var(~'@{arco-cssvars-prefix}-color-menu-dark-bg');
@menu-dark-color-bg-item_default: @menu-dark-color-bg;
@menu-dark-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');
@menu-dark-color-bg-item_selected: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');
@menu-dark-color-bg-item_disabled: @menu-dark-color-bg;
@menu-dark-color-submenu_selected: @color-primary-6;
@menu-dark-color-bg-submenu_selected_hover: var(~'@{arco-cssvars-prefix}-color-menu-dark-hover');
@menu-dark-color-item_default: var(~'@{arco-cssvars-prefix}-color-text-4');
@menu-dark-color-item_hover: var(~'@{arco-cssvars-prefix}-color-text-4');
@menu-dark-color-item_selected: var(~'@{arco-cssvars-prefix}-color-white');
@menu-dark-color-item_disabled: var(~'@{arco-cssvars-prefix}-color-text-2');
@menu-dark-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-3');
@menu-dark-color-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-3');
@menu-dark-color-icon_selected: var(~'@{arco-cssvars-prefix}-color-white');
@menu-dark-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-2');
@menu-dark-color-group-title: var(~'@{arco-cssvars-prefix}-color-text-3');

// popup sub-menu
@menu-color-border-popup: var(~'@{arco-cssvars-prefix}-color-neutral-3');

// collapse button style
@menu-light-color-bg-button: var(~'@{arco-cssvars-prefix}-color-fill-1');
@menu-light-color-bg-button_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@menu-light-color-button: var(~'@{arco-cssvars-prefix}-color-text-3');
@menu-dark-color-bg-button: @color-primary-6;
@menu-dark-color-bg-button_hover: @color-primary-7;
@menu-dark-color-button: var(~'@{arco-cssvars-prefix}-color-white');

/**********************************************
 * horizontal / vertical
 **********************************************/
@menu-horizontal-padding-vertical: 14px;
@menu-horizontal-padding-horizontal: @spacing-8;
@menu-horizontal-item-gap: @spacing-6;
@menu-horizontal-item-height: 30px;
@menu-horizontal-item-padding-horizontal: @spacing-6;

@menu-vertical-padding-vertical: @spacing-2;
@menu-vertical-padding-horizontal: @spacing-4;
@menu-vertical-item-height: 40px;
@menu-vertical-item-padding-horizontal: @spacing-6;

/************************************************
 * collapse
 ***********************************************/
@menu-collapse-width: @size-12;
@menu-collapse-padding-vertical: @spacing-2;
@menu-collapse-padding-horizontal: @spacing-2;

/************************************************
 * popButton
 ***********************************************/
@menu-pop-button-size: @size-10;
@menu-pop-button-margin-bottom: @spacing-7;
@menu-pop-button-box-shadow: @shadow2-down;
@menu-pop-button-border-color: @color-transparent;

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


@menu-prefix-cls: ~'@{prefix}-menu';

.applyStyleToItem(@style) {
  .@{menu-prefix-cls}-item,
  .@{menu-prefix-cls}-group-title,
  .@{menu-prefix-cls}-pop-header,
  .@{menu-prefix-cls}-inline-header {
    @style();
  }
}

.menu-focus-visible-style() {
  box-shadow: 0 0 0 2px @color-primary-6 inset;
}

@keyframes ~'@{prefix}-menu-selected-item-label-enter' {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.@{menu-prefix-cls} {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  font-size: @menu-font-size;
  line-height: @menu-line-height;
  transition: width @transition-duration-2 @transition-timing-function-standard;

  // 设置菜单层级的缩进
  &-indent {
    display: inline-block;
    width: @menu-item-indent-spacing;
  }

  .text-color-transition() {
    transition: color @transition-duration-2 @transition-timing-function-linear;
  }

  // menu-item 一些与 theme 和 mode 无关的样式
  .item-base() {
    @style: {
      position: relative;
      border-radius: @menu-border-radius;
      box-sizing: border-box;
      cursor: pointer;

      &.@{menu-prefix-cls}-disabled {
        cursor: not-allowed;
      }

      &.@{menu-prefix-cls}-selected {
        font-weight: @menu-font-weight-item-selected;
        .text-color-transition();

        svg {
          .text-color-transition();
        }
      }

      .@{prefix}-icon {
        margin-right: @menu-margin-right-item-prefix-icon;
      }
    };

    .applyStyleToItem(@style);
  }

  .item-mode(@mode) {
    @style-both: {
      padding: 0 ~'@{menu-@{mode}-item-padding-horizontal}';
      line-height: ~'@{menu-@{mode}-item-height}';

      .@{menu-prefix-cls}-icon-suffix .@{prefix}-icon {
        margin-right: 0;
      }
    };

    @style-vertical-only: {
      margin-bottom: @menu-item-gap;
      .text-ellipsis();

      .@{menu-prefix-cls}-item-inner {
        .text-ellipsis();

        width: 100%;
      }

      .@{menu-prefix-cls}-icon-suffix {
        position: absolute;
        right: @menu-vertical-item-padding-horizontal;
        top: 50%;
        transform: translateY(-50%);

        &.is-open {
          transform: translateY(-50%) rotate(180deg);
        }
      }
    };

    @style-horizontal-only: {
      .@{prefix}-icon {
        margin-right: @menu-horizontal-margin-right-item-prefix-icon;
      }

      .@{menu-prefix-cls}-icon-suffix {
        margin-left: @menu-margin-left-item-suffix-icon;
      }
    };

    .applyStyleToItem(@style-both);
    .applyStyleToItem(if(@mode = vertical, @style-vertical-only, @style-horizontal-only));
  }

  .theme(@theme) {
    &-@{theme} {
      background-color: ~'@{menu-@{theme}-color-bg}';

      // 处理普通菜单项的状态变化
      @item-style: {
        background-color: ~'@{menu-@{theme}-color-bg-item_default}';
        color: ~'@{menu-@{theme}-color-item_default}';

        .@{prefix}-icon {
          color: ~'@{menu-@{theme}-color-icon_default}';
        }

        &:hover {
          background-color: ~'@{menu-@{theme}-color-bg-item_hover}';
          color: ~'@{menu-@{theme}-color-item_hover}';

          .@{prefix}-icon {
            color: ~'@{menu-@{theme}-color-icon_hover}';
          }
        }

        &:focus-visible {
          .menu-focus-visible-style();
        }

        &.@{menu-prefix-cls}-selected {
          color: ~'@{menu-@{theme}-color-item_selected}';

          .@{prefix}-icon {
            color: ~'@{menu-@{theme}-color-icon_selected}';
          }
        }

        &.@{menu-prefix-cls}-disabled {
          background-color: ~'@{menu-@{theme}-color-bg-item_disabled}';
          color: ~'@{menu-@{theme}-color-item_disabled}';

          .@{prefix}-icon {
            color: ~'@{menu-@{theme}-color-icon_disabled}';
          }
        }
      };

      .applyStyleToItem(@item-style);

      // 只有 menuItem 选中时需要背景色
      .@{menu-prefix-cls}-item.@{menu-prefix-cls}-selected {
        background-color: ~'@{menu-@{theme}-color-bg-item_selected}';
      }

      //  子菜单被选中时，没有背景色，所以可以单独设置字体色
      .@{menu-prefix-cls}-inline-header.@{menu-prefix-cls}-selected {
        color: ~'@{menu-@{theme}-color-submenu_selected}';

        .@{prefix}-icon {
          color: ~'@{menu-@{theme}-color-submenu_selected}';
        }

        &:hover {
          background-color: ~'@{menu-@{theme}-color-bg-submenu_selected_hover}';
        }
      }

      // 为水平菜单添加项目选中的样式
      &.@{menu-prefix-cls}-horizontal {
        @item-selected-style: {
          &.@{menu-prefix-cls}-selected {
            background: none;
            .text-color-transition();

            &:hover {
              background-color: ~'@{menu-@{theme}-color-bg-item_hover}';
            }
          }
        };

        .applyStyleToItem(@item-selected-style);
      }

      // 处理标题样式
      .@{menu-prefix-cls}-group-title {
        color: ~'@{menu-@{theme}-color-group-title}';
        // 快速消除 hover 的特殊样式
        pointer-events: none;
      }

      // 展开折叠按钮颜色
      .@{menu-prefix-cls}-collapse-button {
        background-color: ~'@{menu-@{theme}-color-bg-button}';
        color: ~'@{menu-@{theme}-color-button}';

        &:hover {
          background-color: ~'@{menu-@{theme}-color-bg-button_hover}';
        }

        &:focus-visible {
          box-shadow: 0 0 0 2px @color-primary-6;
        }
      }
    }
  }

  .item-base();
  .theme(light);
  .theme(dark);

  // 校正 a 标签颜色
  a,
  a:hover,
  a:focus,
  a:active {
    color: inherit;
    cursor: inherit;
    text-decoration: none;
  }

  &-item-inner {
    > a:only-child::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }

  &-inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  &-vertical {
    .item-mode(vertical);

    .@{menu-prefix-cls}-inner {
      padding: @menu-vertical-padding-vertical @menu-vertical-padding-horizontal;
    }

    .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-indented {
      display: flex;
    }

    // 为 header 右侧预留下放置 suffixIcon 的空间
    .@{menu-prefix-cls}-pop-header,
    .@{menu-prefix-cls}-inline-header {
      padding-right: @menu-vertical-item-padding-horizontal + 16;
    }
  }

  // 水平菜单中，仅允许出现普通 item 和 popSubMenu
  &-horizontal {
    width: auto;
    height: auto;

    .item-mode(horizontal);

    .@{menu-prefix-cls}-inner {
      display: flex;
      align-items: center;
      padding: @menu-horizontal-padding-vertical @menu-horizontal-padding-horizontal;
    }

    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-pop {
      display: inline-block;
      vertical-align: middle;
      flex-shrink: 0;

      &:not(:first-child) {
        margin-left: @menu-horizontal-item-gap;
      }
    }

    .@{menu-prefix-cls}-pop::after {
      content: ' ';
      width: 100%;
      height: @menu-horizontal-padding-vertical;
      position: absolute;
      left: 0;
      bottom: -$height;
    }
  }

  // 水平菜单的动态折叠容器
  &-overflow {
    &-wrap {
      width: 100%;
    }

    &-sub-menu-mirror {
      margin-left: @menu-horizontal-item-gap;
    }

    &-sub-menu-mirror,
    &-hidden-menu-item {
      position: absolute !important;
      white-space: nowrap;
      visibility: hidden;
      pointer-events: none;
    }
  }

  // 选中状态下的提示浮标，相对于 MenuItem 定位
  &-selected-label {
    position: absolute;
    left: @menu-horizontal-item-padding-horizontal;
    right: $left;
    bottom: -@menu-horizontal-padding-vertical;
    height: @menu-height-label-item-selected;
    background-color: @menu-color-label-item-selected;
    animation: ~'@{prefix}-menu-selected-item-label-enter' @transition-duration-2 @transition-timing-function-linear;
  }

  &-pop-button {
    width: auto;
    background: none;
    box-shadow: none;

    &.@{menu-prefix-cls}-collapse {
      width: auto;
    }

    @item-style: {
      width: @menu-pop-button-size;
      height: $width;
      line-height: $height;
      border-radius: 50%;
      border: 1px solid @menu-pop-button-border-color;
      box-shadow: @menu-pop-button-box-shadow;
      margin-bottom: @menu-pop-button-margin-bottom;
    };

    .applyStyleToItem(@item-style);
  }

  // 折叠样式
  &-collapse {
    width: @menu-collapse-width;

    .@{menu-prefix-cls}-inner {
      padding: @menu-collapse-padding-vertical @menu-collapse-padding-horizontal;
    }

    .@{menu-prefix-cls}-group-title,
    .@{menu-prefix-cls}-icon-suffix {
      display: none;
    }

    // Hide text after icon when menu is collapsed
    @style-item-text: {
      .@{prefix}-icon {
        margin-left: 1px;
        margin-right: 100vw;
      }
    };

    .applyStyleToItem(@style-item-text);

    & &-button {
      right: unset;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  // 折叠按钮
  &-collapse-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: @menu-width-collapse-button;
    height: @menu-height-collapse-button;
    border-radius: @menu-border-radius-collapse-button;
    cursor: pointer;
  }

  // sub-menu-inline 的内容区域样式
  &-inline-content {
    overflow: hidden;
    height: auto;
    transition: height @transition-duration-2 @transition-timing-function-standard;
  }

  // 弹出的 ToolTip 中 a 标签的样式
  &-item-tooltip a {
    color: inherit;
    cursor: pointer;
    text-decoration: none;

    &:hover,
    &:focus,
    &:active {
      color: inherit;
    }

    &::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }

  // 弹出菜单浮层三角箭头
  &-pop-trigger {
    &.@{prefix}-trigger-position-bl {
      transform: translateY(@menu-horizontal-padding-vertical);

      .@{prefix}-trigger-arrow {
        z-index: 0;
        border-left: 1px solid @menu-color-border-popup;
        border-top: 1px solid @menu-color-border-popup;
      }
    }

    &.@{prefix}-trigger[trigger-placement='rt'] {
      transform: translateX(@menu-vertical-padding-horizontal);

      .@{prefix}-trigger-arrow {
        z-index: 0;
        border-left: 1px solid @menu-color-border-popup;
        border-bottom: 1px solid @menu-color-border-popup;
      }
    }

    &.@{prefix}-trigger[trigger-placement='lt'] {
      transform: translateX(-@menu-vertical-padding-horizontal);

      .@{prefix}-trigger-arrow {
        z-index: 0;
        border-right: 1px solid @menu-color-border-popup;
        border-top: 1px solid @menu-color-border-popup;
      }
    }

    .@{prefix}-dropdown-menu-dark ~ .@{prefix}-trigger-arrow-container {
      .@{prefix}-trigger-arrow {
        background-color: @menu-dark-color-bg;
        border-color: @menu-dark-color-bg;
      }
    }
  }
}

.@{menu-prefix-cls}-rtl {
  direction: rtl;

  @rtl-item-style: {
    .@{prefix}-icon {
      margin-right: 0;
      margin-left: @menu-margin-right-item-prefix-icon;
    }
  };

  .applyStyleToItem(@rtl-item-style);

  .rtl-item-mode(@mode) {
    @rtl-style-both: {
      .@{menu-prefix-cls}-icon-suffix .@{prefix}-icon {
        margin-left: 0;
      }
    };

    @rtl-style-vertical-only: {
      text-overflow: clip; // ellipsis on rtl layout error

      .@{menu-prefix-cls}-item-inner {
        text-overflow: clip;
      }

      .@{menu-prefix-cls}-icon-suffix {
        right: initial;
        left: @menu-vertical-item-padding-horizontal;
      }
    };

    @rtl-style-horizontal-only: {
      .@{prefix}-icon {
        margin-right: 0;
        margin-left: @menu-horizontal-margin-right-item-prefix-icon;
      }

      .@{menu-prefix-cls}-icon-suffix {
        margin-left: 0;
        margin-right: @menu-margin-left-item-suffix-icon;
      }
    };

    .applyStyleToItem(@rtl-style-both);
    .applyStyleToItem(if(@mode = vertical, @rtl-style-vertical-only, @rtl-style-horizontal-only));
  }

  &.@{menu-prefix-cls}-horizontal {
    .rtl-item-mode(horizontal);

    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-pop {
      &:not(:first-child) {
        margin-left: 0;
        margin-right: @menu-horizontal-item-gap;
      }
    }
  }

  &.@{menu-prefix-cls}-vertical {
    .rtl-item-mode(vertical);

    .@{menu-prefix-cls}-pop-header,
    .@{menu-prefix-cls}-inline-header {
      padding-right: @menu-vertical-item-padding-horizontal;
      padding-left: @menu-vertical-item-padding-horizontal + 16;
    }
  }

  .@{menu-prefix-cls}-pop::after {
    right: 0;
    left: initial;
  }

  .@{menu-prefix-cls}-collapse {
    @rtl-style-item-text: {
      .@{prefix}-icon {
        margin-left: 100vw;
        margin-right: 1px;
      }
    };
    .applyStyleToItem(  @rtl-style-item-text);
  }

  .@{menu-prefix-cls}-pop-trigger {
    &.@{prefix}-trigger-position-bl {
      .@{prefix}-trigger-arrow {
        border-left: none;
        border-right: 1px solid @menu-color-border-popup;
      }
    }

    &.@{prefix}-trigger[trigger-placement='rt'] {
      transform: translateX(-@menu-vertical-padding-horizontal);
    }

    &.@{prefix}-trigger[trigger-placement='lt'] {
      transform: translateX(@menu-vertical-padding-horizontal);

      .@{prefix}-trigger-arrow {
        border-right: none;
        border-left: 1px solid @menu-color-border-popup;
      }
    }
  }
}


/********** Menu end ***************/
    


/********** Modal  ***************/



@modal-border-radius: @radius-medium;
@modal-size-tip-icon: 18px;
@modal-margin-top: 100px;
@modal-margin-tip-icon-right: @spacing-5;
@modal-margin-footer-button-left: @spacing-6;
@modal-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@modal-border-width: @border-none;
@modal-box-shadow: @shadow-none;
@modal-color-header-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@modal-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@modal-font-header-size: @font-size-title-1;
@modal-font-header-weight: @font-weight-500;
@modal-font-content-size: @font-size-body-3;
@modal-default-align-header: center;
@modal-simple-align-header: center;
@modal-default-align-footer: right;
@modal-simple-align-footer: center;

@modal-default-padding-horizontal: @spacing-8;
@modal-default-size-header-height: @size-12;
@modal-default-padding-content-vertical: @spacing-9;
@modal-default-padding-footer-vertical: @spacing-7;
@modal-default-size-width: 520px;

@modal-simple-size-width: 464px;
@modal-simple-padding-horizontal: @spacing-10;
@modal-simple-padding-top: @spacing-9;
@modal-simple-padding-bottom: @spacing-10;
@modal-simple-margin-footer-top: @spacing-10;
@modal-simple-margin-content-top: @spacing-9;

@modal-position-close-icon-right: 16px;
@modal-font-size-close-icon: 12px;
@modal-color-close-icon: var(~'@{arco-cssvars-prefix}-color-text-1');


@modal-prefix-cls: ~'@{prefix}-modal';

.@{modal-prefix-cls}-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: @z-index-modal;
  display: none;
  background-color: var(~'@{arco-cssvars-prefix}-color-mask-bg');
}

.@{modal-prefix-cls}-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: @z-index-modal;
  overflow: auto;

  &-no-mask {
    pointer-events: none;

    .@{modal-prefix-cls} {
      pointer-events: auto;
    }
  }

  &&-align-center {
    text-align: center;
    white-space: nowrap;

    &::after {
      content: '';
      vertical-align: middle;
      display: inline-block;
      height: 100%;
      width: 0;
    }

    .@{modal-prefix-cls} {
      top: 0;
      vertical-align: middle;
      display: inline-block;
    }
  }
}

.@{modal-prefix-cls} {
  position: relative;
  margin: 0 auto;
  top: @modal-margin-top;
  width: @modal-default-size-width;
  border-radius: @modal-border-radius;
  border: @modal-border-width solid @modal-color-border;
  background-color: var(~'@{arco-cssvars-prefix}-color-bg-3');
  line-height: @line-height-base;
  text-align: left;
  white-space: initial;
  box-shadow: @modal-box-shadow;
  box-sizing: border-box;

  &-header {
    width: 100%;
    box-sizing: border-box;
    padding: 0 @modal-default-padding-horizontal;
    border-bottom: @border-1 solid @modal-color-border;
    height: @modal-default-size-header-height;
    display: flex;
    align-items: center;

    .@{modal-prefix-cls}-title {
      flex: 1;
      text-align: @modal-default-align-header;
    }
  }

  &-content {
    position: relative;
    padding: @modal-default-padding-content-vertical @modal-default-padding-horizontal;
    color: @modal-color-content-text;
    font-size: @modal-font-content-size;
  }

  &-footer {
    border-top: @border-1 solid @modal-color-border;
    width: 100%;
    box-sizing: border-box;
    text-align: @modal-default-align-footer;
    padding: @modal-default-padding-footer-vertical @modal-default-padding-horizontal;

    > .@{prefix}-btn {
      margin-left: @modal-margin-footer-button-left;

      &:only-child {
        margin-left: 0;
      }
    }
  }

  & &-close-icon {
    position: absolute;
    right: @modal-position-close-icon-right +
      ((@icon-hover-size-default-height - @modal-font-size-close-icon) / 2);
    top: ((@modal-default-size-header-height - @modal-font-size-close-icon) / 2);
    font-size: @modal-font-size-close-icon;
    cursor: pointer;
    color: @modal-color-close-icon;
  }

  &-title {
    color: @modal-color-header-text;
    font-size: @modal-font-header-size;
    font-weight: @modal-font-header-weight;

    .@{prefix}-icon {
      font-size: @modal-size-tip-icon;
      margin-right: @modal-margin-tip-icon-right;
      // round是因为带有小数的时候会抖动一下。 这么计算是为了在修改@modal-font-header-size这个token时，vertical-align跟着调整，保证对齐
      vertical-align: round(-(@modal-size-tip-icon * 0.2)) + ((@modal-font-header-size - 14px) / 2);

      &-info-circle-fill {
        color: @color-primary-6;
      }

      &-check-circle-fill {
        color: @color-success-6;
      }

      &-exclamation-circle-fill {
        color: @color-warning-6;
      }

      &-close-circle-fill {
        color: @color-danger-6;
      }
    }
  }
}

// 简洁模式
.@{modal-prefix-cls}-simple {
  padding: @modal-simple-padding-top @modal-simple-padding-horizontal @modal-simple-padding-bottom;
  width: @modal-simple-size-width;

  .@{modal-prefix-cls}-header,
  .@{modal-prefix-cls}-footer {
    border: none;
    padding: 0;
    height: unset;
  }

  .@{modal-prefix-cls}-header {
    margin-bottom: @modal-simple-margin-content-top;
  }

  .@{modal-prefix-cls}-title {
    text-align: @modal-simple-align-header;
  }

  .@{modal-prefix-cls}-footer {
    text-align: @modal-simple-align-footer;
    margin-top: @modal-simple-margin-footer-top;
  }

  .@{modal-prefix-cls}-content {
    padding: 0;
  }
}

.zoomModal-enter,
.zoomModal-appear {
  opacity: 0;
  transform: scale(0.5, 0.5);
}

.zoomModal-enter-active,
.zoomModal-appear-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: opacity @transition-duration-4 @transition-timing-function-overshoot,
    transform @transition-duration-4 @transition-timing-function-overshoot;
}

.zoomModal-exit {
  opacity: 1;
  transform: scale(1, 1);
}

.zoomModal-exit-active {
  opacity: 0;
  transform: scale(0.5, 0.5);
  transition: opacity @transition-duration-4 @transition-timing-function-overshoot,
    transform @transition-duration-4 @transition-timing-function-overshoot;
}

.fadeModal-enter,
.fadeModal-appear {
  opacity: 0;
}

.fadeModal-enter-active,
.fadeModal-appear-active {
  opacity: 1;
  transition: opacity @transition-duration-4 @transition-timing-function-overshoot;
}

.fadeModal-exit {
  opacity: 1;
}

.fadeModal-exit-active {
  opacity: 0;
  transition: opacity @transition-duration-4 @transition-timing-function-overshoot;
}

.@{modal-prefix-cls}-rtl {
  direction: rtl;

  .@{modal-prefix-cls}-footer {
    text-align: unset;

    > .@{prefix}-btn {
      margin-left: 0;
      margin-right: @modal-margin-footer-button-left;

      &:only-child {
        margin-right: 0;
      }
    }
  }

  .@{modal-prefix-cls}-title {
    .@{prefix}-icon {
      margin-right: 0;
      margin-left: @modal-margin-tip-icon-right;
    }
  }

  .@{modal-prefix-cls}-close-icon {
    right: initial;
    left: @modal-position-close-icon-right +
      ((@icon-hover-size-default-height - @modal-font-size-close-icon) / 2);
  }

  &.@{modal-prefix-cls}-simple {
    .@{modal-prefix-cls}-footer {
      text-align: @modal-simple-align-footer;
    }
  }
}


/********** Modal end ***************/
    


/********** Notification  ***************/



@notification-wrapper-margin-top: @spacing-8;
@notification-wrapper-margin-bottom: @spacing-8;
@notification-wrapper-margin-left: @spacing-8;
@notification-wrapper-margin-right: @spacing-8;

@notification-border-radius: @radius-medium;
@notification-margin-bottom: @spacing-8;
@notification-width: 300px;
@notification-padding-top: @spacing-8;
@notification-padding-bottom: @spacing-8;
@notification-padding-left: @spacing-8;
@notification-padding-right: @spacing-8;
@notification-font-size-icon: 24px;
@notification-font-size-title: @font-size-title-1;
@notification-font-size-content: @font-size-body-3;
@notification-icon-margin-right: @spacing-7;
@notification-title-margin-bottom: @spacing-2;
@notification-btn-wrapper-margin-top: @spacing-7;

@notification-border-width: 1px;
@notification-border-style: solid;

@notification-color-close-icon: var(~'@{arco-cssvars-prefix}-color-text-1');
@notification-close-icon-font-size: 12px;
@notification-close-icon-top: @spacing-6;
@notification-close-icon-right: @spacing-6;

@notification-normal-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@notification-normal-color-icon: var(~'@{arco-cssvars-prefix}-color-text-1');
@notification-normal-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@notification-normal-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@notification-normal-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

@notification-info-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@notification-info-color-icon: @color-primary-6;
@notification-info-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@notification-info-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@notification-info-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

@notification-success-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@notification-success-color-icon: @color-success-6;
@notification-success-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@notification-success-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@notification-success-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

@notification-warning-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@notification-warning-color-icon: @color-warning-6;
@notification-warning-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@notification-warning-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@notification-warning-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

@notification-error-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@notification-error-color-icon: @color-danger-6;
@notification-error-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
@notification-error-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
@notification-error-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


@notification-prefix-cls: ~'@{prefix}-notification';

.@{notification-prefix-cls}-wrapper {
  position: fixed;
  z-index: @z-index-notification;

  &-topLeft {
    left: @notification-wrapper-margin-left;
    top: @notification-wrapper-margin-top;
  }

  &-topRight {
    right: @notification-wrapper-margin-right;
    top: @notification-wrapper-margin-top;

    .@{notification-prefix-cls} {
      margin-left: auto;
    }
  }

  &-bottomLeft {
    bottom: @notification-wrapper-margin-bottom;
    left: @notification-wrapper-margin-left;
  }

  &-bottomRight {
    bottom: @notification-wrapper-margin-bottom;
    right: @notification-wrapper-margin-right;

    .@{notification-prefix-cls} {
      margin-left: auto;
    }
  }
}

.@{notification-prefix-cls} {
  display: flex;
  position: relative;
  width: @notification-width + @notification-padding-right + @notification-padding-left;
  padding: @notification-padding-top @notification-padding-right @notification-padding-bottom
    @notification-padding-left;
  border-radius: @notification-border-radius;
  border: @notification-border-width @notification-border-style @notification-normal-color-border;
  margin-bottom: @notification-margin-bottom;
  background-color: @notification-normal-color-bg;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 15%);
  overflow: hidden;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity @transition-duration-2 @transition-timing-function-linear;

  &-icon {
    font-size: @notification-font-size-icon;
    display: inline-flex;
    align-items: center;
    color: @notification-normal-color-icon;
  }

  &-info {
    background-color: @notification-info-color-bg;
    border-color: @notification-info-color-border;
  }

  &-info &-icon {
    color: @notification-info-color-icon;
  }

  &-success {
    background-color: @notification-success-color-bg;
    border-color: @notification-success-color-border;
  }

  &-success &-icon {
    color: @notification-success-color-icon;
  }

  &-warning {
    background-color: @notification-warning-color-bg;
    border-color: @notification-warning-color-border;
  }

  &-warning &-icon {
    color: @notification-warning-color-icon;
  }

  &-error {
    background-color: @notification-error-color-bg;
    border-color: @notification-error-color-border;
  }

  &-error &-icon {
    color: @notification-error-color-icon;
  }

  &-left {
    padding-right: @notification-icon-margin-right;
  }

  &-right {
    flex: 1;
    word-break: break-word;
  }

  &-title {
    font-size: @notification-font-size-title;
    font-weight: @font-weight-500;
    color: @notification-normal-color-text-title;
    margin-bottom: @notification-title-margin-bottom;
  }

  &-content {
    font-size: @notification-font-size-content;
    color: @notification-normal-color-text-content;
  }

  &-info &-title {
    color: @notification-info-color-text-title;
  }

  &-info &-content {
    color: @notification-info-color-text-content;
  }

  &-success &-title {
    color: @notification-success-color-text-title;
  }

  &-success &-content {
    color: @notification-success-color-text-content;
  }

  &-warning &-title {
    color: @notification-warning-color-text-title;
  }

  &-warning &-content {
    color: @notification-warning-color-text-content;
  }

  &-error &-title {
    color: @notification-error-color-text-title;
  }

  &-error &-content {
    color: @notification-error-color-text-content;
  }

  &-btn-wrapper {
    margin-top: @notification-btn-wrapper-margin-top;
    text-align: right;
  }

  & &-close-btn {
    position: absolute;
    cursor: pointer;
    top: @notification-close-icon-top;
    right: @notification-close-icon-right;
    color: @notification-color-close-icon;
    font-size: @notification-close-icon-font-size;

    > svg {
      position: relative;
    }
  }

  .icon-hover(
    @notification-prefix-cls,
    @notification-close-icon-font-size,
    @notification-close-icon-font-size + 8px
  );
}

.slideNoticeLeft-enter,
.slideNoticeLeft-appear {
  transform: translateX(-100%);
}

.slideNoticeLeft-enter-active,
.slideNoticeLeft-appear-active {
  transform: translateX(0);
  transition: transform @transition-duration-4 @transition-timing-function-overshoot;
}

.slideNoticeLeft-exit {
  opacity: 0;
}

.slideNoticeLeft-exit-active {
  opacity: 0;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  transition: all @transition-duration-3 @transition-timing-function-standard;
}

.slideNoticeRight-enter,
.slideNoticeRight-appear {
  transform: translateX(100%);
}

.slideNoticeRight-enter-active,
.slideNoticeRight-appear-active {
  transform: translateX(0);
  transition: transform @transition-duration-4 @transition-timing-function-overshoot;
}

.slideNoticeRight-exit {
  opacity: 0;
}

.slideNoticeRight-exit-active {
  opacity: 0;
  height: 0;
  transition: all @transition-duration-3 @transition-timing-function-standard;
}

.@{notification-prefix-cls}-wrapper-rtl {
  direction: rtl;
}

.@{notification-prefix-cls}-rtl {
  direction: rtl;
  .@{notification-prefix-cls}-left {
    padding-right: 0;
    padding-left: @notification-icon-margin-right;
  }

  .@{notification-prefix-cls}-btn-wrapper {
    text-align: left;
  }

  .@{notification-prefix-cls}-close-btn {
    right: initial;
    left: @notification-close-icon-right;
  }
}


/********** Notification end ***************/
    


/********** PageHeader  ***************/



@page-header-padding-left: @spacing-9;
@page-header-padding-right: @spacing-8;
@page-header-padding-vertical: @spacing-7;
@page-header-padding-vertical_breadcrumb: @spacing-6;
@page-header-color-back-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@page-header-size-back-icon: @font-size-body-3;
@page-header-color-back-icon-box-shadow: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@page-header-margin-back-icon-right: @spacing-6;
@page-header-line-height: @size-7;
@page-header-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@page-header-weight-title-text: 600;
@page-header-color-back-icon-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@page-header-size-back-icon-bg_hover: 30px;
@page-header-size-title-text: @font-size-title-2;

@page-header-color-divider-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');
@page-header-size-divider-height: @size-4;
@page-header-size-divider-width: 1px;
@page-header-margin-divider-left: @spacing-6;
@page-header-margin-divider-right: @spacing-6;

@page-header-color-sub-title-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@page-header-size-sub-title-text: @font-size-body-3;
@page-header-color-header-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@page-header-border-header-width: @border-1;
@page-header-border-header-style: @border-solid;
@page-header-padding-content-vertical: @spacing-8;
@page-header-padding-content-horizontal: @spacing-10;
@page-header-margin-breadcrumb-bottom: @spacing-2;

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


@page-header-prefix-cls: ~'@{prefix}-page-header';

.@{page-header-prefix-cls} {
  padding: @page-header-padding-vertical 0;

  .@{prefix}-breadcrumb + &-head {
    margin-top: @page-header-margin-breadcrumb-bottom;
  }

  // 头部
  &-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: @page-header-line-height;

    &-left {
      display: flex;
      align-items: center;
    }

    &-wrapper {
      padding-left: @page-header-padding-left;
      padding-right: @page-header-padding-right;
    }

    &-main {
      display: flex;
      align-items: center;
      // 最小高度避免按钮hover下背景被hidden
      min-height: @page-header-size-back-icon-bg_hover;
      overflow: hidden;

      // 带有返回按钮时，避免 overflow:hidden 导致返回按钮hover状态背景色显示不全
      &-with-back {
        margin-left: (@page-header-size-back-icon / 2) - (@page-header-size-back-icon-bg_hover / 2);
        padding-left: (@page-header-size-back-icon-bg_hover / 2) - (@page-header-size-back-icon / 2);
      }
    }

    &-extra {
      white-space: nowrap;
    }
  }

  .icon-hover(
    @page-header-prefix-cls,
    @page-header-size-back-icon,
    @page-header-size-back-icon-bg_hover
  );

  .icon-hover-bg(
    @page-header-prefix-cls,
    @page-header-color-back-icon-bg_hover
  );

  &-back {
    color: @page-header-color-back-icon;
    font-size: @page-header-size-back-icon;
    margin-right: @page-header-margin-back-icon-right;

    &:focus-visible::before {
      box-shadow: inset 0 0 0 2px @page-header-color-back-icon-box-shadow;
    }

    &-icon {
      position: relative;
    }
  }

  &-title {
    .text-ellipsis();

    color: @page-header-color-title-text;
    font-size: @page-header-size-title-text;
    font-weight: @page-header-weight-title-text;
  }

  &-divider {
    width: @page-header-size-divider-width;
    margin-left: @page-header-margin-divider-left;
    margin-right: @page-header-margin-divider-right;
    height: @page-header-size-divider-height;
    background-color: @page-header-color-divider-bg;
  }

  &-sub-title {
    .text-ellipsis();

    color: @page-header-color-sub-title-text;
    font-size: @page-header-size-sub-title-text;
  }

  // 内容区
  &-content {
    padding: @page-header-padding-content-vertical @page-header-padding-content-horizontal;
    border-top: @page-header-border-header-width @page-header-border-header-style
      @page-header-color-header-border;
  }

  &-footer {
    padding: @page-header-padding-vertical @page-header-padding-right 0 @page-header-padding-left;
  }

  &-with-breadcrumb {
    padding: @page-header-padding-vertical_breadcrumb 0;

    .@{page-header-prefix-cls}-footer {
      padding-top: @page-header-padding-vertical_breadcrumb;
    }
  }

  &-with-content &-head-wrapper {
    padding-bottom: @page-header-padding-vertical_breadcrumb;
  }

  &-with-footer {
    padding-bottom: 0;
  }

  &-wrap &-head {
    flex-wrap: wrap;

    .@{page-header-prefix-cls}-head-extra {
      margin-top: @page-header-margin-breadcrumb-bottom;
    }
  }
}

.@{page-header-prefix-cls}-rtl {
  .@{page-header-prefix-cls}-head {
    &-wrapper {
      padding-left: @page-header-padding-right;
      padding-right: @page-header-padding-left;
    }

    &-main {
      &-with-back {
        margin-right: (@page-header-size-back-icon / 2) - (@page-header-size-back-icon-bg_hover / 2);
        padding-right: (@page-header-size-back-icon-bg_hover / 2) -
          (@page-header-size-back-icon / 2);
        margin-left: 0;
        padding-left: 0;
      }
    }
  }

  .@{page-header-prefix-cls}-back {
    margin-left: @page-header-margin-back-icon-right;
    margin-right: 0;
  }

  .@{page-header-prefix-cls}-divider {
    margin-right: @page-header-margin-divider-left;
    margin-left: @page-header-margin-divider-right;
  }
}


/********** PageHeader end ***************/
    


/********** Pagination  ***************/



@pagination-prefix-cls: ~'@{prefix}-pagination';

@pagination-item-border-radius: @radius-small;
@pagination-item-spacing: @spacing-4;
@pagination-margin-total-spacing: @spacing-4;
@pagination-margin-option-left: @spacing-4;
@pagination-margin-jumper-left: @spacing-4;

@pagination-size-mini: @size-mini;
@pagination-size-small: @size-small;
@pagination-size-default: @size-default;
@pagination-size-large: @size-large;

@pagination-size-mini-font-size: @font-size-body-1;
@pagination-size-small-font-size: @font-size-body-3;
@pagination-size-default-font-size: @font-size-body-3;
@pagination-size-large-font-size: @font-size-body-3;

@pagination-size-icon-arrow_mini: @size-3;
@pagination-size-icon-arrow_small: @size-3;
@pagination-size-icon-arrow_default: @size-3;
@pagination-size-icon-arrow_large: 14px;

@pagination-size-icon-ellipsis: @size-4;

@pagination-border-width: @border-none;
@pagination-color-bg-item: @color-transparent;
@pagination-color-bg-item_active: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@pagination-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
@pagination-color-bg-item_disabled: @color-transparent;
@pagination-color-bg-item_active_disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');

@pagination-color-item-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@pagination-color-item-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
@pagination-color-item-text_active: @color-primary-6;
@pagination-color-item-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@pagination-color-item-text_active_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');

@pagination-color-item-border: @color-transparent;
@pagination-color-item-border_active: @color-transparent;
@pagination-color-item-border_hover: @color-transparent;
@pagination-color-item-border_disabled: @color-transparent;
@pagination-color-item-border_active_disabled: @color-transparent;

@pagination-color-icon-arrow: var(~'@{arco-cssvars-prefix}-color-text-2');
@pagination-color-icon-arrow-bg: @color-transparent;
@pagination-color-icon-arrow-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
@pagination-color-icon-arrow-bg_disabled: @color-transparent;
@pagination-color-icon-arrow-text_hover: @color-primary-6;
@pagination-color-icon-arrow-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// Simple
@pagination-simple-input-width: @size-10;
@pagination-simple-color-icon-arrow: var(~'@{arco-cssvars-prefix}-color-text-2');
@pagination-simple-color-icon-arrow-bg: @color-transparent;
@pagination-simple-color-icon-arrow-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
@pagination-simple-color-icon-arrow-bg_disabled: @color-transparent;
@pagination-simple-color-icon-arrow-text_hover: @color-primary-6;
@pagination-simple-color-icon-arrow-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@pagination-simple-margin-prev-right: @spacing-2;
@pagination-simple-margin-next-left: @spacing-6;
@pagination-simple-margin-separator-left: @spacing-6;
@pagination-simple-margin-separator-right: @spacing-6;
// jumper
@patination-jumper-input-width: @size-10;
@pagination-color-jumper-goto: var(~'@{arco-cssvars-prefix}-color-text-2');

// total text
@pagination-color-text-total: var(~'@{arco-cssvars-prefix}-color-text-1');


.page-item(@size) {
  @height: ~'pagination-size-@{size}';

  font-size: ~'@{pagination-size-@{size}-font-size}';
  min-width: @@height;
  height: @@height;
  line-height: @@height - (@pagination-border-width * 2);

  &-prev,
  &-next {
    font-size: ~'@{pagination-size-icon-arrow_@{size}}';
  }
}

.option(@size) {
  font-size: ~'@{pagination-size-@{size}-font-size}';
  height: ~'@{pagination-size-@{size}}';
  line-height: 0;
}

.total(@size) {
  font-size: ~'@{pagination-size-@{size}-font-size}';
  line-height: ~'@{pagination-size-@{size}}';
}

.@{pagination-prefix-cls} {
  display: flex;
  align-items: center;
  font-size: @pagination-size-default-font-size;

  &-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
  }

  &-item {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    list-style: none;
    box-sizing: border-box;
    cursor: pointer;
    outline: 0;
    user-select: none;
    border-radius: @pagination-item-border-radius;
    color: @pagination-color-item-text;
    border: @pagination-border-width solid @pagination-color-item-border;
    background-color: @pagination-color-bg-item;

    .page-item(default);

    &-disabled {
      cursor: not-allowed;
      background-color: @pagination-color-bg-item_disabled;
      color: @pagination-color-item-text_disabled;
      border-color: @pagination-color-item-border_disabled;
    }

    &:not(&-disabled):not(&-active):hover {
      background-color: @pagination-color-bg-item_hover;
      border-color: @pagination-color-item-border_hover;
      color: @pagination-color-item-text_hover;
    }

    &-active {
      transition: color @transition-duration-2 @transition-timing-function-linear,
        background-color @transition-duration-2 @transition-timing-function-linear;
      color: @pagination-color-item-text_active;
      background-color: @pagination-color-bg-item_active;
      border-color: @pagination-color-item-border_active;
    }

    &:not(:last-child) {
      margin-right: @pagination-item-spacing;
    }

    &:focus-visible {
      box-shadow: 0 0 0 2px var(~'@{arco-cssvars-prefix}-color-primary-light-3');
    }
  }

  &-item-prev,
  &-item-next {
    font-size: @pagination-size-icon-arrow_default;
    color: @pagination-color-icon-arrow;
    background-color: @pagination-color-icon-arrow-bg;

    &:not(.@{pagination-prefix-cls}-item-disabled):hover {
      background-color: @pagination-color-icon-arrow-bg_hover;
      color: @pagination-color-icon-arrow-text_hover;
    }

    // 解决少数情况下出现的图标不垂直水平剧中的 bug
    &::after {
      display: inline-block;
      content: '.';
      font-size: 0;
      vertical-align: middle;
    }
  }

  & &-item-prev&-item-disabled,
  & &-item-next&-item-disabled {
    color: @pagination-color-icon-arrow-text_disabled;
    background-color: @pagination-color-icon-arrow-bg_disabled;
  }

  &-item-jumper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: @pagination-size-icon-ellipsis;
  }

  /*** 快速跳转 ***/
  &-jumper {
    margin-left: @pagination-margin-jumper-left;

    > span {
      font-size: @pagination-size-default-font-size;
    }

    &-text-goto,
    &-text-goto-suffix {
      color: @pagination-color-jumper-goto;
    }
  }

  & &-jumper-input {
    width: @patination-jumper-input-width;
    text-align: center;
    margin-left: @pagination-item-spacing;
    margin-right: @pagination-item-spacing;
    padding-left: 2px;
    padding-right: 2px;
  }

  &-option {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    min-width: 0;
    position: relative;
    margin-left: @pagination-margin-option-left;

    .@{prefix}-select {
      width: auto;

      &-view-value {
        overflow: inherit;
        padding-right: 6px;
      }
    }

    .option(default);
  }

  &-total-text {
    display: inline-block;
    height: 100%;
    color: @pagination-color-text-total;
    margin-right: @pagination-margin-total-spacing;
    font-size: @pagination-size-default-font-size;
    .total(default);
  }

  // simple
  &-item-simple-pager {
    display: inline-block;
    vertical-align: middle;
    margin: 0 @pagination-simple-margin-next-left 0 @pagination-simple-margin-prev-right;
  }

  &-item-simple-pager &-jumper-separator {
    padding: 0 @pagination-simple-margin-separator-right 0 @pagination-simple-margin-separator-left;
  }

  &-simple &-item {
    margin-right: 0;
  }

  &-simple &-jumper {
    color: var(~'@{arco-cssvars-prefix}-color-text-1');
  }

  &-simple &-jumper {
    margin-left: 0;
  }

  &-simple &-jumper &-jumper-input {
    width: @pagination-simple-input-width;
    margin-left: 0;
  }

  &-simple &-item-prev,
  &-simple &-item-next {
    color: @pagination-simple-color-icon-arrow;
    background-color: @pagination-simple-color-icon-arrow-bg;

    &:not(.@{pagination-prefix-cls}-item-disabled):hover {
      background-color: @pagination-simple-color-icon-arrow-bg_hover;
      color: @pagination-simple-color-icon-arrow-text_hover;
    }
  }

  &-simple &-item-prev&-item-disabled,
  &-simple &-item-next&-item-disabled {
    color: @pagination-simple-color-icon-arrow-text_disabled;
    background-color: @pagination-simple-color-icon-arrow-bg_disabled;
  }

  // Disabled
  &-disabled {
    cursor: not-allowed;
  }

  &-disabled &-item,
  &-disabled &-item:not(&-item-disabled):not(&-item-active):hover {
    cursor: not-allowed;
    background-color: @pagination-color-bg-item_disabled;
    border-color: @pagination-color-item-border_disabled;
    color: @pagination-color-item-text_disabled;
  }

  &&-disabled &-item-active {
    background-color: @pagination-color-bg-item_active_disabled;
    border-color: @pagination-color-item-border_active_disabled;
    color: @pagination-color-item-text_active_disabled;
  }

  // size
  &-size-mini &-item {
    .page-item(mini);
  }

  &-size-mini &-total-text {
    .total(mini);
  }

  &-size-mini &-option {
    .option(mini);
  }

  &-size-mini &-jumper > span {
    font-size: @pagination-size-mini-font-size;
  }

  &-size-small &-item {
    .page-item(small);
  }

  &-size-small &-total-text {
    .total(small);
  }

  &-size-small &-option {
    .option(small);
  }

  &-size-small &-jumper > span {
    font-size: @pagination-size-small-font-size;
  }

  &-size-large &-item {
    .page-item(large);
  }

  &-size-large &-total-text {
    .total(large);
  }

  &-size-large &-option {
    .option(large);
  }

  &-size-large &-jumper > span {
    font-size: @pagination-size-large-font-size;
  }
}

.@{pagination-prefix-cls}-rtl {
  direction: rtl;

  .@{pagination-prefix-cls}-item {
    &:not(:last-child) {
      margin-right: 0;
      margin-left: @pagination-item-spacing;
    }

    &-simple-pager {
      margin: 0 @pagination-simple-margin-prev-right 0 @pagination-simple-margin-next-left;

      .@{pagination-prefix-cls}-jumper-separator {
        padding: 0 @pagination-simple-margin-separator-left 0
          @pagination-simple-margin-separator-right;
      }
    }
  }

  .@{pagination-prefix-cls}-jumper {
    margin-left: 0;
    margin-right: @pagination-margin-jumper-left;
  }

  & .@{pagination-prefix-cls}-jumper-input {
    margin-left: 0;
    margin-right: @pagination-item-spacing;
  }

  .@{pagination-prefix-cls}-option {
    margin-left: 0;
    margin-right: @pagination-margin-option-left;

    .@{prefix}-select {
      &-view-value {
        padding-right: 0;
        padding-left: 6px;
      }
    }
  }

  .@{pagination-prefix-cls}-total-text {
    margin-right: 0;
    margin-left: @pagination-margin-total-spacing;
  }

  &.@{pagination-prefix-cls}-simple {
    .@{pagination-prefix-cls}-item,
    .@{pagination-prefix-cls}-jumper,
    .@{pagination-prefix-cls}-jumper-input {
      margin-right: 0;
    }
  }
}


/********** Pagination end ***************/
    


/********** Popconfirm  ***************/



@popconfirm-padding-horizontal: @spacing-7;
@popconfirm-padding-vertical: @spacing-7;
@popconfirm-margin-title-bottom: @spacing-7;
@popconfirm-margin-content-top: @spacing-2;
@popconfirm-margin-content-bottom: @popconfirm-margin-title-bottom;
@popconfirm-size-title-icon: 18px;
@popconfirm-margin-icon-right: @spacing-4;
@popconfirm-margin-button-left: @spacing-4;
@popconfirm-font-title-size: @font-size-body-3;
@popconfirm-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-1');


@popconfirm-prefix-cls: ~'@{prefix}-popconfirm';

.@{popconfirm-prefix-cls} {
  &-content {
    padding: @popconfirm-padding-vertical @popconfirm-padding-horizontal;
    box-sizing: border-box;
  }

  &-title {
    position: relative;
    margin-bottom: @popconfirm-margin-title-bottom;
    font-size: @popconfirm-font-title-size;
    color: @popconfirm-color-title-text;
    display: flex;
    align-items: flex-start;

    &-icon {
      font-size: @popconfirm-size-title-icon;
      margin-right: @popconfirm-margin-icon-right;
      display: inline-flex;
      align-items: center;
      height: @line-height-base * @popconfirm-font-title-size;

      .@{prefix}-icon-exclamation-circle-fill {
        color: @color-warning-6;
      }
    }
  }

  &-has-content &-title {
    margin-bottom: 0;
    font-weight: @font-weight-500;
  }

  &-inner-content {
    margin-top: @popconfirm-margin-content-top;
    margin-bottom: @popconfirm-margin-content-bottom;
    padding-left: @popconfirm-size-title-icon + @popconfirm-margin-icon-right;
  }

  .@{popconfirm-prefix-cls}-btn {
    text-align: right;

    > button {
      margin-left: @popconfirm-margin-button-left;
    }
  }
}

.@{popconfirm-prefix-cls}-rtl {
  .@{popconfirm-prefix-cls} {
    &-title {
      &-icon {
        margin-left: @popconfirm-margin-icon-right;
        margin-right: 0;
      }
    }

    &-inner-content {
      padding-left: 0;
      padding-right: @popconfirm-size-title-icon + @popconfirm-margin-icon-right;
    }

    &-btn {
      text-align: left;

      > button {
        margin-right: @popconfirm-margin-button-left;
        margin-left: 0;
      }
    }
  }
}


/********** Popconfirm end ***************/
    


/********** Popover  ***************/



@popup-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@popup-color-content-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@popup-shadow: @shadow2-down;
@popup-padding-horizontal: @spacing-7;
@popup-padding-vertical: @spacing-6;
@popup-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@popup-font-title-size: @font-size-title-1;
@popup-margin-content-top: @spacing-2;
@popup-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@popup-font-size: @font-size-body-3;
@popup-border-radius: @radius-medium;


@popover-prefix-cls: ~'@{prefix}-popover';
@popconfirm-prefix-cls: ~'@{prefix}-popconfirm';

.@{popover-prefix-cls} {
  &-content {
    padding: @popup-padding-vertical @popup-padding-horizontal;
  }

  &-title {
    font-size: @popup-font-title-size;
    color: @popup-color-title-text;
    font-weight: @font-weight-500;
  }

  &-title + &-inner-content {
    margin-top: @popup-margin-content-top;
  }
}

.@{popover-prefix-cls},
.@{popconfirm-prefix-cls} {
  &-content {
    color: @popup-color-content-text;
    background-color: @popup-color-content-bg;
    box-shadow: @popup-shadow;
    max-width: none;
    width: 100%;
    font-size: @popup-font-size;
    border-radius: @popup-border-radius;
    line-height: @line-height-base;
    box-sizing: border-box;
    border: @border-1 solid @popup-color-border;

    &-inner {
      word-wrap: break-word;
      text-align: left;
    }
  }

  &-arrow.@{prefix}-trigger-arrow {
    background-color: @popup-color-content-bg;
    border: @border-1 solid @popup-color-border;
    z-index: 1;
  }
}

.@{popover-prefix-cls}-inner-rtl {
  direction: rtl;
  text-align: right;
}


/********** Popover end ***************/
    


/********** Progress  ***************/


@progress-line-color-line-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');
@progress-line-color-inner-bg: @color-primary-6;
@progress-line-color-inner-bg_success: @color-success-6;
@progress-line-color-inner-bg_error: @color-danger-6;
@progress-line-color-buffer-bg: var(~'@{arco-cssvars-prefix}-color-primary-light-3');

@progress-line-size-large-font-size: 16px;
@progress-line-size-small-font-size: @font-size-body-1;
@progress-line-size-default-font-size: @font-size-body-1;
@progress-line-size-large-margin-text-left: @spacing-7;
@progress-line-size-small-margin-text-left: @spacing-7;

@progress-line-color-icon_success: @color-success-6;
@progress-line-color-icon_error: @color-danger-6;
@progress-line-margin-text-left: @spacing-7;
@progress-line-margin-icon-left: @spacing-2;
@progress-line-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@progress-line-color-icon_normal: var(~'@{arco-cssvars-prefix}-color-text-2');

@progress-line-size-default-icon-size: 12px;
@progress-line-size-small-icon-size: 12px;
@progress-line-size-large-icon-size: 14px;

@progress-circle-size-small-font-size: @font-size-body-2;
@progress-circle-size-default-font-size: @font-size-body-3;
@progress-circle-size-large-font-size: 16px;

@progress-circle-size-small-icon-size: 14px;
@progress-circle-size-default-icon-size: @size-4;
@progress-circle-size-large-icon-size: @size-4;
@progress-circle-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');

@progress-circle-color-mask-stroke: var(~'@{arco-cssvars-prefix}-color-fill-3');
@progress-circle-size-mini-color-mask-stroke: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@progress-circle-size-mini-color-mask-stroke_success: var(~'@{arco-cssvars-prefix}-color-success-light-3');
@progress-circle-size-mini-color-mask-stroke_error: var(~'@{arco-cssvars-prefix}-color-danger-light-3');

@progress-circle-color-path-stroke: @color-primary-6;
@progress-circle-color-path-stroke_success: @color-success-6;
@progress-circle-color-path-stroke_error: @color-danger-6;

@progress-circle-color-icon_success: @color-success-6;
@progress-circle-color-icon_error: @color-danger-6;

@progress-steps-size-small-steps-item-width: 2px;
@progress-steps-margin-steps-item-right: 3px;
@progress-steps-margin-steps-item-right_small: 3px;
@progress-steps-color-item-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');
@progress-steps-color-item-bg_normal: @color-primary-6;
@progress-steps-color-item-bg_success: @progress-line-color-inner-bg_success;
@progress-steps-color-item-bg_error: @progress-line-color-inner-bg_error;
@progress-steps-color-item-bg_warning: @progress-line-color-inner-bg_warning;
@progress-steps-margin-text-left: @spacing-4;

@progress-line-color-inner-bg_warning: @color-warning-6;
@progress-line-color-icon_warning: @color-warning-6;
@progress-circle-size-mini-color-mask-stroke_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-3');
@progress-circle-color-path-stroke_warning: @color-warning-6;
@progress-circle-color-icon_warning: @color-warning-6;


@progress-prefix-cls: ~'@{prefix}-progress';

.@{progress-prefix-cls} {
  position: relative;
  line-height: 1;
  font-size: @progress-line-size-default-font-size;

  &-line,
  &-steps {
    display: inline-block;
    max-width: 100%;
    width: 100%;

    &-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 100%;
      height: 100%;
    }

    &-text {
      font-size: @progress-line-size-default-font-size;
      margin-left: @progress-line-margin-text-left;
      color: @progress-line-color-text;
      white-space: nowrap;
      text-align: right;
      flex-grow: 1;
      flex-shrink: 0;
      min-width: 32px;

      .@{prefix}-icon {
        font-size: @progress-line-size-default-icon-size;
        margin-left: @progress-line-margin-icon-left;
      }
    }
  }
  // type = line
  &-line {
    &-outer {
      background-color: @progress-line-color-line-bg;
      border-radius: 100px;
      width: 100%;
      position: relative;
      display: inline-block;
      overflow: hidden;
    }

    &-inner {
      height: 100%;
      border-radius: 100px;
      background-color: @progress-line-color-inner-bg;
      position: relative;
      transition: width 0.6s @transition-timing-function-standard,
        background 0.3s @transition-timing-function-standard;
      max-width: 100%;

      &-buffer {
        position: absolute;
        background-color: @progress-line-color-buffer-bg;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 0 100px 100px 0;
        max-width: 100%;
        transition: all 0.6s @transition-timing-function-standard;
      }

      &-animate::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(
          90deg,
          transparent 25%,
          rgba(255, 255, 255, 50%) 50%,
          transparent 75%
        );
        background-size: 400% 100%;
        animation: ~'@{prefix}-progress-loading' 1.5s @transition-timing-function-standard infinite;
      }
    }

    &-text {
      .@{prefix}-icon {
        color: @progress-line-color-icon_normal;
      }
    }
  }

  &-steps {
    &-outer {
      display: flex;
      width: 100%;
    }

    &-text {
      margin-left: @progress-steps-margin-text-left;
      min-width: unset;

      .@{prefix}-icon {
        color: @progress-line-color-icon_normal;
      }
    }

    &-item {
      height: 100%;
      flex: 1;
      background-color: @progress-steps-color-item-bg;
      position: relative;
      display: inline-block;

      &:not(:last-of-type) {
        margin-right: @progress-steps-margin-steps-item-right;
      }

      &:last-of-type {
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
      }

      &:first-of-type {
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
      }

      &-active {
        background-color: @progress-steps-color-item-bg_normal;
      }
    }

    // size small
    &.@{progress-prefix-cls}-small {
      width: auto;
    }

    &.@{progress-prefix-cls}-small &-item {
      width: @progress-steps-size-small-steps-item-width;
      flex: unset;
      border-radius: @progress-steps-size-small-steps-item-width;

      &:not(:last-of-type) {
        margin-right: @progress-steps-margin-steps-item-right_small;
      }
    }
  }

  &-is-warning {
    .@{progress-prefix-cls}-line-inner {
      background-color: @progress-line-color-inner-bg_warning;
    }

    .@{progress-prefix-cls}-steps-item-active {
      background-color: @progress-steps-color-item-bg_warning;
    }

    .@{progress-prefix-cls}-line-text .@{prefix}-icon,
    .@{progress-prefix-cls}-steps-text .@{prefix}-icon {
      color: @progress-line-color-icon_warning;
    }
  }

  &-is-success {
    .@{progress-prefix-cls}-line-inner {
      background-color: @progress-line-color-inner-bg_success;
    }

    .@{progress-prefix-cls}-steps-item-active {
      background-color: @progress-steps-color-item-bg_success;
    }

    .@{progress-prefix-cls}-line-text .@{prefix}-icon,
    .@{progress-prefix-cls}-steps-text .@{prefix}-icon {
      color: @progress-line-color-icon_success;
    }
  }

  &-is-error {
    .@{progress-prefix-cls}-line-inner {
      background-color: @progress-line-color-inner-bg_error;
    }

    .@{progress-prefix-cls}-steps-item-active {
      background-color: @progress-steps-color-item-bg_error;
    }

    .@{progress-prefix-cls}-line-text .@{prefix}-icon,
    .@{progress-prefix-cls}-steps-text .@{prefix}-icon {
      color: @progress-line-color-icon_error;
    }
  }

  // size
  &-small {
    .@{progress-prefix-cls}-line-text {
      font-size: @progress-line-size-small-font-size;
      margin-left: @progress-line-size-small-margin-text-left;
    }

    .@{progress-prefix-cls}-line-text .@{prefix}-icon {
      font-size: @progress-line-size-small-icon-size;
    }
  }

  &-large {
    .@{progress-prefix-cls}-line-text {
      font-size: @progress-line-size-large-font-size;
      margin-left: @progress-line-size-large-margin-text-left;
    }

    .@{progress-prefix-cls}-line-text .@{prefix}-icon {
      font-size: @progress-line-size-large-icon-size;
    }
  }
}

// type = circle
.@{progress-prefix-cls} {
  &-circle {
    display: inline-block;

    &-wrapper {
      position: relative;
      text-align: center;
      line-height: 1;
      display: inline-block;
      vertical-align: text-bottom;
    }

    &-svg {
      transform: rotate(-90deg);
    }

    &-text {
      font-size: @progress-circle-size-default-font-size;

      .@{prefix}-icon {
        font-size: @progress-circle-size-default-icon-size;
        color: @progress-line-color-icon_normal;
      }
    }

    .@{progress-prefix-cls}-circle-text {
      position: absolute;
      top: 50%;
      left: 50%;
      color: @progress-circle-color-text;
      transform: translate(-50%, -50%);
    }

    &-mask {
      stroke: @progress-circle-color-mask-stroke;
    }

    &-path {
      stroke: @progress-circle-color-path-stroke;
      transition: stroke-dashoffset 0.6s @transition-timing-function-linear 0s,
        stroke 0.6s @transition-timing-function-linear;
    }
  }

  &-mini {
    .@{progress-prefix-cls}-circle-mask {
      stroke: @progress-circle-size-mini-color-mask-stroke;
    }

    .@{progress-prefix-cls}-circle-path {
      stroke: @progress-circle-color-path-stroke;
    }

    &.@{progress-prefix-cls}-is-warning {
      .@{progress-prefix-cls}-circle-mask {
        stroke: @progress-circle-size-mini-color-mask-stroke_warning;
      }
    }

    &.@{progress-prefix-cls}-is-error {
      .@{progress-prefix-cls}-circle-mask {
        stroke: @progress-circle-size-mini-color-mask-stroke_error;
      }
    }

    &.@{progress-prefix-cls}-is-success {
      .@{progress-prefix-cls}-circle-mask {
        stroke: @progress-circle-size-mini-color-mask-stroke_success;
      }

      .@{progress-prefix-cls}-circle-wrapper .@{prefix}-icon-check {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }

    .@{progress-prefix-cls}-circle-text {
      position: static;
      top: unset;
      left: unset;
      transform: unset;
    }
  }

  &-small {
    .@{progress-prefix-cls}-circle-text {
      font-size: @progress-circle-size-small-font-size;

      .@{prefix}-icon {
        font-size: @progress-circle-size-small-icon-size;
      }
    }
  }

  &-large {
    .@{progress-prefix-cls}-circle-text {
      font-size: @progress-circle-size-large-font-size;

      .@{prefix}-icon {
        font-size: @progress-circle-size-large-icon-size;
      }
    }
  }

  &-is-warning {
    .@{progress-prefix-cls}-circle-path {
      stroke: @progress-circle-color-path-stroke_warning;
    }

    .@{prefix}-icon {
      color: @progress-circle-color-icon_warning;
    }
  }

  &-is-success {
    .@{progress-prefix-cls}-circle-path {
      stroke: @progress-circle-color-path-stroke_success;
    }

    .@{prefix}-icon {
      color: @progress-circle-color-icon_success;
    }
  }

  &-is-error {
    .@{progress-prefix-cls}-circle-path {
      stroke: @progress-circle-color-path-stroke_error;
    }

    .@{prefix}-icon {
      color: @progress-circle-color-icon_error;
    }
  }
}

@keyframes ~'@{prefix}-progress-loading' {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.@{progress-prefix-cls}-rtl {
  .@{progress-prefix-cls}-line,
  .@{progress-prefix-cls}-steps {
    &-text {
      margin-left: 0;
      margin-right: @progress-line-margin-text-left;

      .@{prefix}-icon {
        margin-left: 0;
        margin-right: @progress-line-margin-icon-left;
      }
    }
  }

  & .@{progress-prefix-cls}-steps {
    &-text {
      margin-left: 0;
      margin-right: @progress-steps-margin-text-left;
    }

    &-item {
      &:not(:last-of-type) {
        margin-right: 0;
        margin-left: @progress-steps-margin-steps-item-right;
      }
    }
  }

  &.@{progress-prefix-cls}-steps.@{progress-prefix-cls}-small {
    .@{progress-prefix-cls}-steps-item {
      &:not(:last-of-type) {
        margin-right: 0;
        margin-left: @progress-steps-margin-steps-item-right_small;
      }
    }
  }

  &.@{progress-prefix-cls}-small {
    .@{progress-prefix-cls}-line-text {
      margin-right: @progress-line-size-small-margin-text-left;
      margin-left: 0;
    }
  }

  &.@{progress-prefix-cls}-large {
    .@{progress-prefix-cls}-line-text {
      margin-right: @progress-line-size-large-margin-text-left;
      margin-left: 0;
    }
  }

  &.@{progress-prefix-cls}-line {
    .@{progress-prefix-cls}-line-inner-buffer {
      left: initial;
      right: 0;
    }
  }
}


/********** Progress end ***************/
    


/********** Radio  ***************/



@radio-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@radio-border-width: @border-2;
@radio-layout-height: 14px;
@radio-color-border_hover: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@radio-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@radio-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@radio-color-bg_checked: @color-primary-6;
@radio-border-radius: @radius-circle;
@radio-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@radio-color-bg_checked_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@radio-color-dot-bg_checked_disabled: @radio-color-bg_disabled;

@radio-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@radio-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@radio-color-text_checked_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@radio-font-text-size: @font-size-body-3;
@radio-font-text-size_large: @font-size-body-3;
@radio-font-text-size_mini: @font-size-body-1;
@radio-font-text-size_small: @font-size-body-3;
@radio-margin-text-left: @spacing-4;

@radio-size-mask-height: @size-6;
@radio-mask-bg-color-bg: @icon-hover-color-bg;
@radio-group-margin-right: @spacing-8;
@radio-group-button-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@radio-group-button-color-bg_dark: var(~'@{arco-cssvars-prefix}-color-bg-3');
@radio-button-padding-horizontal: @spacing-6;
@radio-button-spacing: 3px;
@radio-button-color-bg_active: var(~'@{arco-cssvars-prefix}-color-bg-5');
@radio-button-color-bg_active_dark: var(~'@{arco-cssvars-prefix}-color-fill-3');
@radio-button-color-bg_hover: @radio-button-color-bg_active;
@radio-button-color-text_active: @color-primary-6;
@radio-button-font-text-weight_active: @font-weight-500;
@radio-button-color-text_hover: @radio-color-text;

@radio-button-border-radius: @radius-small;
@radio-button-bg-border-radius: @radio-button-border-radius;
@radio-button-color-bg: @color-transparent;
@radio-button-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');

@radio-button-color-bg_disabled: @color-transparent;
@radio-button-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@radio-button-color-bg_checked_disabled: @radio-button-color-bg_active;
@radio-button-color-text_checked_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');

@radio-button-color-separator-bg: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@radio-button-size-separator-width: 1px;
@radio-button-size-separator-height: 14px;

@radio-size-default-height: @size-default;
@radio-size-small-height: @size-small;
@radio-size-mini-height: @size-mini;
@radio-size-large-height: @size-large;
@radio-group-size-line-height_vertical: @size-8;
@radio-color-box-shadow: @color-primary-6;

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


@radio-prefix-cls: ~'@{prefix}-radio';

.@{radio-prefix-cls},
.@{radio-prefix-cls}-button {
  > input[type='radio'] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;

    &:focus-visible + .@{prefix}-radio-icon-hover::before {
      background-color: @icon-hover-color-bg;
      opacity: 1;
    }

    &:focus-visible + .@{prefix}-radio-button-inner {
      box-shadow: inset 0 0 0 2px @radio-color-box-shadow;
      border-radius: inherit;
    }
  }
}

.icon-hover(@radio-prefix-cls, @radio-layout-height, @radio-size-mask-height);

.@{radio-prefix-cls} {
  position: relative;
  cursor: pointer;
  padding-left: (@radio-size-mask-height / 2) - (@radio-layout-height / 2);
  display: inline-block;
  font-size: @radio-font-text-size;
  line-height: unset;

  // radio circle
  &-text {
    color: @radio-color-text;
    margin-left: @radio-margin-text-left;
  }

  &-mask-wrapper {
    vertical-align: middle;
    top: -0.09em;
    position: relative;
    line-height: 1;
  }

  &-mask {
    display: block;
    border: @radio-border-width solid @radio-color-border;
    box-sizing: border-box;
    height: @radio-layout-height;
    width: @radio-layout-height;
    border-radius: @radio-border-radius;
    position: relative;
    line-height: @radio-layout-height;

    &::after {
      display: inline-block;
      box-sizing: border-box;
      position: absolute;
      content: '';
      border-radius: @radio-border-radius;
      background-color: @radio-color-bg;
      width: @radio-layout-height - @radio-border-width * 2;
      height: @radio-layout-height - @radio-border-width * 2;
      top: 0;
      left: 0;
      transform: scale(1);
      transition: transform @transition-duration-3 @transition-timing-function-overshoot;
    }
  }

  &:hover &-mask {
    border-color: @radio-color-border_hover;
  }

  &-checked &-mask {
    background-color: @radio-color-bg_checked;
    border-color: @radio-color-bg_checked;

    &::after {
      transform: scale(0.4);
      background-color: var(~'@{arco-cssvars-prefix}-color-white');
    }
  }

  &-checked:hover &-mask {
    border-color: @radio-color-bg_checked;
  }

  &-disabled {
    cursor: not-allowed;

    .@{prefix}-radio-icon-hover {
      cursor: not-allowed;
    }

    .@{radio-prefix-cls}-text {
      color: @radio-color-text_disabled;
    }
  }

  &-disabled &-mask {
    border-color: @radio-color-border_disabled;

    &::after {
      background-color: @radio-color-bg_disabled;
    }
  }

  &-disabled:hover &-mask {
    border-color: @radio-color-border_disabled;
  }

  &-checked&-disabled {
    .@{radio-prefix-cls}-mask,
    &:hover .@{radio-prefix-cls}-mask {
      border-color: @color-transparent;
      background-color: @radio-color-bg_checked_disabled;
    }

    .@{radio-prefix-cls}-mask::after {
      background-color: @radio-color-dot-bg_checked_disabled;
    }

    .@{radio-prefix-cls}-text {
      color: @radio-color-text_checked_disabled;
    }
  }

  &:hover {
    .@{prefix}-radio-icon-hover::before {
      background-color: @radio-mask-bg-color-bg;
    }
  }
}

// group type
.@{radio-prefix-cls}-group {
  display: inline-block;
  box-sizing: border-box;

  .@{radio-prefix-cls} {
    margin-right: @radio-group-margin-right;
  }

  // button type
  &-type-button {
    // ButtonGroup 中使用了 z-index: -1 的伪元素实现背景，为容器提供独立的层叠上下文以保证内部 Radio 表现正常
    position: relative;
    z-index: 0;
    padding: (@radio-button-spacing / 2);
    line-height: @radio-size-default-height - @radio-button-spacing * 2;
  }
}

.@{radio-prefix-cls}-button {
  display: inline-block;
  position: relative;
  margin: (@radio-button-spacing / 2);
  border-radius: @radio-button-border-radius;
  font-size: @radio-font-text-size;
  line-height: @radio-size-default-height - @radio-button-spacing * 2;
  color: @radio-button-color-text;
  background-color: @radio-button-color-bg;
  cursor: pointer;
  transition: all @transition-duration-1 @transition-timing-function-linear;

  &-inner {
    display: block;
    position: relative;
    padding: 0 @radio-button-padding-horizontal;
  }

  // 按钮之间的分割线
  &:not(:first-of-type)::before {
    position: absolute;
    top: 50%;
    left: -((@radio-button-spacing - @radio-button-size-separator-width) / 2) - @radio-button-size-separator-width;
    transform: translateY(-50%);
    display: block;
    height: @radio-button-size-separator-height;
    width: @radio-button-size-separator-width;
    background-color: @radio-button-color-separator-bg;
    content: '';
    transition: all @transition-duration-1 @transition-timing-function-linear;
  }

  // 被选中的按钮不需要左右的分割线
  &:hover::before,
  &:hover + &::before,
  &.@{radio-prefix-cls}-checked::before,
  &.@{radio-prefix-cls}-checked + &::before {
    opacity: 0;
  }

  // 按钮下层的背景色
  &::after {
    content: ' ';
    display: block;
    position: absolute;
    left: -@radio-button-spacing;
    top: $left;
    right: $left;
    bottom: $left;
    background-color: @radio-group-button-color-bg;
    pointer-events: none;
    z-index: -1;
  }

  &:first-of-type::after {
    border-top-left-radius: @radio-button-bg-border-radius;
    border-bottom-left-radius: @radio-button-bg-border-radius;
  }

  &:last-of-type::after {
    border-top-right-radius: @radio-button-bg-border-radius;
    border-bottom-right-radius: @radio-button-bg-border-radius;
  }

  &:hover {
    background-color: @radio-button-color-bg_hover;
    color: @radio-button-color-text_hover;
  }

  &.@{radio-prefix-cls}-checked {
    background-color: @radio-button-color-bg_active;
    color: @radio-button-color-text_active;
    font-weight: @radio-button-font-text-weight_active;
  }

  &.@{radio-prefix-cls}-disabled {
    cursor: not-allowed;
    background-color: @radio-button-color-bg_disabled;
    color: @radio-button-color-text_disabled;
  }

  &.@{radio-prefix-cls}-disabled.@{radio-prefix-cls}-checked {
    background-color: @radio-button-color-bg_checked_disabled;
    color: @radio-button-color-text_checked_disabled;
  }
}

// size small default large huge
.@{radio-prefix-cls} {
  &-size-small {
    line-height: @radio-size-small-height;

    &.@{radio-prefix-cls}-group-type-button,
    .@{radio-prefix-cls}-button {
      font-size: @radio-font-text-size_small;
      line-height: @radio-size-small-height - @radio-button-spacing * 2;
    }
  }

  &-size-large {
    line-height: @radio-size-large-height;

    &.@{radio-prefix-cls}-group-type-button,
    .@{radio-prefix-cls}-button {
      font-size: @radio-font-text-size_large;
      line-height: @radio-size-large-height - @radio-button-spacing * 2;
    }
  }

  &-size-mini {
    line-height: @radio-size-mini-height;

    &.@{radio-prefix-cls}-group-type-button,
    .@{radio-prefix-cls}-button {
      font-size: @radio-font-text-size_mini;
      line-height: @radio-size-mini-height - @radio-button-spacing * 2;
    }
  }
}

// vertical direction
.@{radio-prefix-cls}-group-direction-vertical {
  // default radio
  .@{radio-prefix-cls} {
    display: block;
    line-height: @radio-group-size-line-height_vertical;
    margin-right: 0;
  }
}

// dark mode

@{arco-theme-tag} {
  &[arco-theme='dark'] {
    .@{radio-prefix-cls}-button.@{radio-prefix-cls}-checked,
    .@{radio-prefix-cls}-button:not(.@{radio-prefix-cls}-disabled):hover {
      background-color: @radio-button-color-bg_active_dark;
    }

    .@{radio-prefix-cls}-button::after {
      background-color: @radio-group-button-color-bg_dark;
    }
  }
}

.@{radio-prefix-cls}-rtl {
  padding-left: 0;
  padding-right: (@radio-size-mask-height / 2) - (@radio-layout-height / 2);

  .@{radio-prefix-cls} {
    &-text {
      margin-left: 0;
      margin-right: @radio-margin-text-left;
    }
  }
}

.@{radio-prefix-cls}-group-rtl {
  .@{radio-prefix-cls} {
    margin-right: 0;
    margin-left: @radio-group-margin-right;
  }

  &.@{radio-prefix-cls}-group-direction-vertical {
    .@{radio-prefix-cls} {
      margin-right: unset;
      margin-left: 0;
    }
  }
}


/********** Radio end ***************/
    


/********** Rate  ***************/



/**********************************************
 * status: disabled / readonly
 **********************************************/
@rate-min-height: @size-default;
@rate-gap-size: @spacing-4;
@rate-font-size: @font-size-title-3;
@rate-scale_active: 1.2;

@rate-color-bg_active:  rgb(var(~'@{arco-cssvars-prefix}-gold-6'));;
@rate-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-3');
@rate-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-gold-5'));;


@prefixCls: ~'@{prefix}-rate';

.@{prefixCls} {
  display: inline-block;
  user-select: none;

  &-disabled {
    cursor: not-allowed;
  }

  &-inner {
    // flex 消除 inline-block 导致的父元素被多撑开几个像素
    display: flex;
    align-items: center;
    min-height: @rate-min-height;
    font-size: @rate-font-size;
    line-height: 1;
  }

  &-character {
    position: relative;
    color: @rate-color-bg_default;
    transition: transform @transition-duration-2 @transition-timing-function-standard;

    &:not(:last-child) {
      margin-right: @rate-gap-size;
    }

    &-left,
    &-right {
      transition: inherit;

      // float 消除 inline-block 导致的父元素被多撑开几个像素
      > * {
        float: left;
      }
    }

    &-left {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      white-space: nowrap;
      overflow: hidden;
      opacity: 0;
    }

    &-scale {
      animation: ~'@{prefix}-rate-scale' @transition-duration-4 @transition-timing-function-standard;
    }

    &-full &-right {
      color: @rate-color-bg_active;
    }

    &-half &-left {
      color: @rate-color-bg_active;
      opacity: 1;
    }

    &-disabled {
      cursor: not-allowed;
    }
  }

  &:not(&-readonly):not(&-disabled) &-character {
    cursor: pointer;

    &:hover,
    &:focus {
      transform: scale(@rate-scale_active);
    }
  }
}

@keyframes ~'@{prefix}-rate-scale' {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(@rate-scale_active);
  }

  100% {
    transform: scale(1);
  }
}

.@{prefixCls}-rtl {
  direction: rtl;

  .@{prefixCls} {
    &-character {
      &:not(:last-child) {
        margin-right: 0;
        margin-left: @rate-gap-size;
      }

      &-left {
        left: initial;
        right: 0;
      }

      &-left,
      &-right {
        > * {
          float: right;
        }
      }
    }
  }
}


/********** Rate end ***************/
    


/********** ResizeBox  ***************/


@resizeBox-trigger-color-background: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@resizeBox-trigger-size-icon-wrapper: 6px;
@resizeBox-trigger-font-size-icon: 12px;
@resizeBox-trigger-color-icon: var(~'@{arco-cssvars-prefix}-color-text-1');
@resizeBox-trigger-icon-empty: 18px;


@resizebox-prefix-cls: ~'@{prefix}-resizebox';
@resizebox-split-prefix-cls: ~'@{prefix}-resizebox-split';
@resizebox-split-group-prefix-cls: ~'@{prefix}-resizebox-split-group';
@resizebox-trigger-prefix-cls: ~'@{resizebox-prefix-cls}-trigger';

.@{resizebox-prefix-cls} {
  position: relative;
  width: 100%;
  overflow: hidden;

  &-direction-left,
  &-direction-right,
  &-direction-top,
  &-direction-bottom {
    position: absolute;
    left: 0;
    top: 0;
    user-select: none;
    box-sizing: border-box;
  }

  &-direction-right {
    left: unset;
    right: 0;
  }

  &-direction-bottom {
    top: unset;
    bottom: 0;
  }

  &-split,
  &-split-group {
    display: flex;
    user-select: auto;

    .@{resizebox-prefix-cls}-slit-trigger {
      flex: 0;
    }

    &-pane {
      overflow: auto;
    }

    .second-pane {
      flex: 1;
    }

    &-horizontal {
      flex-direction: row;
    }

    &-vertical {
      flex-direction: column;
    }

    &-moving {
      user-select: none;
    }
  }
}

// 伸缩触发杆
.@{resizebox-trigger-prefix-cls} {
  &-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: @resizeBox-trigger-color-background;
  }

  &-icon {
    display: inline-block;
    color: @resizeBox-trigger-color-icon;
    font-size: @resizeBox-trigger-font-size-icon;
  }

  &-prev,
  &-next {
    > svg {
      cursor: pointer;
    }
  }

  &-vertical {
    height: 100%;
    cursor: col-resize;

    &.@{resizebox-trigger-prefix-cls}-not-resizable {
      cursor: default;
    }

    .@{resizebox-trigger-prefix-cls}-prev,
    .@{resizebox-trigger-prefix-cls}-next {
      height: @resizeBox-trigger-icon-empty;
      line-height: @resizeBox-trigger-icon-empty;
    }

    .@{resizebox-trigger-prefix-cls}-icon-wrapper {
      width: @resizeBox-trigger-size-icon-wrapper;
      flex-direction: column;
    }

    .@{resizebox-trigger-prefix-cls}-icon-empty {
      height: @resizeBox-trigger-icon-empty;
      width: 100%;
    }
  }

  &-horizontal {
    width: 100%;
    cursor: row-resize;

    &.@{resizebox-trigger-prefix-cls}-not-resizable {
      cursor: default;
    }

    .@{resizebox-trigger-prefix-cls}-prev,
    .@{resizebox-trigger-prefix-cls}-next {
      width: @resizeBox-trigger-icon-empty;
      text-align: center;
    }

    .@{resizebox-trigger-prefix-cls}-icon-wrapper {
      height: @resizeBox-trigger-size-icon-wrapper;

      .@{prefix}-icon {
        vertical-align: -1px;
      }
    }

    .@{resizebox-trigger-prefix-cls}-icon-empty {
      width: @resizeBox-trigger-icon-empty;
      height: 100%;
    }
  }
}

.@{resizebox-prefix-cls}-rtl,
.@{resizebox-split-prefix-cls}-rtl,
.@{resizebox-split-group-prefix-cls}-rtl,
.@{resizebox-trigger-prefix-cls}-rtl {
  direction: rtl;
}


/********** ResizeBox end ***************/
    


/********** Result  ***************/



@result-padding-top: @spacing-9;
@result-padding-top_icon: @spacing-10;
@result-padding-bottom: @spacing-9;
@result-padding-horizontal: @spacing-10;

@result-margin-icon-bottom: @spacing-7;
@result-margin-extra-top: @spacing-8;
@result-margin-content-top: @spacing-8;
@result-font-title-size: @font-size-body-3;
@result-font-title-weight: @font-weight-500;
@result-font-subtitle-size: @font-size-body-3;

@result-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@result-color-subtitle-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@result-size-icon: @size-5;
@result-size-icon-wrapper: 45px;
@result-size-image-width: @size-23;
@result-size-icon_custom: 45px;

@result-color-icon_default: inherit;
@result-color-icon_success: @color-success-6;
@result-color-icon-bg_success: var(~'@{arco-cssvars-prefix}-color-success-light-1');
@result-color-icon_error: @color-danger-6;
@result-color-icon-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@result-color-icon_warning: @color-warning-6;
@result-color-icon-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@result-color-icon_info: @color-primary-6;
@result-color-icon-bg_info: var(~'@{arco-cssvars-prefix}-color-primary-light-1');


@result-prefix-cls: ~'@{prefix}-result';

.icon-status (@status) {
  @color: ~'result-color-icon_@{status}';
  @bg: ~'result-color-icon-bg_@{status}';

  color: @@color;
  background-color: @@bg;
}

.@{result-prefix-cls} {
  width: 100%;
  box-sizing: border-box;
  padding: @result-padding-top_icon @result-padding-horizontal @result-padding-bottom;

  &-is-404,
  &-is-403,
  &-is-500 {
    padding-top: @result-padding-top;

    .@{result-prefix-cls}-icon-tip {
      height: @result-size-image-width;
      width: @result-size-image-width;
      line-height: @result-size-image-width;
    }
  }

  &-icon {
    margin-bottom: @result-margin-icon-bottom;
    text-align: center;
    font-size: @result-size-icon;

    &-tip {
      display: inline-block;
      height: @result-size-icon-wrapper;
      width: @result-size-icon-wrapper;
      text-align: center;
      border-radius: 50%;
      line-height: @result-size-icon-wrapper;
    }

    // status = null
    &-custom {
      width: unset;
      height: unset;
      line-height: inherit;

      > .@{prefix}-icon {
        font-size: @result-size-icon_custom;
        color: @result-color-icon_default;
      }
    }

    &-success {
      .icon-status(success);
    }

    &-error {
      .icon-status(error);
    }

    &-info {
      .icon-status(info);
    }

    &-warning {
      .icon-status(warning);
    }
  }

  &-title {
    text-align: center;
    line-height: 1.5715;
    font-size: @result-font-title-size;
    font-weight: @result-font-title-weight;
    color: @result-color-title-text;
  }

  &-subtitle {
    text-align: center;
    line-height: 1.5715;
    font-size: @result-font-subtitle-size;
    color: @result-color-subtitle-text;
  }

  &-extra {
    margin-top: @result-margin-extra-top;
    text-align: center;
  }

  &-content {
    margin-top: @result-margin-content-top;
  }
}


/********** Result end ***************/
    


/********** Select  ***************/




/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/


/**********************************************
 * type: single / multi
 * size: mini / small / default / large
 **********************************************/
@select-size-mini-height: @size-mini;
@select-size-small-height: @size-small;
@select-size-default-height: @size-default;
@select-size-large-height: @size-large;

@select-size-mini-font-size: @font-size-body-1;
@select-size-small-font-size: @font-size-body-3;
@select-size-default-font-size: @font-size-body-3;
@select-size-large-font-size: @font-size-body-3;

@select-signal-size-mini-padding: @spacing-4;
@select-signal-size-small-padding: @spacing-6;
@select-signal-size-default-padding: @spacing-6;
@select-signal-size-large-padding: @spacing-7;

@select-multi-padding: @spacing-2;
@select-size-icon: @size-3;
@select-size-icon-bg: @size-4;

/**********************************************
 * border
 **********************************************/
@select-border-width: @border-1;
@select-border-radius: @radius-small;

/************************************************
 * status: default / disabled _ (hover / focus)
 ************************************************/
// text color
@select-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@select-color-text_focused: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-color-placeholder_default: var(~'@{arco-cssvars-prefix}-color-text-3');
@select-color-placeholder_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@select-color-placeholder_focused: var(~'@{arco-cssvars-prefix}-color-text-3');

// icon color
@select-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-2');
@select-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@select-color-icon_focused: var(~'@{arco-cssvars-prefix}-color-text-2');
@select-color-icon-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// bg color with hover & focus
@select-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
@select-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@select-color-bg_default_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@select-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@select-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@select-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@select-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@select-color-bg_disabled_hover: @select-color-bg_disabled;

// border color with hover & focus
@select-color-border_default: @color-transparent;
@select-color-border_default_hover: @color-transparent;
@select-color-border_default_focus: @color-primary-6;
@select-color-border_error: @color-transparent;
@select-color-border_error_hover: @color-transparent;
@select-color-border_error_focus: @color-danger-6;
@select-color-border_disabled: @color-transparent;
@select-color-border_disabled_hover: @select-color-border_disabled;
// shadow
@select-shadow-distance_default_focus: @shadow-distance-none;
@select-shadow-distance_error_focus: @shadow-distance-none;
@select-color-shadow_default_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@select-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');

/**********************************************
 * Popup Box
 **********************************************/
@select-popup-max-height: @size-50;
@select-popup-border-radius: @radius-medium;
@select-popup-padding-vertical: @spacing-2;
@select-popup-padding-horizontal: @spacing-none;
@select-popup-font-size: @font-size-body-3;
@select-popup-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@select-popup-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
@select-popup-box-shadow: @shadow2-down;

/**********************************************
 * Popup Options
 * status: default / disabled / selected / hover
 **********************************************/
@select-popup-option-height: @size-9;
@select-popup-option-font-weight_selected: @font-weight-500;
@select-signal-popup-option-padding-horizontal: @spacing-6;
@select-multi-popup-option-padding-horizontal: @spacing-2;
@select-popup-option-border-radius: @border-radius-none;

@select-popup-option-color-bg_default: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@select-popup-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@select-popup-option-color-bg_selected: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@select-popup-option-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-popup');

@select-popup-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@select-popup-option-color-hightlight-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-font-hightlight-weight: @font-weight-500;

// option group title
@select-popup-group-title-height: @size-5;
@select-popup-group-title-padding-horizontal: @spacing-6;
@select-popup-group-title-padding-top: @spacing-4;
@select-popup-group-title-font-size: @font-size-body-1;
@select-popup-group-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');

// addon
@select-addon-padding-horizontal: @spacing-6;
@select-color-addon-bg: @select-color-bg_default;
@select-color-addon-border: var(~'@{arco-cssvars-prefix}-color-border-2');
@select-color-addon-border_default: @color-transparent;
@select-border-addon-separator-width: @border-1;
@select-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// warning
@select-color-bg_warning_focus: @input-color-bg_warning_focus;
@select-color-bg_warning: @input-color-bg_warning;
@select-color-bg_warning_hover: @input-color-bg_warning_hover;
@select-color-border_warning: @input-color-border_warning;
@select-color-border_warning_hover: @input-color-border_warning_hover;
@select-color-border_warning_focus: @input-color-border_warning_focus;
@select-color-shadow_warning_focus: @input-color-shadow_warning_focus;
@select-shadow-distance_warning_focus: @select-shadow-distance_error_focus;

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}




/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/


/**********************************************
 * type: single / multi
 * size: mini / small / default / large
 **********************************************/
@select-size-mini-height: @size-mini;
@select-size-small-height: @size-small;
@select-size-default-height: @size-default;
@select-size-large-height: @size-large;

@select-size-mini-font-size: @font-size-body-1;
@select-size-small-font-size: @font-size-body-3;
@select-size-default-font-size: @font-size-body-3;
@select-size-large-font-size: @font-size-body-3;

@select-signal-size-mini-padding: @spacing-4;
@select-signal-size-small-padding: @spacing-6;
@select-signal-size-default-padding: @spacing-6;
@select-signal-size-large-padding: @spacing-7;

@select-multi-padding: @spacing-2;
@select-size-icon: @size-3;
@select-size-icon-bg: @size-4;

/**********************************************
 * border
 **********************************************/
@select-border-width: @border-1;
@select-border-radius: @radius-small;

/************************************************
 * status: default / disabled _ (hover / focus)
 ************************************************/
// text color
@select-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@select-color-text_focused: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-color-placeholder_default: var(~'@{arco-cssvars-prefix}-color-text-3');
@select-color-placeholder_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@select-color-placeholder_focused: var(~'@{arco-cssvars-prefix}-color-text-3');

// icon color
@select-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-2');
@select-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@select-color-icon_focused: var(~'@{arco-cssvars-prefix}-color-text-2');
@select-color-icon-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// bg color with hover & focus
@select-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
@select-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@select-color-bg_default_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@select-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@select-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@select-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@select-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@select-color-bg_disabled_hover: @select-color-bg_disabled;

// border color with hover & focus
@select-color-border_default: @color-transparent;
@select-color-border_default_hover: @color-transparent;
@select-color-border_default_focus: @color-primary-6;
@select-color-border_error: @color-transparent;
@select-color-border_error_hover: @color-transparent;
@select-color-border_error_focus: @color-danger-6;
@select-color-border_disabled: @color-transparent;
@select-color-border_disabled_hover: @select-color-border_disabled;
// shadow
@select-shadow-distance_default_focus: @shadow-distance-none;
@select-shadow-distance_error_focus: @shadow-distance-none;
@select-color-shadow_default_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@select-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');

/**********************************************
 * Popup Box
 **********************************************/
@select-popup-max-height: @size-50;
@select-popup-border-radius: @radius-medium;
@select-popup-padding-vertical: @spacing-2;
@select-popup-padding-horizontal: @spacing-none;
@select-popup-font-size: @font-size-body-3;
@select-popup-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@select-popup-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
@select-popup-box-shadow: @shadow2-down;

/**********************************************
 * Popup Options
 * status: default / disabled / selected / hover
 **********************************************/
@select-popup-option-height: @size-9;
@select-popup-option-font-weight_selected: @font-weight-500;
@select-signal-popup-option-padding-horizontal: @spacing-6;
@select-multi-popup-option-padding-horizontal: @spacing-2;
@select-popup-option-border-radius: @border-radius-none;

@select-popup-option-color-bg_default: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@select-popup-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@select-popup-option-color-bg_selected: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@select-popup-option-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-popup');

@select-popup-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@select-popup-option-color-hightlight-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-font-hightlight-weight: @font-weight-500;

// option group title
@select-popup-group-title-height: @size-5;
@select-popup-group-title-padding-horizontal: @spacing-6;
@select-popup-group-title-padding-top: @spacing-4;
@select-popup-group-title-font-size: @font-size-body-1;
@select-popup-group-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');

// addon
@select-addon-padding-horizontal: @spacing-6;
@select-color-addon-bg: @select-color-bg_default;
@select-color-addon-border: var(~'@{arco-cssvars-prefix}-color-border-2');
@select-color-addon-border_default: @color-transparent;
@select-border-addon-separator-width: @border-1;
@select-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// warning
@select-color-bg_warning_focus: @input-color-bg_warning_focus;
@select-color-bg_warning: @input-color-bg_warning;
@select-color-bg_warning_hover: @input-color-bg_warning_hover;
@select-color-border_warning: @input-color-border_warning;
@select-color-border_warning_hover: @input-color-border_warning_hover;
@select-color-border_warning_focus: @input-color-border_warning_focus;
@select-color-shadow_warning_focus: @input-color-shadow_warning_focus;
@select-shadow-distance_warning_focus: @select-shadow-distance_error_focus;




/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/


/**********************************************
 * size: mini / small / default / large
 **********************************************/
@input-tag-size-mini-height: @size-mini;
@input-tag-size-small-height: @size-small;
@input-tag-size-default-height: @size-default;
@input-tag-size-large-height: @size-large;

@input-tag-size-mini-tag-height: @size-5;
@input-tag-size-small-tag-height: @size-5;
@input-tag-size-default-tag-height: @size-6;
@input-tag-size-large-tag-height: @size-7;

@input-tag-size-mini-font-size: @font-size-body-1;
@input-tag-size-small-font-size: @font-size-body-3;
@input-tag-size-default-font-size: @font-size-body-3;
@input-tag-size-large-font-size: @font-size-title-1;

@input-tag-size-mini-padding_no_tag: @spacing-4;
@input-tag-size-small-padding_no_tag: @spacing-6;
@input-tag-size-default-padding_no_tag: @spacing-6;
@input-tag-size-large-padding_no_tag: @spacing-7;

/****************************************************
 * status: default / error / disabled _ (hover / focus)
 ****************************************************/
// text color
@input-tag-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-text_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// icon color
@input-tag-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-tag-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-tag-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// border color with focus & hover
@input-tag-color-border_default: @color-transparent;
@input-tag-color-border_default_hover: @color-transparent;
@input-tag-color-border_default_focus: @color-primary-6;
@input-tag-color-border_error: @color-transparent;
@input-tag-color-border_error_hover: @color-transparent;
@input-tag-color-border_error_focus: @color-danger-6;
@input-tag-color-border_disabled: @color-transparent;
@input-tag-color-border_disabled_hover: @input-tag-color-border_disabled;
@input-tag-color-border_disabled_focus: @input-tag-color-border_disabled;

// bg color with focus & hover
@input-tag-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-color-bg_default_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-color-bg_error: @color-danger-1;
@input-tag-color-bg_error_hover: @color-danger-2;
@input-tag-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-color-bg_disabled_hover: @input-tag-color-bg_disabled;

@input-tag-color-shadow_default_focus: @color-primary-2;
@input-tag-color-shadow_error_focus: @color-danger-2;
@input-tag-size-shadow_error_focus: @shadow-distance-none;
@input-tag-size-shadow_default_focus: @shadow-distance-none;

// input box
@input-tag-tag-margin-right: @spacing-2;
@input-tag-tag-margin-vertical: @spacing-1;
@input-tag-padding-horizontal: @spacing-2;
@input-tag-border-radius: @radius-small;
@input-tag-border-width: @border-1;
@input-tag-size-icon-clear: @size-3;
@input-tag-size-icon-clear_hover: @size-5;

// tags
@input-tag-tag-font-size: @font-size-body-1;
@input-tag-tag-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-tag-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-tag-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-tag-color-border_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-remove-icon-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-remove-icon-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-3');

// warning
@input-tag-color-text_warning: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-border_warning: @input-color-border_warning;
@input-tag-color-border_warning_hover: @input-color-border_warning_hover;
@input-tag-color-border_warning_focus: @input-color-border_warning_focus;
@input-tag-color-bg_warning: @input-color-bg_warning;
@input-tag-color-bg_warning_hover: @input-color-bg_warning_hover;
@input-tag-color-bg_warning_focus: @input-color-bg_warning_focus;
@input-tag-color-shadow_warning_focus: @input-color-shadow_warning_focus;
@input-tag-size-shadow_warning_focus: @input-size-shadow_warning_focus;

// addon
@input-tag-addon-padding-horizontal: @spacing-6;
@input-tag-color-addon-bg: @input-tag-color-bg_default;
@input-tag-color-addon-border: var(~'@{arco-cssvars-prefix}-color-border-2');
@input-tag-color-addon-border_default: @color-transparent;
@input-tag-border-addon-separator-width: @border-1;
@input-tag-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');


@input-tag-prefix-cls: ~'@{prefix}-input-tag';

.input-tag-input-element-padding(@paddingLeft) {
  .@{input-tag-prefix-cls}-has-placeholder {
    input,
    .@{input-tag-prefix-cls}-input-mirror {
      box-sizing: border-box;
      padding-left: @paddingLeft;
    }
  }
}

.input-tag-input-element-padding-rtl(@paddingRight) {
  .@{input-tag-prefix-cls}-has-placeholder {
    input,
    .@{input-tag-prefix-cls}-input-mirror {
      padding-left: 0;
      padding-right: @paddingRight;
    }
  }
}


// used by form
.color(@prefixCls, @status) {
  @suffix: if(@status = default, ~'', ~'-@{status}');

  .@{prefixCls}@{suffix} {
    .@{prefixCls}-view {
      & when (@status = default) , (@status = disabled) {
        color: ~'@{select-color-text_@{status}}';
      }

      background-color: ~'@{select-color-bg_@{status}}';
      border: 1px solid ~'@{select-color-border_@{status}}';
    }

    &:hover {
      .@{prefixCls}-view {
        background-color: ~'@{select-color-bg_@{status}_hover}';
        border-color: ~'@{select-color-border_@{status}_hover}';
      }
    }

    &.@{prefixCls}-focused when not (@status = disabled) {
      .@{prefixCls}-view {
        color: @select-color-text_focused;
        background-color: ~'@{select-color-bg_@{status}_focus}';
        border-color: ~'@{select-color-border_@{status}_focus}';
        box-shadow: 0 0 0 ~'@{select-shadow-distance_@{status}_focus}' ~'@{select-color-shadow_@{status}_focus}';
      }
    }

    .@{prefixCls}-suffix-icon,
    .@{prefixCls}-loading-icon,
    .@{prefixCls}-search-icon,
    .@{prefixCls}-clear-icon,
    .@{prefixCls}-arrow-icon,
    .@{prefixCls}-expand-icon {
      & when (@status = default) , (@status = disabled) {
        color: ~'@{select-color-icon_@{status}}';
      }
    }
  }

  .@{prefixCls}-no-border {
    .@{prefixCls}-view {
      border: none !important;
      background: none !important;
    }
  }
}

.select-view(@prefixCls) {
  @tail-icon-position-right: 10px;

  .size(@size) {
    @ref-font-size: ~'select-size-@{size}-font-size';
    @ref-height: ~'select-size-@{size}-height';
    @ref-padding: ~'select-signal-size-@{size}-padding';

    @font-size: @@ref-font-size;
    @height: @@ref-height;
    @padding: @@ref-padding - @select-border-width;
    @multi-padding: @select-multi-padding - @select-border-width;

    .@{prefixCls} {
      &-size-@{size}&-multiple {
        .@{prefixCls}-view {
          height: auto;
          font-size: @font-size;
          padding: 0 @multi-padding;
          line-height: 0;
        }

        .input-tag-input-element-padding(@padding - @multi-padding);

        .@{prefixCls}-suffix {
          padding-right: @padding - @multi-padding;
        }

        input {
          font-size: @font-size;
        }
      }

      &-size-@{size}&-single {
        .@{prefixCls}-view {
          height: @height;
          line-height: $height - @select-border-width * 2;
          font-size: @font-size;
          padding: 0 @padding;
        }

        input {
          font-size: @font-size;
        }
      }

      &-size-@{size}&-multiple {
        .@{prefixCls}-view-with-prefix {
          padding-left: @padding;
        }
      }
    }
  }

  .color(@prefixCls, default);
  .color(@prefixCls, error);
  .color(@prefixCls, warning);
  .color(@prefixCls, disabled);

  .size(mini);
  .size(small);
  .size(default);
  .size(large);

  .@{prefixCls} {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    cursor: pointer;

    &-view {
      display: flex;
      position: relative;
      box-sizing: border-box;
      width: 100%;
      border-radius: @select-border-radius;
      outline: none;
      user-select: none;
      text-align: left;
      transition: all @transition-duration-1 @transition-timing-function-linear, padding 0s linear;

      input {
        color: inherit;
        cursor: inherit;

        &::placeholder {
          color: @select-color-placeholder_default;
        }

        // since Chrome 116 <input disabled /> won't trigger onClick callback
        // remove all events of disabled <input /> to make sure Trigger works correctly
        &[disabled] {
          pointer-events: none;
        }
      }
    }

    .hide-input-element() {
      // 需要在隐藏 input 的同时保证其能被 Tab 键聚焦
      // 故不要用 display: none / visibility: hidden / width: 0
      // width 设置为 0，会导致在火狐浏览器下触发 onFocus 之后不能立刻触发 onClick
      // https://github.com/arco-design/arco-design/issues/1232
      opacity: 0;
      position: absolute;
      // 避免绝对定位的元素位于所有同级节点的最上层，遮挡其他元素的鼠标操作（例如被 Tooltip 包裹的 value 文本）
      // 不要使用 pointer-events: none，会导致火狐浏览器下下拉弹窗需要点击两次才可弹出
      // https://github.com/arco-design/arco-design/issues/2127
      z-index: -1;
    }

    &-multiple,
    &-show-search {
      cursor: text;
    }

    &-disabled {
      cursor: not-allowed;

      .@{prefixCls}-view input::placeholder {
        color: @select-color-placeholder_disabled;
      }
    }

    &-single &-view {
      // Keep forward compatibility
      // Do NOT move this section under &-selector
      &-input {
        box-sizing: border-box;
        width: 100%;
        padding: 0;
        border: none;
        outline: none;
        background: transparent;
        .text-ellipsis();
      }

      &-selector {
        position: relative;
        display: inline-flex;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;

        // Keep forward compatibility
        // Do NOT move this section out of &-selector
        .@{prefixCls}-view-input {
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1;
        }

        .@{prefixCls}-view-value-mirror {
          opacity: 0;
        }
      }

      &-value,
      &-value-mirror {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        .text-ellipsis();

        // Do NOT remove this, it may cause baseline-changing of select-view
        &::after {
          content: '.';
          font-size: 0;
          line-height: 0;
          visibility: hidden;
        }
      }

      .@{prefixCls}-hidden {
        .hide-input-element();
      }
    }

    &-multiple {
      vertical-align: top;

      .@{prefixCls}-view {
        padding: 0 @select-multi-padding;
        line-height: 0;
      }

      .@{prefixCls}-view-with-prefix {
        padding-left: @select-signal-size-default-padding;
      }

      .@{prefix}-input-tag {
        flex: 1;
        padding: 0;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        overflow: hidden;
      }

      .@{prefix}-tag {
        max-width: 100%;
      }

      // 多选的空白输入框在已存在选择项并且未聚焦时隐藏，避免导致不必要的换行
      &:not(.@{prefixCls}-focused) {
        .@{prefix}-input-tag input:not(:first-child)[value=''] {
          .hide-input-element();
        }
      }
    }

    &-prefix {
      display: flex;
      align-items: center;
      margin-right: 12px;
      white-space: nowrap;
      color: @select-color-icon_default;
    }

    &-suffix {
      display: flex;
      align-items: center;
      margin-left: 4px;
    }

    &-suffix-icon,
    &-search-icon,
    &-loading-icon,
    &-expand-icon,
    &-clear-icon {
      font-size: @select-size-icon;
      transition: all @transition-duration-1 @transition-timing-function-linear;
    }

    &-arrow-icon {
      font-size: @select-size-icon;
    }

    &-open &-arrow-icon svg {
      transform: rotateZ(180deg);
    }

    & &-clear-icon {
      display: none;
      cursor: pointer;

      > svg {
        position: relative;
        transition: all @transition-duration-1 @transition-timing-function-linear;
      }
    }

    &:hover &-clear-icon {
      display: block;

      & ~ * {
        display: none;
      }
    }

    &-wrapper {
      display: inline-flex;
      align-items: stretch;
      width: 100%;

      .@{prefixCls} {
        min-width: 0; // 避免 .arco-select 宽度超出 .arco-select-wrapper
      }

      .@{prefixCls}:not(.@{prefixCls}-focused) {
        &:not(:first-child) .@{prefixCls}-view {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }

        &:not(:last-child) .@{prefixCls}-view {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }

    // &-addafter,
    &-addbefore {
      display: flex;
      align-items: center;
      padding: 0 @select-addon-padding-horizontal;
      color: @select-color-addon-text;
      background-color: @select-color-addon-bg;
      white-space: nowrap;
      border: 1px solid @select-color-addon-border_default;
    }

    &-addbefore {
      border-right: @select-border-addon-separator-width solid @select-color-addon-border;
      border-top-left-radius: @select-border-radius;
      border-bottom-left-radius: @select-border-radius;
    }

    // &-addafter {
    //   border-left: @select-border-addon-separator-width solid @select-color-addon-border;
    //   border-top-right-radius: @select-border-radius;
    //   border-bottom-right-radius: @select-border-radius;
    // }
  }
}

.select-view-rtl(@prefixCls, @prefixClsRtl) {
  .size(@size) {
    @ref-padding: ~'select-signal-size-@{size}-padding';
    @padding: @@ref-padding - @select-border-width;
    @multi-padding: @select-multi-padding - @select-border-width;

    .@{prefixClsRtl}.@{prefixCls}-size-@{size}.@{prefixCls}-multiple {
      .@{prefixCls}-view-with-prefix {
        padding-left: 0;
        padding-right: @padding;
      }

      .@{prefixCls}-suffix {
        padding-right: 0;
        padding-left: @padding - @multi-padding;
      }

      .input-tag-input-element-padding-rtl(@padding - @multi-padding);
    }
  }

  .size(mini);
  .size(small);
  .size(default);
  .size(large);

  .@{prefixCls}-wrapper-rtl .@{prefixCls}-addbefore {
    border-right: unset;
    border-left: @select-border-addon-separator-width solid @select-color-addon-border;
  }

  .@{prefixClsRtl} {
    .@{prefixCls}-view {
      text-align: right;
    }

    .@{prefixCls}-multiple {
      .@{prefixCls}-view-with-prefix {
        padding-left: 0;
        padding-right: @select-signal-size-default-padding;
      }
    }

    .@{prefixCls}-prefix {
      margin-right: 0;
      margin-left: 12px;
    }

    .@{prefixCls}-suffix {
      margin-left: 0;
      margin-right: 4px;
    }
  }
}


@select-prefix-cls: ~'@{prefix}-select';
@select-prefix-cls-rtl: ~'@{prefix}-select-rtl';

.select-view(@select-prefix-cls);

.@{select-prefix-cls} {
  &-popup {
    top: 4px;
    box-sizing: border-box;
    padding: @select-popup-padding-vertical @select-popup-padding-horizontal;
    border: 1px solid @select-popup-color-border;
    border-radius: @select-popup-border-radius;
    background-color: @select-popup-color-bg;
    box-shadow: @select-popup-box-shadow;
    overflow: hidden;

    &-hidden {
      display: none;
    }
  }

  &-popup &-popup-inner {
    width: 100%;
    max-height: @select-popup-max-height;
    list-style: none;
  }

  &-popup &-option {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 0 @select-signal-popup-option-padding-horizontal;
    font-size: @select-popup-font-size;
    text-align: left;
    cursor: pointer;
    line-height: @select-popup-option-height;
    border-radius: @select-popup-option-border-radius;

    .text-ellipsis();

    .option-color(@status) {
      @class-suffix: if(@status = default, ~'', ~'-@{status}');

      &@{class-suffix} {
        color: ~'@{select-popup-option-color-text_@{status}}';
        background-color: ~'@{select-popup-option-color-bg_@{status}}';
      }
    }

    .option-color(default);
    .option-color(selected);
    .option-color(hover);
    // disabled 优先级最高，放在最后
    .option-color(disabled);

    &-disabled {
      cursor: not-allowed;
    }

    &-selected {
      font-weight: @select-popup-option-font-weight_selected;
    }

    &-empty {
      height: $line-height;
    }
  }

  &-popup &-option-rtl {
    text-align: right;
  }

  &-option-wrapper {
    display: flex;
    align-items: center;
    padding: 0 7px;

    .@{select-prefix-cls}-checkbox {
      padding: 0 5px;

      // 避免点击复选框导致 select-view 的输入框失焦
      input {
        display: none;
      }
    }

    .@{select-prefix-cls}-option {
      flex: 1;
      margin-left: 1px;
      padding: 0 @select-multi-popup-option-padding-horizontal;
      border-radius: @select-border-radius;
    }
  }

  &-group-title {
    box-sizing: border-box;
    width: 100%;
    padding: @select-popup-group-title-padding-top @select-popup-group-title-padding-horizontal 0
      @select-popup-group-title-padding-horizontal;
    line-height: @select-popup-group-title-height;
    font-size: @select-popup-group-title-font-size;
    color: @select-popup-group-title-color-text;
    .text-ellipsis();

    &:first-child {
      padding-top: @select-popup-group-title-padding-top - @select-popup-padding-vertical;
    }
  }

  &-highlight {
    font-weight: @select-popup-option-font-hightlight-weight;
    color: @select-popup-option-color-hightlight-text;
  }
}

.@{select-prefix-cls}-rtl {
  direction: rtl;
}

.select-view-rtl(@select-prefix-cls, @select-prefix-cls-rtl);


/********** Select end ***************/
    


/********** Skeleton  ***************/


@skeleton-color-bg-base: var(~'@{arco-cssvars-prefix}-color-fill-2');

@skeleton-radius-image-border: @radius-small;
@skeleton-size-image_default: @size-12;
@skeleton-size-image_small: @size-9;
@skeleton-size-image_large: @size-15;
@skeleton-spacing-image_left-margin-right: @spacing-7;
@skeleton-spacing-image_right-margin-left: @spacing-7;

@skeleton-size-row-height: @size-4;
@skeleton-spacing-last_row-margin-bottom: @spacing-7;

@skeleton-color-animate-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');


@skeleton-prefix-cls: ~'@{prefix}-skeleton';

.@{skeleton-prefix-cls} {
  display: flex;

  &-header {
    display: flex;

    .@{skeleton-prefix-cls}-image {
      background-color: @skeleton-color-bg-base;
      width: @skeleton-size-image_default;
      height: @skeleton-size-image_default;
      border-radius: @skeleton-radius-image-border;

      &-circle {
        border-radius: 50%;
      }

      &-small {
        width: @skeleton-size-image_small;
        height: @skeleton-size-image_small;
      }

      &-large {
        width: @skeleton-size-image_large;
        height: @skeleton-size-image_large;
      }

      &-left {
        margin-right: @skeleton-spacing-image_left-margin-right;
      }

      &-right {
        margin-left: @skeleton-spacing-image_right-margin-left;
      }
    }
  }

  &-content {
    flex-grow: 1;
    overflow: hidden;

    .@{skeleton-prefix-cls}-text {
      list-style: none;
      padding: 0;
      margin: 0;

      &-row {
        background-color: @skeleton-color-bg-base;
        height: @skeleton-size-row-height;
      }

      &-row:not(:last-child) {
        margin-bottom: @skeleton-spacing-last_row-margin-bottom;
      }
    }
  }

  &-animate {
    .@{skeleton-prefix-cls}-image,
    .@{skeleton-prefix-cls}-text > li {
      background: linear-gradient(
        90deg,
        @skeleton-color-bg-base 25%,
        @skeleton-color-animate-bg 37%,
        @skeleton-color-bg-base 63%
      );
      background-size: 400% 100%;
      animation: ~'@{prefix}-skeleton-circle' 1.5s @transition-timing-function-linear infinite;
    }
  }
}

@keyframes ~'@{prefix}-skeleton-circle' {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.@{skeleton-prefix-cls}-rtl {
  .@{skeleton-prefix-cls}-image {
    &-left {
      margin-right: 0;
      margin-left: @skeleton-spacing-image_left-margin-right;
    }

    &-right {
      margin-left: 0;
      margin-right: @skeleton-spacing-image_right-margin-left;
    }
  }
}


/********** Skeleton end ***************/
    


/********** Slider  ***************/



// road
@slider-size-road-width: 2px;
@slider-color-road-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');
@slider-color-road-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');

// bar
@slider-color-bar-bg: @color-primary-6;
@slider-color-bar-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');

// button
@slider-color-button-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@slider-border-size-button: @border-2;
@slider-color-button-border: @color-primary-6;
@slider-color-button-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');
@slider-shadow-button_active: @shadow1-down;
@slider-color-box-shadow-button_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@slider-size-button-width: @size-3;
@slider-size-button-width_active: 14px;

// dot
@slider-color-dot-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@slider-border-size-dot: @border-2;
@slider-font-size-dot: @font-size-body-1;
@slider-size-dot-width: @size-2;

// mark
@slider-spacing-margin-bottom_with-mark: @spacing-9;
@slider-spacing-padding_width-mark: @spacing-8;
@slider-spacing-padding_width-mark_vertical: @spacing-8;
@slider-font-size-mark: @font-size-body-3;
@slider-color-mark-font: var(~'@{arco-cssvars-prefix}-color-text-3');

// tick
@slider-size-tick-width: 1px;
@slider-size-tick-height: 3px;

// input
@slider-spacing-input-margin-left: @spacing-8;
@slider-size-input-width: @size-15;
@slider-size-input-height: @size-8;
@slider-size-input_range-width: @size-5;
@slider-size-input_range-height: @size-8;
@slider-size-input_range_content-width: @size-2;
@slider-size-input_range_content-height: 2px;
@slider-color-input_range_content-bg: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));

// vertical
@slider-size-height_vertical: 200px;
@slider-spacing-mark-left: 3px; // mark 文本和滑动路径的距离


@slider-prefix: ~'@{prefix}-slider';

.@{slider-prefix} {
  width: 100%;
  display: inline-block;

  &-wrapper {
    display: flex;
    align-items: center;
  }

  &-vertical {
    display: inline-block;
    height: auto;
    width: auto;
    min-width: @slider-size-button-width + 10;

    .@{slider-prefix}-wrapper {
      flex-direction: column;
    }
  }

  &-with-marks {
    margin-bottom: @slider-spacing-margin-bottom_with-mark;
    padding: 0 @slider-spacing-padding_width-mark;
  }

  &-vertical&-with-marks {
    margin-bottom: 0;
    padding: 0;
  }

  &-road {
    width: 100%;
    height: @slider-size-button-width;
    cursor: pointer;
    flex: 1;
    position: relative;

    &::before {
      content: '';
      display: block;
      height: @slider-size-road-width;
      width: 100%;
      background-color: @slider-color-road-bg;
      border-radius: @slider-size-road-width;
      // 局中
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    &&-vertical {
      width: @slider-size-button-width;
      max-width: @slider-size-button-width;
      height: 100%;
      min-height: @slider-size-height_vertical;
      margin-bottom: @slider-size-button-width / 2;
      margin-top: @slider-size-button-width / 2;
      margin-right: 0;
      transform: translateY(0);

      &::before {
        width: @slider-size-road-width;
        height: 100%;
        // 局中
        top: unset;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    &&-disabled {
      &::before {
        background-color: @slider-color-road-bg_disabled;
      }

      .@{slider-prefix}-bar {
        background-color: @slider-color-bar-bg_disabled;
      }

      .@{slider-prefix}-button {
        cursor: not-allowed;

        &::after {
          border-color: @slider-color-button-border_disabled;
        }
      }

      .@{slider-prefix}-dots {
        .@{slider-prefix}-dot {
          border-color: @slider-color-road-bg_disabled;

          &-active {
            border-color: @slider-color-bar-bg_disabled;
          }
        }
      }

      .@{slider-prefix}-ticks {
        .@{slider-prefix}-tick {
          background: @slider-color-road-bg_disabled;

          &-active {
            background: @slider-color-bar-bg_disabled;
          }
        }
      }
    }
  }

  &-bar {
    position: absolute;
    height: @slider-size-road-width;
    background-color: @slider-color-bar-bg;
    border-radius: @slider-size-road-width;
    // 局中
    top: 50%;
    transform: translateY(-50%);

    .@{slider-prefix}-road-vertical & {
      width: @slider-size-road-width;
      height: unset;
      // 局中
      top: unset;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  &-button {
    position: absolute;
    height: @slider-size-button-width;
    width: @slider-size-button-width;
    top: 0;
    left: 0;
    transform: translateX(-50%);

    &::after {
      content: '';
      display: inline-block;
      width: @slider-size-button-width;
      height: @slider-size-button-width;
      background: @slider-color-button-bg;
      border: @slider-border-size-button solid @slider-color-button-border;
      border-radius: 50%;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      transition: all @transition-duration-3 @transition-timing-function-overshoot;
      top: 0;
    }

    &&-active,
    &:hover {
      &::after {
        transform: scale((unit(@slider-size-button-width_active / @slider-size-button-width)));
        box-shadow: @slider-shadow-button_active;
      }
    }

    &:focus-visible::after {
      box-shadow: 0 0 0 2px @slider-color-box-shadow-button_focus;
    }

    .@{slider-prefix}-road-vertical & {
      top: unset;
      bottom: 0;
      left: 0;
      transform: translateY(50%);
    }

    .@{slider-prefix}-reverse & {
      transform: translateX(50%);
      left: unset;
      right: 0;
    }

    .@{slider-prefix}-reverse .@{slider-prefix}-road-vertical & {
      transform: translateY(-50%);
    }
  }

  &-marks {
    position: absolute;
    top: @slider-size-button-width;
    width: 100%;

    &-text {
      position: absolute;
      transform: translateX(-50%);
      cursor: pointer;
      font-size: @slider-font-size-mark;
      line-height: 1;
      color: @slider-color-mark-font;
    }

    .@{slider-prefix}-road-vertical & {
      height: 100%;
      left: @slider-size-button-width + @slider-spacing-mark-left;
      top: 0;

      &-text {
        transform: translateY(50%);
      }
    }

    .@{slider-prefix}-reverse &-text {
      transform: translateX(50%);
    }

    .@{slider-prefix}-reverse .@{slider-prefix}-road-vertical &-text {
      transform: translateY(-50%);
    }
  }

  &-dots {
    height: 100%;

    .@{slider-prefix}-dot-wrapper {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: @slider-font-size-dot;

      .@{slider-prefix}-road-vertical & {
        top: unset;
        left: 50%;
        transform: translate(-50%, 50%);
      }

      .@{slider-prefix}-reverse & {
        transform: translate(50%, -50%);
      }

      .@{slider-prefix}-reverse .@{slider-prefix}-road-vertical & {
        transform: translate(-50%, -50%);
      }

      .@{slider-prefix}-dot {
        background-color: @slider-color-dot-bg;
        box-sizing: border-box;
        border: @slider-border-size-dot solid @slider-color-road-bg;
        height: @slider-size-dot-width;
        width: @slider-size-dot-width;
        border-radius: 50%;

        &-active {
          border-color: @slider-color-bar-bg;
        }
      }
    }
  }

  &-ticks {
    .@{slider-prefix}-tick {
      position: absolute;
      width: @slider-size-tick-width;
      height: @slider-size-tick-height;
      background: @slider-color-road-bg;
      top: 50%;
      transform: translate(-50%, -100%);
      margin-top: -(@slider-size-road-width / 2);

      &-active {
        background: @slider-color-bar-bg;
      }

      .@{slider-prefix}-vertical & {
        width: @slider-size-tick-height;
        height: @slider-size-tick-width;
        top: unset;
        margin-top: unset;
        left: 50%;
        transform: translate((@slider-size-road-width / 2), 50%);
      }

      .@{slider-prefix}-reverse & {
        transform: translate(50%, -100%);
      }

      .@{slider-prefix}-vertical.@{slider-prefix}-reverse & {
        transform: translate((@slider-size-road-width / 2), -50%);
      }
    }
  }

  &-input {
    display: flex;
    margin-left: @slider-spacing-input-margin-left;

    .@{slider-prefix}-vertical & {
      margin-left: 0;
    }

    > .@{prefix}-input-number {
      width: @slider-size-input-width;
      height: @slider-size-input-height;
      line-height: normal;
      overflow: visible;

      input {
        text-align: center;
      }
    }

    &-range {
      width: @slider-size-input_range-width;
      line-height: @slider-size-input_range-height;
      height: @slider-size-input_range-height;
      text-align: center;

      &-content {
        display: inline-block;
        width: @slider-size-input_range_content-width;
        height: @slider-size-input_range_content-height;
        background: @slider-color-input_range_content-bg;
        transform: translate(0, -100%);
      }
    }
  }
}

.@{slider-prefix}-rtl {
  direction: rtl;

  &.@{slider-prefix}:not(.@{slider-prefix}-vertical) {
    .@{slider-prefix}-input {
      margin-right: @slider-spacing-input-margin-left;
      margin-left: 0;
    }
  }

  &.@{slider-prefix}-vertical {
    .@{slider-prefix}-road-vertical {
      .@{slider-prefix}-marks {
        left: 0;
        right: @slider-size-button-width + @slider-spacing-mark-left;
      }
    }
  }
}



/********** Slider end ***************/
    


/********** Space  ***************/



@space-prefix-cls: ~'@{prefix}-space';

.@{space-prefix-cls} {
  display: inline-flex;

  &-vertical {
    flex-direction: column;
  }

  &-align-baseline {
    align-items: baseline;
  }

  &-align-start {
    align-items: flex-start;
  }

  &-align-end {
    align-items: flex-end;
  }

  &-align-center {
    align-items: center;
  }

  &-wrap {
    flex-wrap: wrap;
  }

  &-rtl {
    direction: rtl;
  }
}


/********** Space end ***************/
    


/********** Spin  ***************/



@spin-font-size-text: 14px;
@spin-font-size-icon: 20px;
@spin-font-weight: @font-weight-500;
@spin-margin-top-tip: @spacing-3;

@spin-color-text: @color-primary-6;
@spin-color-icon: @color-primary-6;

@spin-dot-color-icon_default: @color-primary-6;
@spin-dot-color-icon_second: @color-primary-5;
@spin-dot-color-icon_third: @color-primary-4;
@spin-dot-color-icon_forth: @color-primary-4;
@spin-dot-color-icon_last: @color-primary-2;
@spin-dot-size-width: @size-2;


@spin-prefix-cls: ~'@{prefix}-spin';

.@{spin-prefix-cls} {
  display: inline-block;

  &-block {
    display: block;
  }

  &-with-tip {
    text-align: center;
  }

  &-icon {
    color: @spin-color-icon;
    font-size: @spin-font-size-icon;
  }

  &-tip {
    margin-top: @spin-margin-top-tip;
    font-size: @spin-font-size-text;
    font-weight: @spin-font-weight;
    color: @spin-color-text;
  }

  &-loading-layer {
    text-align: center;
    user-select: none;
  }

  &-children {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: var(~'@{arco-cssvars-prefix}-color-spin-layer-bg');
      opacity: 0;
      transition: opacity @transition-duration-1 @transition-timing-function-linear;
      pointer-events: none;
      z-index: 1;
    }
  }

  &-loading {
    position: relative;
    user-select: none;
  }

  &-loading &-loading-layer-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  &-loading &-children::after {
    opacity: 1;
    pointer-events: auto;
  }

  &-dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: @spin-dot-size-width;
    height: @spin-dot-size-width;
    background-color: @spin-dot-color-icon_default;
    border-radius: @radius-circle;
    animation: ~'@{prefix}-dot-loading' 2s @transition-timing-function-linear infinite forwards;

    &:nth-child(2) {
      background-color: @spin-dot-color-icon_second;
      animation-delay: 400ms;
    }

    &:nth-child(3) {
      background-color: @spin-dot-color-icon_third;
      animation-delay: 800ms;
    }

    &:nth-child(4) {
      background-color: @spin-dot-color-icon_forth;
      animation-delay: 1200ms;
    }

    &:nth-child(5) {
      background-color: @spin-dot-color-icon_last;
      animation-delay: 1600ms;
    }
  }

  &-dot-list {
    display: inline-block;
    transform-style: preserve-3d;
    perspective: 200px;
    width: @spin-dot-size-width * 7;
    position: relative;
    height: @spin-dot-size-width;
  }
}

@keyframes ~'@{prefix}-dot-loading' {
  each(range(36), {
    @percent: round(percentage(((@value - 1) / 36)), 3);

    // 半径
    @radius: 280%;
    @xOffset: round((sin((pi() / 180 * @value * 10)) * @radius), 3) * -1;
    @zOffset: round(cos((pi() / 180 * @value * 10)), 3) * -1px;

    @scaleOffset: round((1 - cos((pi() / 180) * @value * 10)) * 0.75 + 0.5, 3 );

    @{percent} {
      transform: ~'translate3D(@{xOffset}, 0, @{zOffset}) scale(@{scaleOffset})'
    }
  });
}


/********** Spin end ***************/
    


/********** Statistic  ***************/



@statistic-font-title-size: @font-size-body-3;
@statistic-margin-title-bottom: @spacing-4;
@statistic-margin-extra-top: @spacing-4;
@statistic-font-int-size: 26px;
@statistic-font-decimal-size: @statistic-font-int-size;
@statistic-font-value-weight: @font-weight-500;
@statistic-color-value-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@statistic-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@statistic-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@statistic-color-extra-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@statistic-size-value-icon: 14px;
@statistic-font-suffix-size: 14px;
@statistic-margin-prefix-right: @spacing-2;
@statistic-margin-suffix-left: @spacing-2;


@statistic-prefix-cls: ~'@{prefix}-statistic';

.@{statistic-prefix-cls} {
  display: inline-block;
  line-height: @line-height-base;
  color: @statistic-color-text;

  &-title {
    font-size: @statistic-font-title-size;
    margin-bottom: @statistic-margin-title-bottom;
    color: @statistic-color-title-text;
  }

  &-content {
    .@{statistic-prefix-cls}-value {
      white-space: nowrap;
      font-size: @statistic-font-int-size;
      font-weight: @statistic-font-value-weight;
      color: @statistic-color-value-text;

      &-int {
        white-space: nowrap;
      }

      &-decimal {
        font-size: @statistic-font-decimal-size;
        display: inline-block;
      }

      &-suffix {
        font-size: @statistic-font-suffix-size;
        margin-left: @statistic-margin-suffix-left;
      }

      &-prefix {
        font-size: @statistic-size-value-icon;
        margin-right: @statistic-margin-prefix-right;
      }
    }
  }

  &-extra {
    margin-top: @statistic-margin-extra-top;
    color: @statistic-color-extra-text;
  }
}

.@{statistic-prefix-cls}-rtl {
  .@{statistic-prefix-cls} {
    &-content {
      .@{statistic-prefix-cls}-value {
        &-suffix {
          margin-right: @statistic-margin-suffix-left;
          margin-left: 0;
        }

        &-prefix {
          margin-right: 0;
          margin-left: @statistic-margin-prefix-right;
        }
      }
    }
  }
}


/********** Statistic end ***************/
    


/********** Steps  ***************/




// Two size: Default and small
@steps-size-default: @size-7;
@steps-size-small: @size-6;
@steps-size-default-arrow: @size-18;
@steps-size-small-arrow: @size-10;

@steps-size-default-font-size-icon: @size-4;
@steps-size-default-font-size-title: @font-size-title-1;
@steps-size-default-font-size-description: @font-size-body-1;
@steps-size-small-font-size-icon: 14px;
@steps-size-small-font-size-title: @font-size-body-3;
@steps-size-small-font-size-description: @font-size-body-1;

@steps-label-vertical-content-width: 140px;
@steps-direction-horizontal-description-width: 140px;

// Circle
@steps-circle-size-item-tail: @border-1;
@steps-circle-size-item-icon-gap: 12px;

@steps-circle-font-weight-item-title_active: @font-weight-500;

@steps-circle-border-radius-item-icon: @radius-circle;

@steps-circle-horizontal-item-description-margin-top: @spacing-1;
@steps-circle-vertical-item-description-margin-top: @spacing-1;

@steps-circle-vertical-spacing-tail-top: @spacing-3;
@steps-circle-vertical-spacing-tail-bottom: @spacing-3;

@steps-circle-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-2');
@steps-circle-color-item-border_wait: @color-transparent;
@steps-circle-color-item-icon-text_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-circle-color-item-tail_wait: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@steps-circle-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-circle-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_process: @color-primary-6;
@steps-circle-color-item-border_process: @color-transparent;
@steps-circle-color-item-icon-text_process: var(~'@{arco-cssvars-prefix}-color-white');
@steps-circle-color-item-tail_process: @color-primary-6;
@steps-circle-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_finish: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@steps-circle-color-item-border_finish: @color-transparent;
@steps-circle-color-item-icon-text_finish: @color-primary-6;
@steps-circle-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_error: @color-danger-6;
@steps-circle-color-item-border_error: @color-transparent;
@steps-circle-color-item-icon-text_error: var(~'@{arco-cssvars-prefix}-color-white');
@steps-circle-color-item-tail_error: @color-danger-6;
@steps-circle-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-text-3');

// Dot
@steps-dot-horizontal-item-title-margin-top: @spacing-2;
@steps-dot-horizontal-item-description-margin-top: @spacing-2;
@steps-dot-vertical-item-dot-margin-top: @spacing-4;
@steps-dot-vertical-item-description-margin-top: @spacing-2;
@steps-dot-vertical-spacing-tail-top: @spacing-2;
@steps-dot-vertical-spacing-tail-bottom: @spacing-2;

@steps-dot-size-item-icon: @size-2;
@steps-dot-size-item-icon-active: 10px;
@steps-dot-size-item-icon-gap: @spacing-2;
@steps-dot-size-item-tail: @border-1;

@steps-dot-vertical-item-icon-margin-right: @spacing-7;

@steps-dot-font-weight-item-title_active: @font-weight-500;

@steps-dot-border-radius-item-icon: @radius-circle;

@steps-dot-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-4');
@steps-dot-color-item-border_wait: var(~'@{arco-cssvars-prefix}-color-fill-4');
@steps-dot-color-item-tail_wait: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@steps-dot-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-dot-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_process: @color-primary-6;
@steps-dot-color-item-border_process: @color-primary-6;
@steps-dot-color-item-tail_process: @color-primary-6;
@steps-dot-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_finish: @color-primary-6;
@steps-dot-color-item-border_finish: @color-primary-6;
@steps-dot-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_error: @color-danger-6;
@steps-dot-color-item-border_error: @color-danger-6;
@steps-dot-color-item-tail_error: @color-danger-6;
@steps-dot-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-text-3');

// Arrow
@steps-arrow-size-item-gap: @spacing-2;

@steps-arrow-size-default-title-padding-left: @spacing-7;
@steps-arrow-size-small-title-padding-left: @spacing-8;

@steps-arrow-item-description-margin-top: 0;

@steps-arrow-font-weight-item-title_active: @font-weight-500;

@steps-arrow-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-1');
@steps-arrow-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-arrow-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-arrow-color-item-bg_process: @color-primary-6;
@steps-arrow-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-white');
@steps-arrow-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-white');

@steps-arrow-color-item-bg_finish: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@steps-arrow-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-arrow-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-arrow-color-item-bg_error: @color-danger-6;
@steps-arrow-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-white');
@steps-arrow-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-white');

// Navigation
@steps-navigation-color-arrow: var(~'@{arco-cssvars-prefix}-color-text-4');
@steps-navigation-size-arrow: 6px;
@steps-navigation-size-arrow-line-width: 2px;
@steps-navigation-size-arrow-top: @spacing-5;
@steps-navigation-padding-left: @spacing-8;
@steps-navigation-margin-right: @spacing-10;
@steps-navigation-spacing-arrow-right: @spacing-5;
@steps-navigation-spacing-ink-left: @spacing-none;
@steps-navigation-spacing-ink-right: 30px;



// Two size: Default and small
@steps-size-default: @size-7;
@steps-size-small: @size-6;
@steps-size-default-arrow: @size-18;
@steps-size-small-arrow: @size-10;

@steps-size-default-font-size-icon: @size-4;
@steps-size-default-font-size-title: @font-size-title-1;
@steps-size-default-font-size-description: @font-size-body-1;
@steps-size-small-font-size-icon: 14px;
@steps-size-small-font-size-title: @font-size-body-3;
@steps-size-small-font-size-description: @font-size-body-1;

@steps-label-vertical-content-width: 140px;
@steps-direction-horizontal-description-width: 140px;

// Circle
@steps-circle-size-item-tail: @border-1;
@steps-circle-size-item-icon-gap: 12px;

@steps-circle-font-weight-item-title_active: @font-weight-500;

@steps-circle-border-radius-item-icon: @radius-circle;

@steps-circle-horizontal-item-description-margin-top: @spacing-1;
@steps-circle-vertical-item-description-margin-top: @spacing-1;

@steps-circle-vertical-spacing-tail-top: @spacing-3;
@steps-circle-vertical-spacing-tail-bottom: @spacing-3;

@steps-circle-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-2');
@steps-circle-color-item-border_wait: @color-transparent;
@steps-circle-color-item-icon-text_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-circle-color-item-tail_wait: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@steps-circle-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-circle-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_process: @color-primary-6;
@steps-circle-color-item-border_process: @color-transparent;
@steps-circle-color-item-icon-text_process: var(~'@{arco-cssvars-prefix}-color-white');
@steps-circle-color-item-tail_process: @color-primary-6;
@steps-circle-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_finish: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@steps-circle-color-item-border_finish: @color-transparent;
@steps-circle-color-item-icon-text_finish: @color-primary-6;
@steps-circle-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_error: @color-danger-6;
@steps-circle-color-item-border_error: @color-transparent;
@steps-circle-color-item-icon-text_error: var(~'@{arco-cssvars-prefix}-color-white');
@steps-circle-color-item-tail_error: @color-danger-6;
@steps-circle-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-text-3');

// Dot
@steps-dot-horizontal-item-title-margin-top: @spacing-2;
@steps-dot-horizontal-item-description-margin-top: @spacing-2;
@steps-dot-vertical-item-dot-margin-top: @spacing-4;
@steps-dot-vertical-item-description-margin-top: @spacing-2;
@steps-dot-vertical-spacing-tail-top: @spacing-2;
@steps-dot-vertical-spacing-tail-bottom: @spacing-2;

@steps-dot-size-item-icon: @size-2;
@steps-dot-size-item-icon-active: 10px;
@steps-dot-size-item-icon-gap: @spacing-2;
@steps-dot-size-item-tail: @border-1;

@steps-dot-vertical-item-icon-margin-right: @spacing-7;

@steps-dot-font-weight-item-title_active: @font-weight-500;

@steps-dot-border-radius-item-icon: @radius-circle;

@steps-dot-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-4');
@steps-dot-color-item-border_wait: var(~'@{arco-cssvars-prefix}-color-fill-4');
@steps-dot-color-item-tail_wait: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@steps-dot-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-dot-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_process: @color-primary-6;
@steps-dot-color-item-border_process: @color-primary-6;
@steps-dot-color-item-tail_process: @color-primary-6;
@steps-dot-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_finish: @color-primary-6;
@steps-dot-color-item-border_finish: @color-primary-6;
@steps-dot-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_error: @color-danger-6;
@steps-dot-color-item-border_error: @color-danger-6;
@steps-dot-color-item-tail_error: @color-danger-6;
@steps-dot-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-text-3');

// Arrow
@steps-arrow-size-item-gap: @spacing-2;

@steps-arrow-size-default-title-padding-left: @spacing-7;
@steps-arrow-size-small-title-padding-left: @spacing-8;

@steps-arrow-item-description-margin-top: 0;

@steps-arrow-font-weight-item-title_active: @font-weight-500;

@steps-arrow-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-1');
@steps-arrow-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-arrow-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-arrow-color-item-bg_process: @color-primary-6;
@steps-arrow-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-white');
@steps-arrow-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-white');

@steps-arrow-color-item-bg_finish: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@steps-arrow-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-arrow-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-arrow-color-item-bg_error: @color-danger-6;
@steps-arrow-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-white');
@steps-arrow-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-white');

// Navigation
@steps-navigation-color-arrow: var(~'@{arco-cssvars-prefix}-color-text-4');
@steps-navigation-size-arrow: 6px;
@steps-navigation-size-arrow-line-width: 2px;
@steps-navigation-size-arrow-top: @spacing-5;
@steps-navigation-padding-left: @spacing-8;
@steps-navigation-margin-right: @spacing-10;
@steps-navigation-spacing-arrow-right: @spacing-5;
@steps-navigation-spacing-ink-left: @spacing-none;
@steps-navigation-spacing-ink-right: 30px;


@steps-size-default-item-icon-margin-left: (@steps-label-vertical-content-width / 2) -
  (@steps-size-default / 2);
@steps-size-small-item-icon-margin-left: (@steps-label-vertical-content-width / 2) -
  (@steps-size-small / 2);

// Circle
.@{steps-prefix-cls} {
  &-item {
    flex: 1;
    white-space: nowrap;
    margin-right: @steps-circle-size-item-icon-gap;
    overflow: hidden;
    position: relative;
    text-align: left;

    &:last-child {
      flex: none;
      margin-right: 0;
    }
  }

  &-item-active &-item-title {
    font-weight: @steps-circle-font-weight-item-title_active;
  }

  &-item:not(&-item-active) &-item-title {
    font-weight: normal;
  }

  &-item-icon {
    display: inline-block;
    vertical-align: top;
    margin-right: @steps-circle-size-item-icon-gap;
    font-size: @steps-size-default-font-size-icon;
    font-weight: @font-weight-500;
  }

  &-icon {
    width: @steps-size-default;
    line-height: @steps-size-default - 2;
    height: @steps-size-default;
    border-radius: @steps-circle-border-radius-item-icon;
    text-align: center;
    box-sizing: border-box;
  }

  &-item-wait &-icon {
    border: 1px solid @steps-circle-color-item-border_wait;
    color: @steps-circle-color-item-icon-text_wait;
    background-color: @steps-circle-color-item-bg_wait;
  }

  &-item-process &-icon {
    border: 1px solid @steps-circle-color-item-border_process;
    color: @steps-circle-color-item-icon-text_process;
    background-color: @steps-circle-color-item-bg_process;
  }

  &-item-finish &-icon {
    border: 1px solid @steps-circle-color-item-border_finish;
    color: @steps-circle-color-item-icon-text_finish;
    background-color: @steps-circle-color-item-bg_finish;
  }

  &-item-error &-icon {
    border: 1px solid @steps-circle-color-item-border_error;
    color: @steps-circle-color-item-icon-text_error;
    background-color: @steps-circle-color-item-bg_error;
  }

  &-item-title {
    white-space: nowrap;
    color: @steps-circle-color-item-title_wait;
    position: relative;
    display: inline-block;
    font-size: @steps-size-default-font-size-title;
    line-height: @steps-size-default;
    padding-right: @steps-circle-size-item-icon-gap;
  }

  &-item-wait &-item-title {
    color: @steps-circle-color-item-title_wait;
  }

  &-item-process &-item-title {
    color: @steps-circle-color-item-title_process;
  }

  &-item-finish &-item-title {
    color: @steps-circle-color-item-title_finish;
  }

  &-item-error &-item-title {
    color: @steps-circle-color-item-title_error;
  }

  &-item-content {
    display: inline-block;
  }

  &-item-description {
    white-space: normal;
    color: @steps-circle-color-item-description_wait;
    font-size: @steps-size-default-font-size-description;
    margin-top: @steps-circle-horizontal-item-description-margin-top;
    max-width: @steps-direction-horizontal-description-width;
  }

  &-item-wait &-item-description {
    color: @steps-circle-color-item-description_wait;
  }

  &-item-process &-item-description {
    color: @steps-circle-color-item-description_process;
  }

  &-item-finish &-item-description {
    color: @steps-circle-color-item-description_finish;
  }

  &-item-error &-item-description {
    color: @steps-circle-color-item-description_error;
  }

  // label horizontal tail style
  &-label-horizontal:not(.@{steps-prefix-cls}-vertical) > &-item:not(:last-child) {
    .@{steps-prefix-cls}-item-title::after {
      content: '';
      display: block;
      position: absolute;
      width: 5000px;
      height: @steps-circle-size-item-tail;
      left: 100%;
      top: ((@steps-size-default - @steps-circle-size-item-tail) / 2);
      background-color: @steps-circle-color-item-tail_wait;
      box-sizing: border-box;
    }
  }

  &-label-horizontal > &-item&-item-process {
    .@{steps-prefix-cls}-item-title::after {
      background-color: @steps-circle-color-item-tail_wait;
    }
  }

  &-label-horizontal > &-item&-item-finish {
    .@{steps-prefix-cls}-item-title::after {
      background-color: @steps-circle-color-item-tail_process;
    }
  }

  &-label-horizontal > &-item&-item-next-error {
    .@{steps-prefix-cls}-item-title::after {
      background-color: @steps-circle-color-item-tail_error;
    }
  }

  &&-vertical > &-item:not(:last-child) {
    > .@{steps-prefix-cls}-item-tail {
      position: absolute;
      width: @steps-circle-size-item-tail;
      top: @steps-size-default + @steps-circle-vertical-spacing-tail-top;
      bottom: @steps-circle-vertical-spacing-tail-bottom;
      left: ((@steps-size-default - @steps-circle-size-item-tail) / 2);
      box-sizing: border-box;
      padding: 0;
      height: unset;

      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: @steps-circle-color-item-tail_wait;
      }
    }
  }

  // label vertical & direction vertical tail style
  & > &-item:not(:last-child) {
    > .@{steps-prefix-cls}-item-tail {
      position: absolute;
      width: 100%;
      height: @steps-circle-size-item-tail;
      top: ((@steps-size-default - @steps-circle-size-item-tail) / 2);
      box-sizing: border-box;

      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: @steps-circle-color-item-tail_wait;
      }
    }
  }

  &-item:not(:last-child)&-item-finish &-item-tail::after {
    background-color: @steps-circle-color-item-tail_process;
  }

  &-item:not(:last-child)&-item-next-error &-item-tail::after {
    background-color: @steps-circle-color-item-tail_error;
  }

  &-size-small&-vertical &-item:not(:last-child) &-item-tail {
    left: ((@steps-size-small - @steps-circle-size-item-tail) / 2);
    top: @steps-size-small + @steps-circle-vertical-spacing-tail-top;
  }

  // Size
  &-size-small:not(&-vertical):not(&-mode-dot) &-item:not(:last-child) &-item-tail {
    top: ((@steps-size-small - @steps-circle-size-item-tail) / 2);
  }

  &-size-small &-item {
    &-icon {
      font-size: @steps-size-small-font-size-icon;
    }

    &-title {
      font-size: @steps-size-small-font-size-title;
      line-height: @steps-size-small;
    }

    &-description {
      font-size: @steps-size-small-font-size-description;
    }
  }

  &-size-small &-icon {
    width: @steps-size-small;
    height: @steps-size-small;
    line-height: @steps-size-small - 2;
    font-size: @steps-size-small-font-size-title;
  }

  &-size-small&-label-horizontal &-item:not(:last-child) &-item-title {
    &::after {
      top: ((@steps-size-small - @steps-circle-size-item-tail) / 2);
    }
  }

  // Label vertical
  &-label-vertical &-item {
    overflow: visible;

    &-title {
      padding-right: 0;
      margin-top: @steps-circle-vertical-item-description-margin-top;
    }

    &-icon {
      margin-left: @steps-size-default-item-icon-margin-left;
    }

    &-tail {
      left: @steps-size-default-item-icon-margin-left + @steps-size-default +
        @steps-circle-size-item-icon-gap;
      padding-right: @steps-size-default + @steps-circle-size-item-icon-gap;
    }
  }

  &-label-vertical&-size-small &-item {
    &-icon {
      margin-left: @steps-size-small-item-icon-margin-left;
    }

    &-tail {
      left: @steps-size-small-item-icon-margin-left + @steps-size-small +
        @steps-circle-size-item-icon-gap;
      padding-right: @steps-size-small + @steps-circle-size-item-icon-gap;
    }
  }
}

.@{steps-prefix-cls}-rtl {
  .@{steps-prefix-cls}-item {
    margin-right: 0;
    margin-left: @steps-circle-size-item-icon-gap;
    text-align: right;

    &:last-child {
      margin-left: 0;
    }

    &-icon {
      margin-right: 0;
      margin-left: @steps-circle-size-item-icon-gap;
    }

    &-title {
      padding-right: 0;
      padding-left: @steps-circle-size-item-icon-gap;
    }
  }

  // label horizontal tail style
  &.@{steps-prefix-cls}-label-horizontal
    .@{steps-prefix-cls}-item:not(:last-child)
    .@{steps-prefix-cls}-item-title {
    &::after {
      left: 0;
      right: 100%;
    }
  }

  &.@{steps-prefix-cls}-vertical {
    > .@{steps-prefix-cls}-item:not(:last-child) .@{steps-prefix-cls}-item-tail {
      left: 0;
      right: ((@steps-size-default - @steps-circle-size-item-tail) / 2);
    }

    &.@{steps-prefix-cls}-size-small.@{steps-prefix-cls}-vertical
      > .@{steps-prefix-cls}-item:not(:last-child)
      .@{steps-prefix-cls}-item-tail {
      left: 0;
      right: ((@steps-size-small - @steps-circle-size-item-tail) / 2);
      top: @steps-size-small + @steps-circle-vertical-spacing-tail-top;
    }
  }

  &.@{steps-prefix-cls}-label-vertical .@{steps-prefix-cls}-item {
    &-title {
      padding-left: 0;
    }

    &-icon {
      margin-left: 0;
      margin-right: @steps-size-default-item-icon-margin-left;
    }

    &-tail {
      left: 0;
      right: @steps-size-default-item-icon-margin-left + @steps-size-default +
        @steps-circle-size-item-icon-gap;
      padding-right: 0;
      padding-left: @steps-size-default + @steps-circle-size-item-icon-gap;
    }
  }

  &.@{steps-prefix-cls}-label-vertical.@{steps-prefix-cls}-size-small .@{steps-prefix-cls}-item {
    &-icon {
      margin-left: 0;
      margin-right: @steps-size-small-item-icon-margin-left;
    }

    &-tail {
      left: 0;
      right: @steps-size-small-item-icon-margin-left + @steps-size-small +
        @steps-circle-size-item-icon-gap;
      padding-right: 0;
      padding-left: @steps-size-small + @steps-circle-size-item-icon-gap;
    }
  }
}



// Two size: Default and small
@steps-size-default: @size-7;
@steps-size-small: @size-6;
@steps-size-default-arrow: @size-18;
@steps-size-small-arrow: @size-10;

@steps-size-default-font-size-icon: @size-4;
@steps-size-default-font-size-title: @font-size-title-1;
@steps-size-default-font-size-description: @font-size-body-1;
@steps-size-small-font-size-icon: 14px;
@steps-size-small-font-size-title: @font-size-body-3;
@steps-size-small-font-size-description: @font-size-body-1;

@steps-label-vertical-content-width: 140px;
@steps-direction-horizontal-description-width: 140px;

// Circle
@steps-circle-size-item-tail: @border-1;
@steps-circle-size-item-icon-gap: 12px;

@steps-circle-font-weight-item-title_active: @font-weight-500;

@steps-circle-border-radius-item-icon: @radius-circle;

@steps-circle-horizontal-item-description-margin-top: @spacing-1;
@steps-circle-vertical-item-description-margin-top: @spacing-1;

@steps-circle-vertical-spacing-tail-top: @spacing-3;
@steps-circle-vertical-spacing-tail-bottom: @spacing-3;

@steps-circle-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-2');
@steps-circle-color-item-border_wait: @color-transparent;
@steps-circle-color-item-icon-text_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-circle-color-item-tail_wait: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@steps-circle-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-circle-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_process: @color-primary-6;
@steps-circle-color-item-border_process: @color-transparent;
@steps-circle-color-item-icon-text_process: var(~'@{arco-cssvars-prefix}-color-white');
@steps-circle-color-item-tail_process: @color-primary-6;
@steps-circle-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_finish: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@steps-circle-color-item-border_finish: @color-transparent;
@steps-circle-color-item-icon-text_finish: @color-primary-6;
@steps-circle-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_error: @color-danger-6;
@steps-circle-color-item-border_error: @color-transparent;
@steps-circle-color-item-icon-text_error: var(~'@{arco-cssvars-prefix}-color-white');
@steps-circle-color-item-tail_error: @color-danger-6;
@steps-circle-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-text-3');

// Dot
@steps-dot-horizontal-item-title-margin-top: @spacing-2;
@steps-dot-horizontal-item-description-margin-top: @spacing-2;
@steps-dot-vertical-item-dot-margin-top: @spacing-4;
@steps-dot-vertical-item-description-margin-top: @spacing-2;
@steps-dot-vertical-spacing-tail-top: @spacing-2;
@steps-dot-vertical-spacing-tail-bottom: @spacing-2;

@steps-dot-size-item-icon: @size-2;
@steps-dot-size-item-icon-active: 10px;
@steps-dot-size-item-icon-gap: @spacing-2;
@steps-dot-size-item-tail: @border-1;

@steps-dot-vertical-item-icon-margin-right: @spacing-7;

@steps-dot-font-weight-item-title_active: @font-weight-500;

@steps-dot-border-radius-item-icon: @radius-circle;

@steps-dot-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-4');
@steps-dot-color-item-border_wait: var(~'@{arco-cssvars-prefix}-color-fill-4');
@steps-dot-color-item-tail_wait: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@steps-dot-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-dot-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_process: @color-primary-6;
@steps-dot-color-item-border_process: @color-primary-6;
@steps-dot-color-item-tail_process: @color-primary-6;
@steps-dot-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_finish: @color-primary-6;
@steps-dot-color-item-border_finish: @color-primary-6;
@steps-dot-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_error: @color-danger-6;
@steps-dot-color-item-border_error: @color-danger-6;
@steps-dot-color-item-tail_error: @color-danger-6;
@steps-dot-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-text-3');

// Arrow
@steps-arrow-size-item-gap: @spacing-2;

@steps-arrow-size-default-title-padding-left: @spacing-7;
@steps-arrow-size-small-title-padding-left: @spacing-8;

@steps-arrow-item-description-margin-top: 0;

@steps-arrow-font-weight-item-title_active: @font-weight-500;

@steps-arrow-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-1');
@steps-arrow-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-arrow-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-arrow-color-item-bg_process: @color-primary-6;
@steps-arrow-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-white');
@steps-arrow-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-white');

@steps-arrow-color-item-bg_finish: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@steps-arrow-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-arrow-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-arrow-color-item-bg_error: @color-danger-6;
@steps-arrow-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-white');
@steps-arrow-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-white');

// Navigation
@steps-navigation-color-arrow: var(~'@{arco-cssvars-prefix}-color-text-4');
@steps-navigation-size-arrow: 6px;
@steps-navigation-size-arrow-line-width: 2px;
@steps-navigation-size-arrow-top: @spacing-5;
@steps-navigation-padding-left: @spacing-8;
@steps-navigation-margin-right: @spacing-10;
@steps-navigation-spacing-arrow-right: @spacing-5;
@steps-navigation-spacing-ink-left: @spacing-none;
@steps-navigation-spacing-ink-right: 30px;


@steps-dot-item-icon-margin-left: (@steps-label-vertical-content-width / 2) -
  (@steps-dot-size-item-icon / 2);
@steps-dot-vertical-item-dot-margin-top-active: @steps-dot-vertical-item-dot-margin-top -
  (@steps-dot-size-item-icon-active - @steps-dot-size-item-icon);

// Dot
.@{steps-prefix-cls} {
  &-mode-dot &-item {
    flex: 1;
    white-space: nowrap;
    margin-right: @steps-dot-size-item-icon + @steps-dot-size-item-icon-gap * 2;
    position: relative;
    text-align: left;
    overflow: visible;

    &:last-child {
      flex: none;
      margin-right: 0;
    }
  }

  &-mode-dot &-item-active &-item-title {
    font-weight: @steps-dot-font-weight-item-title_active;
  }

  &-mode-dot &-item:not(&-item-active) &-item-title {
    font-weight: normal;
  }

  &-mode-dot &-item-icon {
    display: inline-block;
    box-sizing: border-box;
    width: @steps-dot-size-item-icon;
    height: @steps-dot-size-item-icon;
    border-radius: @steps-dot-border-radius-item-icon;
    vertical-align: top;
  }

  &-mode-dot &-item-active &-item-icon {
    width: @steps-dot-size-item-icon-active;
    height: @steps-dot-size-item-icon-active;
  }

  &-mode-dot &-item-wait &-item-icon {
    border-color: @steps-dot-color-item-border_wait;
    background-color: @steps-dot-color-item-bg_wait;
  }

  &-mode-dot &-item-process &-item-icon {
    border-color: @steps-dot-color-item-border_process;
    background-color: @steps-dot-color-item-bg_process;
  }

  &-mode-dot &-item-finish &-item-icon {
    border-color: @steps-dot-color-item-border_finish;
    background-color: @steps-dot-color-item-bg_finish;
  }

  &-mode-dot &-item-error &-item-icon {
    border-color: @steps-dot-color-item-border_error;
    background-color: @steps-dot-color-item-bg_error;
  }

  &-mode-dot&-horizontal &-item-icon {
    margin-left: @steps-dot-item-icon-margin-left;
  }

  &-mode-dot&-horizontal &-item-active &-item-icon {
    margin-left: @steps-dot-item-icon-margin-left -
      ((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) / 2);
    margin-top: -((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) / 2);
  }

  &-mode-dot &-item-content {
    display: inline-block;
  }

  &-mode-dot &-item-title {
    position: relative;
    display: inline-block;
    font-size: @steps-size-default-font-size-title;
    margin-top: @steps-dot-horizontal-item-title-margin-top;
  }

  &-mode-dot &-item-wait &-item-title {
    color: @steps-dot-color-item-title_wait;
  }

  &-mode-dot &-item-process &-item-title {
    color: @steps-dot-color-item-title_process;
  }

  &-mode-dot &-item-finish &-item-title {
    color: @steps-dot-color-item-title_finish;
  }

  &-mode-dot &-item-error &-item-title {
    color: @steps-dot-color-item-title_error;
  }

  &-mode-dot &-item-description {
    white-space: normal;
    font-size: @steps-size-default-font-size-description;
    margin-top: @steps-dot-horizontal-item-description-margin-top;
  }

  &-mode-dot &-item-wait &-item-description {
    color: @steps-dot-color-item-description_wait;
  }

  &-mode-dot &-item-process &-item-description {
    color: @steps-dot-color-item-description_process;
  }

  &-mode-dot &-item-finish &-item-description {
    color: @steps-dot-color-item-description_finish;
  }

  &-mode-dot &-item-error &-item-description {
    color: @steps-dot-color-item-description_error;
  }

  &-mode-dot > &-item:not(:last-child) {
    > .@{steps-prefix-cls}-item-tail {
      position: absolute;
      width: 100%;
      height: @steps-dot-size-item-tail;
      top: ((@steps-dot-size-item-icon - @steps-dot-size-item-tail) / 2);
      left: @steps-dot-item-icon-margin-left + @steps-dot-size-item-icon +
        @steps-dot-size-item-icon-gap;
      box-sizing: border-box;
      background-color: @steps-dot-color-item-tail_wait;

      &::after {
        display: none;
      }
    }
  }

  &-mode-dot &-item:not(:last-child)&-item-process &-item-tail {
    background-color: @steps-dot-color-item-tail_wait;
  }

  &-mode-dot &-item:not(:last-child)&-item-finish &-item-tail {
    background-color: @steps-dot-color-item-tail_process;
  }

  &-mode-dot &-item:not(:last-child)&-item-next-error &-item-tail {
    background-color: @steps-dot-color-item-tail_error;
  }

  // Dot vertical
  &-mode-dot&-vertical > &-item > &-item-icon {
    margin-right: @steps-dot-vertical-item-icon-margin-right;
  }

  &-mode-dot&-vertical > &-item > &-item-content {
    overflow: hidden;
  }

  &-mode-dot&-vertical &-item-title {
    margin-top: @steps-dot-vertical-item-dot-margin-top + (@steps-dot-size-item-icon / 2) -
      (@steps-size-default / 2);
  }

  &-mode-dot&-vertical&-size-small &-item-title {
    margin-top: @steps-dot-vertical-item-dot-margin-top + (@steps-dot-size-item-icon / 2) -
      (@steps-size-small / 2);
  }

  &-mode-dot&-vertical &-item-active &-item-title {
    margin-top: @steps-dot-vertical-item-dot-margin-top-active +
      (@steps-dot-size-item-icon-active / 2) - (@steps-size-default / 2);
  }

  &-mode-dot&-vertical&-size-small &-item-active &-item-title {
    margin-top: @steps-dot-vertical-item-dot-margin-top-active +
      (@steps-dot-size-item-icon-active / 2) - (@steps-size-small / 2);
  }

  &-mode-dot&-vertical &-item-description {
    margin-top: @steps-dot-vertical-item-description-margin-top;
  }

  &-mode-dot&-vertical > &-item:not(:last-child) {
    > .@{steps-prefix-cls}-item-tail {
      position: absolute;
      width: 1px;
      transform: translateX(-50%);
      top: @steps-dot-size-item-icon + @steps-dot-vertical-item-dot-margin-top +
        @steps-dot-vertical-spacing-tail-top;
      bottom: @steps-dot-vertical-spacing-tail-bottom - @steps-dot-vertical-item-dot-margin-top;
      left: (@steps-dot-size-item-icon / 2);
      background-color: transparent;
      box-sizing: border-box;
      padding: 0;
      height: unset;

      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: @steps-dot-color-item-tail_wait;
      }
    }
  }

  &-mode-dot&-vertical > &-item:not(:last-child)&-item-process {
    > .@{steps-prefix-cls}-item-tail::after {
      background-color: @steps-dot-color-item-tail_wait;
    }
  }

  &-mode-dot&-vertical > &-item:not(:last-child)&-item-finish {
    > .@{steps-prefix-cls}-item-tail::after {
      background-color: @steps-dot-color-item-tail_process;
    }
  }

  &-mode-dot&-vertical > &-item:not(:last-child)&-item-next-error {
    > .@{steps-prefix-cls}-item-tail::after {
      background-color: @steps-dot-color-item-tail_error;
    }
  }

  &-mode-dot&-vertical > &-item {
    > .@{steps-prefix-cls}-item-icon {
      margin-top: @steps-dot-vertical-item-dot-margin-top;
    }
  }

  &-mode-dot&-vertical > &-item-active {
    > .@{steps-prefix-cls}-item-icon {
      margin-top: @steps-dot-vertical-item-dot-margin-top-active;
      margin-left: -((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) / 2);
    }
  }
}

.@{steps-prefix-cls}-rtl {
  &.@{steps-prefix-cls}-mode-dot {
    .@{steps-prefix-cls}-item {
      margin-right: 0;
      margin-left: @steps-dot-size-item-icon + @steps-dot-size-item-icon-gap * 2;
      text-align: right;

      &:last-child {
        margin-left: 0;
      }

      &:not(:last-child) {
        .@{steps-prefix-cls}-item-tail {
          left: initial;
          right: @steps-dot-item-icon-margin-left + @steps-dot-size-item-icon +
            @steps-dot-size-item-icon-gap;
        }
      }
    }
  }

  &.@{steps-prefix-cls}-mode-dot.@{steps-prefix-cls}-horizontal {
    .@{steps-prefix-cls}-item-icon {
      margin-left: 0;
      margin-right: @steps-dot-item-icon-margin-left;
    }

    .@{steps-prefix-cls}-item-active .@{steps-prefix-cls}-item-icon {
      margin-left: 0;
      margin-right: @steps-dot-item-icon-margin-left -
        ((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) / 2);
    }
  }

  &.@{steps-prefix-cls}-mode-dot.@{steps-prefix-cls}-vertical {
    .@{steps-prefix-cls}-item-icon {
      margin-right: 0;
      margin-left: @steps-dot-vertical-item-icon-margin-right;
    }

    .@{steps-prefix-cls}-item:not(:last-child) .@{steps-prefix-cls}-item-tail {
      left: 0;
      right: (@steps-dot-size-item-icon / 2);
    }

    .@{steps-prefix-cls}-item-active .@{steps-prefix-cls}-item-icon {
      margin-right: -((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) / 2);
    }
  }
}



// Two size: Default and small
@steps-size-default: @size-7;
@steps-size-small: @size-6;
@steps-size-default-arrow: @size-18;
@steps-size-small-arrow: @size-10;

@steps-size-default-font-size-icon: @size-4;
@steps-size-default-font-size-title: @font-size-title-1;
@steps-size-default-font-size-description: @font-size-body-1;
@steps-size-small-font-size-icon: 14px;
@steps-size-small-font-size-title: @font-size-body-3;
@steps-size-small-font-size-description: @font-size-body-1;

@steps-label-vertical-content-width: 140px;
@steps-direction-horizontal-description-width: 140px;

// Circle
@steps-circle-size-item-tail: @border-1;
@steps-circle-size-item-icon-gap: 12px;

@steps-circle-font-weight-item-title_active: @font-weight-500;

@steps-circle-border-radius-item-icon: @radius-circle;

@steps-circle-horizontal-item-description-margin-top: @spacing-1;
@steps-circle-vertical-item-description-margin-top: @spacing-1;

@steps-circle-vertical-spacing-tail-top: @spacing-3;
@steps-circle-vertical-spacing-tail-bottom: @spacing-3;

@steps-circle-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-2');
@steps-circle-color-item-border_wait: @color-transparent;
@steps-circle-color-item-icon-text_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-circle-color-item-tail_wait: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@steps-circle-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-circle-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_process: @color-primary-6;
@steps-circle-color-item-border_process: @color-transparent;
@steps-circle-color-item-icon-text_process: var(~'@{arco-cssvars-prefix}-color-white');
@steps-circle-color-item-tail_process: @color-primary-6;
@steps-circle-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_finish: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@steps-circle-color-item-border_finish: @color-transparent;
@steps-circle-color-item-icon-text_finish: @color-primary-6;
@steps-circle-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_error: @color-danger-6;
@steps-circle-color-item-border_error: @color-transparent;
@steps-circle-color-item-icon-text_error: var(~'@{arco-cssvars-prefix}-color-white');
@steps-circle-color-item-tail_error: @color-danger-6;
@steps-circle-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-text-3');

// Dot
@steps-dot-horizontal-item-title-margin-top: @spacing-2;
@steps-dot-horizontal-item-description-margin-top: @spacing-2;
@steps-dot-vertical-item-dot-margin-top: @spacing-4;
@steps-dot-vertical-item-description-margin-top: @spacing-2;
@steps-dot-vertical-spacing-tail-top: @spacing-2;
@steps-dot-vertical-spacing-tail-bottom: @spacing-2;

@steps-dot-size-item-icon: @size-2;
@steps-dot-size-item-icon-active: 10px;
@steps-dot-size-item-icon-gap: @spacing-2;
@steps-dot-size-item-tail: @border-1;

@steps-dot-vertical-item-icon-margin-right: @spacing-7;

@steps-dot-font-weight-item-title_active: @font-weight-500;

@steps-dot-border-radius-item-icon: @radius-circle;

@steps-dot-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-4');
@steps-dot-color-item-border_wait: var(~'@{arco-cssvars-prefix}-color-fill-4');
@steps-dot-color-item-tail_wait: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@steps-dot-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-dot-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_process: @color-primary-6;
@steps-dot-color-item-border_process: @color-primary-6;
@steps-dot-color-item-tail_process: @color-primary-6;
@steps-dot-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_finish: @color-primary-6;
@steps-dot-color-item-border_finish: @color-primary-6;
@steps-dot-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_error: @color-danger-6;
@steps-dot-color-item-border_error: @color-danger-6;
@steps-dot-color-item-tail_error: @color-danger-6;
@steps-dot-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-text-3');

// Arrow
@steps-arrow-size-item-gap: @spacing-2;

@steps-arrow-size-default-title-padding-left: @spacing-7;
@steps-arrow-size-small-title-padding-left: @spacing-8;

@steps-arrow-item-description-margin-top: 0;

@steps-arrow-font-weight-item-title_active: @font-weight-500;

@steps-arrow-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-1');
@steps-arrow-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-arrow-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-arrow-color-item-bg_process: @color-primary-6;
@steps-arrow-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-white');
@steps-arrow-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-white');

@steps-arrow-color-item-bg_finish: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@steps-arrow-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-arrow-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-arrow-color-item-bg_error: @color-danger-6;
@steps-arrow-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-white');
@steps-arrow-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-white');

// Navigation
@steps-navigation-color-arrow: var(~'@{arco-cssvars-prefix}-color-text-4');
@steps-navigation-size-arrow: 6px;
@steps-navigation-size-arrow-line-width: 2px;
@steps-navigation-size-arrow-top: @spacing-5;
@steps-navigation-padding-left: @spacing-8;
@steps-navigation-margin-right: @spacing-10;
@steps-navigation-spacing-arrow-right: @spacing-5;
@steps-navigation-spacing-ink-left: @spacing-none;
@steps-navigation-spacing-ink-right: 30px;


// Arrow
.@{steps-prefix-cls} {
  &-mode-arrow &-item {
    position: relative;
    display: flex;
    flex: 1;
    white-space: nowrap;
    height: @steps-size-default-arrow;
    align-items: center;
    overflow: visible;

    &:not(:last-child) {
      margin-right: @steps-arrow-size-item-gap;
    }
  }

  &-mode-arrow &-item-wait {
    background-color: @steps-arrow-color-item-bg_wait;
  }

  &-mode-arrow &-item-process {
    background-color: @steps-arrow-color-item-bg_process;
  }

  &-mode-arrow &-item-finish {
    background-color: @steps-arrow-color-item-bg_finish;
  }

  &-mode-arrow &-item-error {
    background-color: @steps-arrow-color-item-bg_error;
  }

  &-mode-arrow &-item-content {
    display: inline-block;
    box-sizing: border-box;
  }

  &-mode-arrow &-item:first-child &-item-content {
    padding-left: @steps-arrow-size-default-title-padding-left;
  }

  &-mode-arrow &-item:not(:first-child) &-item-content {
    padding-left: @steps-arrow-size-default-title-padding-left + (@steps-size-default-arrow / 2);
  }

  &-mode-arrow &-item-title {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-size: @steps-size-default-font-size-title;

    &::after {
      display: none !important;
    }
  }

  &-mode-arrow &-item-wait &-item-title {
    color: @steps-arrow-color-item-title_wait;
  }

  &-mode-arrow &-item-process &-item-title {
    color: @steps-arrow-color-item-title_process;
  }

  &-mode-arrow &-item-finish &-item-title {
    color: @steps-arrow-color-item-title_finish;
  }

  &-mode-arrow &-item-error &-item-title {
    color: @steps-arrow-color-item-title_error;
  }

  &-mode-arrow &-item-active &-item-title {
    font-weight: @steps-arrow-font-weight-item-title_active;
  }

  &-mode-arrow &-item-description {
    white-space: nowrap;
    font-size: @steps-size-default-font-size-description;
    margin-top: @steps-arrow-item-description-margin-top;
    max-width: none;
  }

  &-mode-arrow &-item-wait &-item-description {
    color: @steps-arrow-color-item-description_wait;
  }

  &-mode-arrow &-item-process &-item-description {
    color: @steps-arrow-color-item-description_process;
  }

  &-mode-arrow &-item-finish &-item-description {
    color: @steps-arrow-color-item-description_finish;
  }

  &-mode-arrow &-item-error &-item-description {
    color: @steps-arrow-color-item-description_error;
  }

  // 前箭头
  &-mode-arrow &-item:not(:first-child)::before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-top: (@steps-size-default-arrow / 2) solid transparent;
    border-bottom: (@steps-size-default-arrow / 2) solid transparent;
    border-left: (@steps-size-default-arrow / 2) solid var(~'@{arco-cssvars-prefix}-color-bg-2');
    left: 0;
    top: 0;
    z-index: 1;
  }

  // 后箭头
  &-mode-arrow &-item:not(:last-child)::after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-top: (@steps-size-default-arrow / 2) solid transparent;
    border-bottom: (@steps-size-default-arrow / 2) solid transparent;
    right: -(@steps-size-default-arrow / 2);
    top: 0;
    z-index: 2;
    clear: both;
  }

  &-mode-arrow &-item:not(:last-child)&-item-wait::after {
    border-left: (@steps-size-default-arrow / 2) solid @steps-arrow-color-item-bg_wait;
  }

  &-mode-arrow &-item:not(:last-child)&-item-process::after {
    border-left: (@steps-size-default-arrow / 2) solid @steps-arrow-color-item-bg_process;
  }

  &-mode-arrow &-item:not(:last-child)&-item-error::after {
    border-left: (@steps-size-default-arrow / 2) solid @steps-arrow-color-item-bg_error;
  }

  &-mode-arrow &-item:not(:last-child)&-item-finish::after {
    border-left: (@steps-size-default-arrow / 2) solid @steps-arrow-color-item-bg_finish;
  }

  // Small
  &-mode-arrow&-size-small &-item {
    height: @steps-size-small-arrow;

    &-title {
      font-size: @steps-size-small-font-size-title;
    }

    &-description {
      display: none;
    }

    &:not(:first-child) {
      &::before {
        border-top: (@steps-size-small-arrow / 2) solid transparent;
        border-bottom: (@steps-size-small-arrow / 2) solid transparent;
        border-left: (@steps-size-small-arrow / 2) solid var(~'@{arco-cssvars-prefix}-color-bg-2');
      }
    }

    &:not(:last-child)::after {
      right: -(@steps-size-small-arrow / 2);
      border-top: (@steps-size-small-arrow / 2) solid transparent;
      border-bottom: (@steps-size-small-arrow / 2) solid transparent;
      border-left: (@steps-size-small-arrow / 2) solid @steps-arrow-color-item-bg_wait;
    }
  }

  &-mode-arrow&-size-small &-item:first-child &-item-content {
    padding-left: @steps-arrow-size-small-title-padding-left;
  }

  &-mode-arrow&-size-small &-item:not(:first-child) &-item-content {
    padding-left: @steps-arrow-size-small-title-padding-left + (@steps-size-small-arrow / 2);
  }

  &-mode-arrow&-size-small &-item-error {
    &:not(:last-child)::after {
      border-left: (@steps-size-small-arrow / 2) solid @steps-arrow-color-item-bg_error;
    }
  }

  &-mode-arrow&-size-small &-item:not(:last-child)&-item-wait::after {
    border-left: (@steps-size-small-arrow / 2) solid @steps-arrow-color-item-bg_wait;
  }

  &-mode-arrow&-size-small &-item:not(:last-child)&-item-process::after {
    border-left: (@steps-size-small-arrow / 2) solid @steps-arrow-color-item-bg_process;
  }

  &-mode-arrow&-size-small &-item:not(:last-child)&-item-finish::after {
    border-left: (@steps-size-small-arrow / 2) solid @steps-arrow-color-item-bg_finish;
  }
}

.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-mode-arrow {
  .@{steps-prefix-cls}-item {
    &:not(:last-child) {
      margin-right: 0;
      margin-left: @steps-arrow-size-item-gap;
    }

    &:first-child {
      .@{steps-prefix-cls}-item-content {
        padding-left: 0;
        padding-right: @steps-arrow-size-default-title-padding-left;
      }
    }

    &:not(:first-child) {
      .@{steps-prefix-cls}-item-content {
        padding-left: 0;
        padding-right: @steps-arrow-size-default-title-padding-left +
          (@steps-size-default-arrow / 2);
      }
    }

    &:not(:first-child)::before {
      border-left: none;
      border-right: (@steps-size-default-arrow / 2) solid var(~'@{arco-cssvars-prefix}-color-bg-2');
      right: 0;
    }

    &:not(:last-child)::after {
      left: -(@steps-size-default-arrow / 2);
      right: initial;
    }
  }

  .@{steps-prefix-cls}-item:not(:last-child).@{steps-prefix-cls}-item-wait::after {
    border-left: none;
    border-right: (@steps-size-default-arrow / 2) solid @steps-arrow-color-item-bg_wait;
  }

  .@{steps-prefix-cls}-item:not(:last-child).@{steps-prefix-cls}-item-process::after {
    border-left: none;
    border-right: (@steps-size-default-arrow / 2) solid @steps-arrow-color-item-bg_process;
  }

  .@{steps-prefix-cls}-item:not(:last-child).@{steps-prefix-cls}-item-finish::after {
    border-left: none;
    border-right: (@steps-size-default-arrow / 2) solid @steps-arrow-color-item-bg_finish;
  }

  .@{steps-prefix-cls}-item:not(:last-child).@{steps-prefix-cls}-item-error::after {
    border-left: none;
    border-right: (@steps-size-default-arrow / 2) solid @steps-arrow-color-item-bg_error;
  }
}

.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-mode-arrow.@{steps-prefix-cls}-size-small {
  .@{steps-prefix-cls}-item {
    &:not(:first-child) {
      &::before {
        border-right: (@steps-size-small-arrow / 2) solid var(~'@{arco-cssvars-prefix}-color-bg-2');
      }
    }

    &:not(:last-child)::after {
      left: -(@steps-size-small-arrow / 2);
      border-right: (@steps-size-small-arrow / 2) solid @steps-arrow-color-item-bg_wait;
    }

    &:first-child {
      .@{steps-prefix-cls}-item-content {
        padding-left: 0;
        padding-right: @steps-arrow-size-small-title-padding-left;
      }
    }

    &:not(:first-child) {
      .@{steps-prefix-cls}-item-content {
        padding-left: 0;
        padding-right: @steps-arrow-size-small-title-padding-left + (@steps-size-small-arrow / 2);
      }
    }
  }

  .@{steps-prefix-cls}-item:not(:last-child).@{steps-prefix-cls}-item-wait::after {
    border-right: (@steps-size-small-arrow / 2) solid @steps-arrow-color-item-bg_wait;
  }

  .@{steps-prefix-cls}-item:not(:last-child).@{steps-prefix-cls}-item-process::after {
    border-right: (@steps-size-small-arrow / 2) solid @steps-arrow-color-item-bg_process;
  }

  .@{steps-prefix-cls}-item:not(:last-child).@{steps-prefix-cls}-item-finish::after {
    border-right: (@steps-size-small-arrow / 2) solid @steps-arrow-color-item-bg_finish;
  }

  .@{steps-prefix-cls}-item:not(:last-child).@{steps-prefix-cls}-item-error::after {
    border-right: (@steps-size-small-arrow / 2) solid @steps-arrow-color-item-bg_error;
  }
}



// Two size: Default and small
@steps-size-default: @size-7;
@steps-size-small: @size-6;
@steps-size-default-arrow: @size-18;
@steps-size-small-arrow: @size-10;

@steps-size-default-font-size-icon: @size-4;
@steps-size-default-font-size-title: @font-size-title-1;
@steps-size-default-font-size-description: @font-size-body-1;
@steps-size-small-font-size-icon: 14px;
@steps-size-small-font-size-title: @font-size-body-3;
@steps-size-small-font-size-description: @font-size-body-1;

@steps-label-vertical-content-width: 140px;
@steps-direction-horizontal-description-width: 140px;

// Circle
@steps-circle-size-item-tail: @border-1;
@steps-circle-size-item-icon-gap: 12px;

@steps-circle-font-weight-item-title_active: @font-weight-500;

@steps-circle-border-radius-item-icon: @radius-circle;

@steps-circle-horizontal-item-description-margin-top: @spacing-1;
@steps-circle-vertical-item-description-margin-top: @spacing-1;

@steps-circle-vertical-spacing-tail-top: @spacing-3;
@steps-circle-vertical-spacing-tail-bottom: @spacing-3;

@steps-circle-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-2');
@steps-circle-color-item-border_wait: @color-transparent;
@steps-circle-color-item-icon-text_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-circle-color-item-tail_wait: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@steps-circle-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-circle-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_process: @color-primary-6;
@steps-circle-color-item-border_process: @color-transparent;
@steps-circle-color-item-icon-text_process: var(~'@{arco-cssvars-prefix}-color-white');
@steps-circle-color-item-tail_process: @color-primary-6;
@steps-circle-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_finish: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@steps-circle-color-item-border_finish: @color-transparent;
@steps-circle-color-item-icon-text_finish: @color-primary-6;
@steps-circle-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-circle-color-item-bg_error: @color-danger-6;
@steps-circle-color-item-border_error: @color-transparent;
@steps-circle-color-item-icon-text_error: var(~'@{arco-cssvars-prefix}-color-white');
@steps-circle-color-item-tail_error: @color-danger-6;
@steps-circle-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-circle-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-text-3');

// Dot
@steps-dot-horizontal-item-title-margin-top: @spacing-2;
@steps-dot-horizontal-item-description-margin-top: @spacing-2;
@steps-dot-vertical-item-dot-margin-top: @spacing-4;
@steps-dot-vertical-item-description-margin-top: @spacing-2;
@steps-dot-vertical-spacing-tail-top: @spacing-2;
@steps-dot-vertical-spacing-tail-bottom: @spacing-2;

@steps-dot-size-item-icon: @size-2;
@steps-dot-size-item-icon-active: 10px;
@steps-dot-size-item-icon-gap: @spacing-2;
@steps-dot-size-item-tail: @border-1;

@steps-dot-vertical-item-icon-margin-right: @spacing-7;

@steps-dot-font-weight-item-title_active: @font-weight-500;

@steps-dot-border-radius-item-icon: @radius-circle;

@steps-dot-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-4');
@steps-dot-color-item-border_wait: var(~'@{arco-cssvars-prefix}-color-fill-4');
@steps-dot-color-item-tail_wait: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@steps-dot-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-dot-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_process: @color-primary-6;
@steps-dot-color-item-border_process: @color-primary-6;
@steps-dot-color-item-tail_process: @color-primary-6;
@steps-dot-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_finish: @color-primary-6;
@steps-dot-color-item-border_finish: @color-primary-6;
@steps-dot-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-dot-color-item-bg_error: @color-danger-6;
@steps-dot-color-item-border_error: @color-danger-6;
@steps-dot-color-item-tail_error: @color-danger-6;
@steps-dot-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-dot-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-text-3');

// Arrow
@steps-arrow-size-item-gap: @spacing-2;

@steps-arrow-size-default-title-padding-left: @spacing-7;
@steps-arrow-size-small-title-padding-left: @spacing-8;

@steps-arrow-item-description-margin-top: 0;

@steps-arrow-font-weight-item-title_active: @font-weight-500;

@steps-arrow-color-item-bg_wait: var(~'@{arco-cssvars-prefix}-color-fill-1');
@steps-arrow-color-item-title_wait: var(~'@{arco-cssvars-prefix}-color-text-2');
@steps-arrow-color-item-description_wait: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-arrow-color-item-bg_process: @color-primary-6;
@steps-arrow-color-item-title_process: var(~'@{arco-cssvars-prefix}-color-white');
@steps-arrow-color-item-description_process: var(~'@{arco-cssvars-prefix}-color-white');

@steps-arrow-color-item-bg_finish: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@steps-arrow-color-item-title_finish: var(~'@{arco-cssvars-prefix}-color-text-1');
@steps-arrow-color-item-description_finish: var(~'@{arco-cssvars-prefix}-color-text-3');

@steps-arrow-color-item-bg_error: @color-danger-6;
@steps-arrow-color-item-title_error: var(~'@{arco-cssvars-prefix}-color-white');
@steps-arrow-color-item-description_error: var(~'@{arco-cssvars-prefix}-color-white');

// Navigation
@steps-navigation-color-arrow: var(~'@{arco-cssvars-prefix}-color-text-4');
@steps-navigation-size-arrow: 6px;
@steps-navigation-size-arrow-line-width: 2px;
@steps-navigation-size-arrow-top: @spacing-5;
@steps-navigation-padding-left: @spacing-8;
@steps-navigation-margin-right: @spacing-10;
@steps-navigation-spacing-arrow-right: @spacing-5;
@steps-navigation-spacing-ink-left: @spacing-none;
@steps-navigation-spacing-ink-right: 30px;


// Navigation
.@{steps-prefix-cls} {
  &-mode-navigation&-label-horizontal &-item:not(:last-child) &-item-title::after {
    display: none;
  }

  &-mode-navigation &-item {
    padding-left: @steps-navigation-padding-left;
    padding-right: @steps-navigation-spacing-arrow-right;
    margin-right: @steps-navigation-margin-right;

    &:last-child {
      flex: 1;
    }

    &-content {
      margin-bottom: 20px;
    }

    &-description {
      padding-right: 20px;
    }

    &-active::after {
      content: '';
      position: absolute;
      display: block;
      height: 2px;
      left: @steps-navigation-spacing-ink-left;
      right: @steps-navigation-spacing-ink-right;
      bottom: 0;
      background-color: @color-primary-6;
    }

    &-active:last-child::after {
      width: 100%;
    }
  }

  &-mode-navigation &-item:not(:last-child) &-item-content::after {
    content: '';
    position: absolute;
    top: @steps-navigation-size-arrow-top;
    right: @steps-navigation-spacing-arrow-right;
    display: inline-block;
    width: @steps-navigation-size-arrow;
    height: @steps-navigation-size-arrow;
    border: @steps-navigation-size-arrow-line-width solid @steps-navigation-color-arrow;
    background-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
    border-bottom: none;
    border-left: none;
    transform: rotate(45deg);
  }
}

.@{steps-prefix-cls}-rtl {
  &.@{steps-prefix-cls}-mode-navigation {
    .@{steps-prefix-cls}-item {
      padding-right: @steps-navigation-padding-left;
      padding-left: @steps-navigation-spacing-arrow-right;
      margin-left: @steps-navigation-margin-right;
      margin-right: 0;

      &-description {
        padding-left: 20px;
        padding-right: 0;
      }

      &-active::after {
        right: @steps-navigation-spacing-ink-left;
        left: @steps-navigation-spacing-ink-right;
      }

      &:not(:last-child) .@{steps-prefix-cls}-item-content::after {
        left: @steps-navigation-spacing-arrow-right;
        right: initial;
        border: @steps-navigation-size-arrow-line-width solid @steps-navigation-color-arrow;
        border-right: none;
        border-top: none;
      }
    }
  }
}


@steps-prefix-cls: ~'@{prefix}-steps';

.@{steps-prefix-cls} {
  display: flex;

  &-change-onclick {
    .@{steps-prefix-cls}-item-title,
    .@{steps-prefix-cls}-item-description {
      transition: all @transition-duration-1 @transition-timing-function-linear;
    }
  }

  &-change-onclick &-item:not(&-item-active):not(&-item-disabled) {
    cursor: pointer;

    &:hover {
      .@{steps-prefix-cls}-item-content {
        .@{steps-prefix-cls}-item-title,
        .@{steps-prefix-cls}-item-description {
          color: @color-primary-6;
        }
      }
    }
  }
}

// Lineless
.@{steps-prefix-cls} {
  &-lineless &-item-title::after {
    display: none !important;
  }
}

// Direction
.@{steps-prefix-cls} {
  &-vertical {
    flex-direction: column;

    > .@{steps-prefix-cls}-item {
      &:not(:last-child) {
        min-height: 90px;
      }

      > .@{steps-prefix-cls}-item-content {
        > .@{steps-prefix-cls}-item-title::after {
          display: none !important;
        }

        > .@{steps-prefix-cls}-item-description {
          max-width: none;
        }
      }
    }
  }
}

// Label vertical
.@{steps-prefix-cls} {
  &-label-vertical &-item {
    &-content {
      display: block;
      text-align: center;
      width: @steps-label-vertical-content-width;
    }

    &-description {
      max-width: none;
    }
  }
}
.@{steps-prefix-cls}-rtl {
  direction: rtl;
}


/********** Steps end ***************/
    


/********** Switch  ***************/



// Global
@switch-size-default: @size-6;
@switch-size-small: @size-4;
@switch-font-size-text: @font-size-caption;

// circle and round
@switch-size-dot-default: @size-4;
@switch-size-dot-small: 12px;

// line
@switch-line-size-dot-default: @size-5;
@switch-line-size-dot-small: @size-4;

// Circle
@switch-circle-default-width: @size-10;
@switch-circle-small-width: @size-7;

// Round
@switch-round-default-width: @size-10;
@switch-round-small-width: @size-7;

// Line
@switch-line-default-width: @size-9;
@switch-line-small-width: @size-7;
@switch-line-height-bg-line: 6px;
@switch-line-color-dot-shadow: var(~'@{arco-cssvars-prefix}-color-neutral-6');

@switch-color-bg_on: @color-primary-6;
@switch-color-bg_off: var(~'@{arco-cssvars-prefix}-color-fill-4');
@switch-color-bg_on_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@switch-color-bg_off_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@switch-color-bg_on_loading: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@switch-color-bg_off_loading: var(~'@{arco-cssvars-prefix}-color-fill-2');
@switch-color-dot-bg: var(~'@{arco-cssvars-prefix}-color-bg-white');
@switch-color-text_on: var(~'@{arco-cssvars-prefix}-color-white');
@switch-color-text_off: var(~'@{arco-cssvars-prefix}-color-white');
@switch-color-text_on_disabled: var(~'@{arco-cssvars-prefix}-color-white');
@switch-color-text_off_disabled: var(~'@{arco-cssvars-prefix}-color-white');
@switch-color-text_on_loading: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@switch-color-text_off_loading: var(~'@{arco-cssvars-prefix}-color-white');
@switch-color-dot-icon_on: @color-primary-6;
@switch-color-dot-icon_off: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@switch-color-dot-icon_on_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@switch-color-dot-icon_off_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@switch-color-dot-icon_on_loading: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@switch-color-dot-icon_off_loading: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@switch-color-box-shadow_checked: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@switch-color-box-shadow_default: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));


@switch-prefix-cls: ~'@{prefix}-switch';

@switch-size-default-gap: ((@switch-size-default - @switch-size-dot-default) / 2);
@switch-size-small-gap: ((@switch-size-small - @switch-size-dot-small) / 2);

@switch-size-default-line-gap: ((@switch-size-default - @switch-line-size-dot-default) / 2);
@switch-size-small-line-gap: ((@switch-size-small - @switch-line-size-dot-small) / 2);

.switchSlideText-enter,
.switchSlideText-appear {
  left: -100% !important;
}

.switchSlideText-enter-active,
.switchSlideText-appear-active {
  left: 8px !important;
  transition: left @transition-duration-2 @transition-timing-function-standard;
}

.switchSlideText-exit {
  left: 100% !important;
}

.switchSlideText-exit-active {
  left: @switch-size-dot-default + @switch-size-default-gap + 6px !important;
  transition: left @transition-duration-2 @transition-timing-function-standard;
}

.@{switch-prefix-cls} {
  position: relative;
  outline: none;
  height: @switch-size-default;
  line-height: @switch-size-default;
  min-width: @switch-circle-default-width;
  background-color: @switch-color-bg_off;
  border-radius: (@switch-size-default / 2);
  border: none;
  cursor: pointer;
  transition: background-color @transition-duration-2 @transition-timing-function-standard;
  padding: 0;
  box-sizing: border-box;
  vertical-align: middle;
  overflow: hidden;

  &-type-round,
  &-type-circle {
    &:focus-visible {
      box-shadow: 0 0 0 2px @switch-color-box-shadow_default;
    }

    &.@{switch-prefix-cls}-checked:focus-visible {
      box-shadow: 0 0 0 2px @switch-color-box-shadow_checked;
    }
  }

  &-type-line {
    &:focus-visible .@{switch-prefix-cls}-dot {
      box-shadow: 0 0 0 2px @switch-color-box-shadow_default;
      transition: none;
    }

    &.@{switch-prefix-cls}-checked:focus-visible .@{switch-prefix-cls}-dot {
      box-shadow: 0 0 0 2px @switch-color-box-shadow_checked;
    }
  }

  &-dot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: @switch-size-default-gap;
    left: @switch-size-default-gap;
    width: @switch-size-dot-default;
    height: @switch-size-dot-default;
    border-radius: 50%;
    background-color: @switch-color-dot-bg;
    color: @switch-color-dot-icon_off;
    font-size: 12px;
    transition: all @transition-duration-2 @transition-timing-function-standard;
  }

  &-checked {
    background-color: @switch-color-bg_on;
  }

  &-checked &-dot {
    color: @switch-color-dot-icon_on;
    left: calc(100% - @switch-size-dot-default - @switch-size-default-gap);
  }

  &[disabled] &-dot {
    color: @switch-color-dot-icon_off_disabled;
  }

  &[disabled]&-checked &-dot {
    color: @switch-color-dot-icon_on_disabled;
  }

  &[disabled] &-dot {
    color: @switch-color-dot-icon_off_disabled;
  }

  &[disabled]&-checked &-dot {
    color: @switch-color-dot-icon_on_disabled;
  }

  &-text-holder {
    opacity: 0;
    font-size: @switch-font-size-text;
    margin: 0 8px 0 @switch-size-dot-default + @switch-size-default-gap + 6px;
  }

  &-text {
    position: absolute;
    color: @switch-color-text_off;
    font-size: @switch-font-size-text;
    top: 0;
    left: @switch-size-dot-default + @switch-size-default-gap + 6px;
  }

  &-checked &-text-holder {
    margin: 0 @switch-size-dot-default + @switch-size-default-gap + 6px 0 8px;
  }

  &-checked &-text {
    left: 8px;
    color: @switch-color-text_on;
  }

  // Disabled
  &[disabled] {
    cursor: not-allowed;
    background-color: @switch-color-bg_off_disabled;
  }

  &[disabled] &-text {
    color: @switch-color-text_off_disabled;
  }

  &[disabled]&-checked {
    background-color: @switch-color-bg_on_disabled;
  }

  &[disabled]&-checked &-text {
    color: @switch-color-text_on_disabled;
  }

  // Loading
  &-loading {
    background-color: @switch-color-bg_off_loading;
  }

  &-loading &-dot {
    color: @switch-color-dot-icon_off_loading;
  }

  &-loading &-text {
    color: @switch-color-text_off_loading;
  }

  &-loading&-checked {
    background-color: @switch-color-bg_on_loading;
  }

  &-loading&-checked &-dot {
    color: @switch-color-dot-icon_on_loading;
  }

  &-loading&-checked &-text {
    color: @switch-color-text_on_loading;
  }

  &-small {
    height: @switch-size-small;
    line-height: @switch-size-small;
    min-width: @switch-circle-small-width;
  }

  &-small&-checked {
    padding-left: -@switch-size-small-gap;
  }

  &-small &-dot {
    top: @switch-size-small-gap;
    left: @switch-size-small-gap;
    width: @switch-size-dot-small;
    height: @switch-size-dot-small;
    border-radius: (@switch-size-small / 2);

    &-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.66667);
    }
  }

  &-small&-checked &-dot {
    left: calc(100% - @switch-size-dot-small - @switch-size-small-gap);
  }
}

// Round
.@{switch-prefix-cls} {
  &-type-round {
    border-radius: @radius-small;
    min-width: @switch-round-default-width;
  }

  &-type-round &-dot {
    border-radius: 2px;
  }

  &-type-round&-small {
    border-radius: 2px;
    height: @switch-size-small;
    line-height: @switch-size-small;
    min-width: @switch-round-small-width;
  }

  &-type-round&-small &-dot {
    border-radius: 1px;
  }
}

// Line
.@{switch-prefix-cls} {
  &-type-line {
    min-width: @switch-line-default-width;
    background-color: transparent;
    overflow: unset;

    &::after {
      content: '';
      display: block;
      width: 100%;
      border-radius: (@switch-line-height-bg-line / 2);
      height: @switch-line-height-bg-line;
      background-color: @switch-color-bg_off;
      transition: background-color @transition-duration-2 @transition-timing-function-standard;
    }
  }

  &-type-line &-dot {
    top: @switch-size-default-line-gap;
    left: 0;
    border-radius: (@switch-line-size-dot-default / 2);
    width: @switch-line-size-dot-default;
    height: @switch-line-size-dot-default;
    background-color: @switch-color-dot-bg;
    box-shadow: 0 1px 3px @switch-line-color-dot-shadow;
  }

  &-type-line&-checked {
    background-color: transparent;

    &::after {
      background-color: @switch-color-bg_on;
    }
  }

  &-type-line&-checked &-dot {
    left: calc(100% - @switch-line-size-dot-default);
  }

  // Disabled
  &-type-line[disabled] {
    cursor: not-allowed;
    background-color: transparent;

    &::after {
      background-color: @switch-color-bg_off_disabled;
    }
  }

  &-type-line[disabled]&-checked {
    background-color: transparent;

    &::after {
      background-color: @switch-color-bg_on_disabled;
    }
  }

  // Loading
  &-type-line&-loading {
    background-color: transparent;

    &::after {
      background-color: @switch-color-bg_off_loading;
    }
  }

  &-type-line&-loading&-checked {
    background-color: transparent;

    &::after {
      background-color: @switch-color-bg_on_loading;
    }
  }

  &-type-line&-small {
    height: @switch-size-small;
    line-height: @switch-size-small;
    min-width: @switch-line-small-width;
  }

  &-type-line&-small&-checked {
    padding-left: -@switch-size-small-line-gap;
  }

  &-type-line&-small &-dot {
    top: @switch-size-small-line-gap;
    width: @switch-line-size-dot-small;
    height: @switch-line-size-dot-small;
    border-radius: (@switch-size-small / 2);

    &-icon {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  &-type-line&-small&-checked &-dot {
    left: calc(100% - @switch-line-size-dot-small);
  }
}

.@{switch-prefix-cls}-rtl {
  direction: rtl;

  .switchSlideText-enter,
  .switchSlideText-appear {
    right: -100% !important;
    left: initial;
  }

  .switchSlideText-enter-active,
  .switchSlideText-appear-active {
    left: initial;
    right: 8px !important;
    transition: right @transition-duration-2 @transition-timing-function-standard;
  }

  .switchSlideText-exit {
    right: 100% !important;
    left: initial;
  }

  .switchSlideText-exit-active {
    left: initial;
    right: @switch-size-dot-default + @switch-size-default-gap + 6px !important;
    transition: right @transition-duration-2 @transition-timing-function-standard;
  }

  .@{switch-prefix-cls} {
    &-dot {
      left: initial;
      right: @switch-size-default-gap;
    }

    &-text-holder {
      margin: 0 @switch-size-dot-default + @switch-size-default-gap + 6px 0 8px;
    }

    &-text {
      left: initial;
      right: @switch-size-dot-default + @switch-size-default-gap + 6px;
    }
  }

  &.@{switch-prefix-cls}-small .@{switch-prefix-cls}-dot {
    right: @switch-size-small-gap;
  }

  &.@{switch-prefix-cls}-type-line .@{switch-prefix-cls}-dot {
    right: 0;
  }

  &.@{switch-prefix-cls}-checked {
    .@{switch-prefix-cls}-dot {
      right: calc(100% - @switch-size-dot-default - @switch-size-default-gap);
    }

    .@{switch-prefix-cls}-text-holder {
      margin: 0 8px 0 @switch-size-dot-default + @switch-size-default-gap + 6px;
    }

    .@{switch-prefix-cls}-text {
      right: 8px;
      left: initial;
    }

    &.@{switch-prefix-cls}-small {
      padding-right: -@switch-size-small-gap;
      padding-left: 0;

      &.@{switch-prefix-cls}-type-line {
        padding-right: -@switch-size-small-line-gap;
        padding-left: 0;
      }
    }

    &.@{switch-prefix-cls}-small .@{switch-prefix-cls}-dot {
      left: initial;
      right: calc(100% - @switch-size-dot-small - @switch-size-small-gap);
    }
  }
}


/********** Switch end ***************/
    


/********** Table  ***************/

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@table-prefix-cls: ~'@{prefix}-table';

.@{table-prefix-cls} {
  &-filters-popup {
    min-width: @table-popup-min-width;
    background: @table-color-bg-filters-popup;
    box-shadow: @shadow1-down;
    border: 1px solid @table-color-border-filters-popup;
    border-radius: @table-popup-border-radius;
    box-sizing: border-box;
  }

  &-filters-list {
    max-height: @table-popup-max-height;
    overflow-y: auto;
    padding: 4px 0;
  }

  &-filters-item {
    width: 100%;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    overflow: hidden;

    .@{prefix}-checkbox,
    .@{prefix}-radio {
      width: 100%;
      padding: 0 12px;
      white-space: nowrap;
    }
  }

  &-filters-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid @table-color-border;
    padding: 0 12px;
    height: 38px;
    line-height: 38px;
    box-sizing: border-box;
    overflow: hidden;
  }
}



@table-size-default-padding-horizontal: @spacing-7;
@table-size-default-padding-vertical: 9px;
@table-size-middle-padding-horizontal: @spacing-7;
@table-size-middle-padding-vertical: 7px;
@table-size-small-padding-horizontal: @spacing-7;
@table-size-small-padding-vertical: 5px;
@table-size-mini-padding-horizontal: @spacing-7;
@table-size-mini-padding-vertical: 2px;

@table-size-default-font-size: @font-size-body-3;
@table-size-middle-font-size: @font-size-body-3;
@table-size-small-font-size: @font-size-body-3;
@table-size-mini-font-size: @font-size-body-1;

@table-size-default-font-header-size: @font-size-body-3;
@table-size-middle-font-header-size: @font-size-body-3;
@table-size-small-font-header-size: @font-size-body-3;
@table-size-mini-font-header-size: @font-size-body-1;

@table-border-width: @border-1;
@table-border-style: solid;

@table-size-expand-button: 14px;
@table-spacing-expand-button-margin-right: @spacing-2;
@table-font-size-expand-button: 12px;
@table-border-radius-expand-button: 2px;

@table-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@table-border-radius: @radius-medium;

@table-color-text-header-cell: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));
@table-color-bg-header-cell: var(~'@{arco-cssvars-prefix}-color-neutral-2');
@table-color-bg-header-sorted-cell: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@table-color-bg-header-sorted-cell_hover: rgba(var(~'@{arco-cssvars-prefix}-gray-4'), 0.5);
@table-color-header-filters-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@table-color-header-filters-icon_active: @color-primary-6;
@table-color-bg-header-filters-icon_hover: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@table-font-size-filters-icon: 16px;
@table-size-filters-width: 24px;
@table-font-weight-header-text: @font-weight-500;

@table-color-text-body-cell: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));
@table-color-bg-body-cell: var(~'@{arco-cssvars-prefix}-color-bg-2');
@table-color-bg-body-sorted-cell: var(~'@{arco-cssvars-prefix}-color-fill-1');
@table-color-bg-body-stripe-row: var(~'@{arco-cssvars-prefix}-color-fill-1');
@table-color-bg-body-stripe-row_dark: var(~'@{arco-cssvars-prefix}-color-bg-3');
@table-color-bg-body-row_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
@table-color-bg-body-row_active: var(~'@{arco-cssvars-prefix}-color-fill-1');

@table-color-expand-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@table-color-expand-icon-border: @color-transparent;
@table-color-expand-icon-border_hover: @color-transparent;
@table-color-expand-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@table-color-bg-expand-icon: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@table-color-bg-expand-icon_hover: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@table-color-bg-expand-content: var(~'@{arco-cssvars-prefix}-color-fill-1');
@table-color-bg-expand-content_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
@table-border-expand-icon-width: @border-1;
@table-spacing-header-sorter-icon-margin-left: @spacing-4;

@table-color-header-sorter-icon: var(~'@{arco-cssvars-prefix}-color-neutral-5');
@table-color-header-sorter-icon_next: var(~'@{arco-cssvars-prefix}-color-neutral-6');
@table-color-header-sorter-icon_active: @color-primary-6;
@table-spacing-header-sorter-icon-margin-left: @spacing-4;
@table-size-header-sorter-icon-height: 8px;
@table-font-size-header-sorter-icon: 12px;
@table-position-header-sorter-icon-up-top: -2px;
@table-position-header-sorter-icon-down-top: -3px;

// Popup
@table-color-bg-filters-popup: var(~'@{arco-cssvars-prefix}-color-bg-5');
@table-color-border-filters-popup: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@table-popup-min-width: 100px;
@table-popup-max-height: 200px;
@table-popup-border-radius: @radius-medium;

// box shadow
@table-shadow-left: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15);
@table-shadow-right: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
@table-size-shadow-wrapper-width: 10px;

// editable row
@table-color-editable-body-cell-border: var(~'@{arco-cssvars-prefix}-color-white');

// pagination
@table-spacing-pagination-margin: @spacing-6;

// selection
@table-size-selection-col-width: 40px;

@table-size-expand-icon-col-width: 40px;
@table-color-body-background: var(~'@{arco-cssvars-prefix}-color-bg-2');

@table-color-bg-tfoot: var(~'@{arco-cssvars-prefix}-color-neutral-2');


@table-prefix-cls: ~'@{prefix}-table';

@table-cls-tr: ~'@{table-prefix-cls}-tr';
@table-cls-th: ~'@{table-prefix-cls}-th';
@table-cls-td: ~'@{table-prefix-cls}-td';

.expandBtn() {
  width: @table-size-expand-button;
  height: @table-size-expand-button;
  line-height: @table-size-expand-button;
  border-radius: @table-border-radius-expand-button;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: @table-color-bg-expand-icon;
  color: @table-color-expand-icon;
  font-size: @table-font-size-expand-button;
  outline: none;
  transition: background-color @transition-duration-1 @transition-timing-function-linear;
  padding: 0;
  cursor: pointer;
  border: @table-border-expand-icon-width solid @table-color-expand-icon-border;
  box-sizing: border-box;

  &:hover {
    background-color: @table-color-bg-expand-icon_hover;
    color: @table-color-expand-icon_hover;
    border-color: @table-color-expand-icon-border_hover;
  }
}

.table-size(@size) {
  .@{table-prefix-cls}-th-item {
    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
  }

  // https://github.com/arco-design/arco-design/issues/132
  .@{table-prefix-cls}-th-item.@{table-prefix-cls}-col-has-filter {
    padding-right: 28px;
  }

  .@{table-prefix-cls}-col-has-sorter.@{table-prefix-cls}-col-has-filter {
    padding-right: 0;
  }

  .@{table-prefix-cls}-col-has-sorter.@{table-prefix-cls}-col-has-filter
    .@{table-prefix-cls}-cell-with-sorter {
    padding-right: 28px;
  }

  .@{table-prefix-cls}-col-has-sorter {
    padding: 0;
  }

  .@{table-prefix-cls}-col-has-sorter .@{table-prefix-cls}-cell-with-sorter {
    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
    cursor: pointer;
  }

  // rtl
  .@{table-prefix-cls}-rtl .@{table-prefix-cls}-th-item.@{table-prefix-cls}-col-has-filter {
    padding-left: 28px;
    padding-right: ~'@{table-size-@{size}-padding-horizontal}';
  }

  .@{table-prefix-cls}-rtl .@{table-prefix-cls}-col-has-sorter.@{table-prefix-cls}-col-has-filter {
    padding-left: 0;
    padding-right: 0;
  }

  .@{table-prefix-cls}-rtl
    .@{table-prefix-cls}-col-has-sorter.@{table-prefix-cls}-col-has-filter
    .@{table-prefix-cls}-cell-with-sorter {
    padding-right: 0;
    padding-right: ~'@{table-size-@{size}-padding-horizontal}';
  }
  // rtl end

  .@{table-cls-td} {
    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
    font-size: ~'@{table-size-@{size}-font-size}';
  }

  .@{table-cls-th} {
    font-size: ~'@{table-size-@{size}-font-header-size}';
  }

  .@{table-prefix-cls}-footer {
    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
  }

  // expand row in fixed
  .@{table-prefix-cls}-expand-fixed-row {
    margin: ~'-@{table-size-@{size}-padding-vertical}' ~'calc(-@{table-size-@{size}-padding-horizontal} - @{table-border-width})';
    padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
  }

  // sub table
  .@{table-prefix-cls}-expand-content .@{table-cls-td} .@{table-prefix-cls} {
    margin: ~'-@{table-size-@{size}-padding-vertical}' ~'-@{table-size-@{size}-padding-horizontal}'
      ~'calc(-@{table-size-@{size}-padding-vertical} - @{table-border-width})' ~'-@{table-size-@{size}-padding-horizontal}';
  }

  // editor row
  .@{table-prefix-cls}-editable-row {
    .@{table-prefix-cls}-cell-wrap-value {
      padding: ~'@{table-size-@{size}-padding-vertical}' ~'@{table-size-@{size}-padding-horizontal}';
    }
  }
}

// Size
.table-size(default);

.@{table-prefix-cls}-size-middle {
  .table-size(middle);
}

.@{table-prefix-cls}-size-small {
  .table-size(small);
}

.@{table-prefix-cls}-size-mini {
  .table-size(mini);
}

.@{table-prefix-cls} {
  position: relative;

  // spin
  .@{prefix}-spin {
    display: block;
  }

  > .@{prefix}-spin > .@{prefix}-spin-children::after {
    z-index: 2;
  }

  // footer
  &-footer {
    border-radius: 0 0 @table-border-radius @table-border-radius;
  }

  // box-shadow of the fixed column on the left
  &-scroll-position-right &-col-fixed-left-last::after,
  &-scroll-position-middle &-col-fixed-left-last::after {
    box-shadow: @table-shadow-left;
  }

  // box-shadow of the fixed column on the right
  &-scroll-position-left &-col-fixed-right-first::after,
  &-scroll-position-middle &-col-fixed-right-first::after {
    box-shadow: @table-shadow-right;
  }

  // box-shadow on the left side of the scroll table
  &:not(&-has-fixed-col-left) {
    &.@{table-prefix-cls}-scroll-position-right,
    &.@{table-prefix-cls}-scroll-position-middle {
      .@{table-prefix-cls}-content-scroll::before {
        box-shadow: @table-shadow-left;
      }
    }
  }

  // box-shadow on the right side of the scroll table
  &:not(&-has-fixed-col-right) {
    &.@{table-prefix-cls}-scroll-position-left,
    &.@{table-prefix-cls}-scroll-position-middle {
      .@{table-prefix-cls}-content-scroll::after {
        box-shadow: @table-shadow-right;
      }
    }
  }

  &-layout-fixed {
    .@{table-prefix-cls}-content-inner {
      overflow-x: auto;
      overflow-y: hidden;
    }

    table {
      table-layout: fixed;
    }
  }

  thead > &-tr > &-th {
    border-bottom: @table-border-width @table-border-style @table-color-border;
  }

  thead > &-tr:not(:last-child) > &-th[colspan] {
    border-bottom: 0;
  }

  table {
    min-width: 100%;
    width: 100%;
    margin: 0;
    border-spacing: 0;
    border-collapse: separate;

    thead tr:first-child {
      th:first-child {
        border-radius: @table-border-radius 0 0 0;
      }

      th:last-child {
        border-radius: 0 @table-border-radius 0 0;
      }
    }
  }

  &-th {
    box-sizing: border-box;
    text-align: left;
    color: @table-color-text-header-cell;
    background-color: @table-color-bg-header-cell;
    line-height: @line-height-base;
    font-weight: @table-font-weight-header-text;

    &[colspan] {
      text-align: center;
    }
  }

  &-td {
    box-sizing: border-box;
    text-align: left;
    color: @table-color-text-body-cell;
    background-color: @table-color-bg-body-cell;
    border-bottom: @table-border-width @table-border-style @table-color-border;
    line-height: @line-height-base;
  }

  &-th&-col-sorted {
    background-color: @table-color-bg-header-sorted-cell;
  }

  &-td&-col-sorted {
    background-color: @table-color-bg-body-sorted-cell;
  }

  &-col-fixed-left,
  &-col-fixed-right {
    position: sticky;
    z-index: 1;
  }

  &-col-fixed-left-last::after,
  &-col-fixed-right-first::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: -@table-border-width;
    width: @table-size-shadow-wrapper-width;
    pointer-events: none;
    transform: translateX(-100%);
    transition: box-shadow @transition-duration-1 @transition-timing-function-linear;
    box-shadow: none;
  }

  &-col-fixed-left-last::after {
    left: unset;
    transform: translateX(100%);
    right: 0;
  }

  &-cell-text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &-cell-text-ellipsis &-cell-with-sorter {
    display: flex;
    align-items: center;
  }

  &-cell-text-ellipsis &-th-item-title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  // useless
  &-editable-row {
    .@{table-prefix-cls}-cell-wrap-value {
      border: @table-border-width solid @table-color-editable-body-cell-border;
      border-radius: @table-border-radius;
      transition: all @transition-duration-1 @transition-timing-function-linear;
      cursor: pointer;
    }

    &:hover {
      .@{table-prefix-cls}-cell-wrap-value {
        border: @table-border-width solid @table-color-border;
      }
    }
  }

  &-cell {
    word-break: break-all;
    width: 100%;

    &:has(> &-indent)::after {
      content: '';
      display: block;
      clear: both;
    }

    &-indent {
      height: 1px;
      float: left;
      + .@{table-prefix-cls}-cell-wrap-value {
        float: left;
      }
    }
  }

  // Expand
  &-expand-icon-cell {
    button {
      .expandBtn();
    }
  }

  // make sure expanded-icon is horizontal-center while using div as td
  div&-expand-icon-cell {
    justify-content: center;
  }

  &-cell-expand-icon {
    // https://github.com/arco-design/arco-design/issues/298
    float: left;

    button {
      .expandBtn();

      margin-right: @table-spacing-expand-button-margin-right;
    }
  }

  &-cell-expand-icon-hidden {
    display: inline-block;
    width: @table-size-expand-button;
    height: @table-size-expand-button;
    margin-right: @table-spacing-expand-button-margin-right;
  }

  &-expand-content .@{table-cls-td} {
    background-color: @table-color-bg-expand-content;
  }

  &-expand-fixed-row {
    position: sticky;
    left: 0;
    box-sizing: border-box;
  }

  &-expand-content .@{table-cls-td} & {
    .@{table-prefix-cls}-container {
      border: none;
    }

    .@{table-cls-th} {
      border-bottom: @table-border-width @table-border-style @table-color-border;
    }

    .@{table-cls-th},
    .@{table-cls-td} {
      background-color: @table-color-bg-expand-content;
    }

    .@{table-prefix-cls}-pagination {
      margin-bottom: @table-spacing-pagination-margin;
    }
  }

  // Selection
  // & &-th&-operation &-th-item,
  // & &-td&-operation {
  //   padding-left: @table-spacing-selection-padding-horizontal;
  //   padding-right: @table-spacing-selection-padding-horizontal;
  // }

  &-th&-operation &-th-item,
  &-td&-operation {
    text-align: center;
    padding: 0;
  }

  &-radio,
  &-checkbox {
    justify-content: center;
  }

  &-checkbox .@{prefix}-checkbox,
  &-radio .@{prefix}-radio {
    padding-left: 0;
  }

  // colgroup selection
  &-selection-col {
    width: @table-size-selection-col-width;
  }

  &-expand-icon-col {
    width: @table-size-expand-icon-col-width;
  }

  &-radio &-th-item,
  &-checkbox &-th-item,
  div&-selection-col &-th-item,
  div&-expand-icon-col &-th-item {
    padding: 0;
  }

  &-th-item {
    position: relative;
    transition: background-color @transition-duration-1 @transition-timing-function-linear;
  }

  &-cell-mouseenter {
    background-color: @table-color-bg-header-sorted-cell_hover;
  }

  &-cell-next-ascend &-sorter-icon {
    .@{prefix}-icon-caret-up {
      color: @table-color-header-sorter-icon_next;
    }
  }

  &-cell-next-descend &-sorter-icon {
    .@{prefix}-icon-caret-down {
      color: @table-color-header-sorter-icon_next;
    }
  }

  &-sorter {
    display: inline-block;
    margin-left: @table-spacing-header-sorter-icon-margin-left;
    vertical-align: -3px;
  }

  &-sorter&-sorter-direction-one {
    vertical-align: 0;
  }

  &-sorter-icon {
    position: relative;
    height: @table-size-header-sorter-icon-height;
    line-height: @table-size-header-sorter-icon-height;
    width: @table-font-size-header-sorter-icon;
    overflow: hidden;

    .@{prefix}-icon-caret-up,
    .@{prefix}-icon-caret-down {
      position: absolute;
      top: 50%;
      font-size: @table-font-size-header-sorter-icon;
      color: @table-color-header-sorter-icon;
      transition: all @transition-duration-1 @transition-timing-function-linear;
    }

    .@{prefix}-icon-caret-up {
      top: @table-position-header-sorter-icon-up-top;
      left: 0;
    }

    .@{prefix}-icon-caret-down {
      top: @table-position-header-sorter-icon-down-top;
      left: 0;
    }

    &&-active {
      svg {
        color: @table-color-header-sorter-icon_active;
      }
    }
  }

  &-filters {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
    width: @table-size-filters-width;
    height: 100%;
    background-color: transparent;
    line-height: 1;
    vertical-align: 0;
    cursor: pointer;
    transition: all @transition-duration-1 @transition-timing-function-linear;

    &:hover,
    &-open {
      background-color: @table-color-bg-header-filters-icon_hover;
    }

    svg {
      color: @table-color-header-filters-icon;
      font-size: @table-font-size-filters-icon;
      transition: all @transition-duration-1 @transition-timing-function-linear;
    }

    &-active {
      svg {
        color: @table-color-header-filters-icon_active;
      }
    }
  }

  /* ---- Table sorter, filter, checkbox, radio (End) ---- */

  &-container {
    position: relative;
    border-radius: @table-border-radius @table-border-radius 0 0;
  }

  &-header {
    border-radius: @table-border-radius @table-border-radius 0 0;
  }

  &-content-scroll {
    width: 100%;
    overflow: hidden;
    // chrome not fluent: https://codepen.io/quanqqq/pen/BaLpEQd?editors=0010
    // border-radius: @table-border-radius @table-border-radius 0 0 0;

    .@{table-prefix-cls}-content-inner {
      width: auto;
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: -@table-border-width;
      bottom: -@table-border-width;
      height: 100%;
      width: @table-size-shadow-wrapper-width;
      transition: box-shadow @transition-duration-1 @transition-timing-function-linear;
      box-shadow: none;
      pointer-events: none;
      z-index: 1;
    }

    &::before {
      border-top-left-radius: @table-border-radius;
      left: 0;
    }

    &::after {
      border-top-right-radius: @table-border-radius;
      right: 0;
    }
  }

  &-header {
    scrollbar-color: inherit;
    background-color: @table-color-bg-header-cell;

    &::-webkit-scrollbar {
      background-color: transparent;
    }

    overflow-x: scroll;
    overflow-y: hidden;
  }

  &-body {
    position: relative;
    overflow: auto;
    background-color: @table-color-body-background;
    z-index: 1;
  }

  &-no-data {
    padding: 20px;
    line-height: 40px;
    box-sizing: border-box;
    font-size: 14px;
    text-align: center;
  }

  &-border&-fixed-column &-empty-row &-td:first-child {
    border-bottom: 0;
    border-left: 0;
  }

  &-border {
    .@{table-prefix-cls}-container {
      border-right: @table-border-width @table-border-style @table-color-border;
      border-top: @table-border-width @table-border-style @table-color-border;

      &::before {
        content: '';
        position: absolute;
        background-color: @table-color-border;
        width: 100%;
        height: @table-border-width;
        left: 0;
        bottom: 0;
        z-index: 2;
      }
    }

    .@{table-cls-th}:first-child,
    .@{table-cls-td}:first-child {
      border-left: @table-border-width @table-border-style @table-color-border;
    }

    .@{table-prefix-cls}-expand-fixed-row {
      border-left: @table-border-width @table-border-style @table-color-border;
    }

    .@{table-prefix-cls}-footer {
      border: @table-border-width @table-border-style @table-color-border;
      border-top: 0;
    }
  }

  &-border-cell {
    .@{table-cls-th},
    .@{table-cls-td} {
      border-left: @table-border-width @table-border-style @table-color-border;
    }

    thead > .@{table-cls-tr}:not(:last-child) > .@{table-cls-th}[colspan] {
      border-bottom: @table-border-width @table-border-style @table-color-border;
    }
  }

  &-border-header-cell {
    .@{table-cls-th} {
      border-left: @table-border-width @table-border-style @table-color-border;
    }

    thead > .@{table-cls-tr}:not(:last-child) > .@{table-cls-th}[colspan] {
      border-bottom: @table-border-width @table-border-style @table-color-border;
    }
  }

  &-border-body-cell {
    .@{table-cls-td} {
      border-left: @table-border-width @table-border-style @table-color-border;
    }
  }

  &-border-cell:not(&-border) {
    .@{table-cls-th}:first-child,
    .@{table-cls-td}:first-child {
      border-left: 0;
    }
  }

  // stripe: true
  &-stripe {
    .@{table-cls-tr}:nth-child(even) .@{table-cls-td} {
      background-color: @table-color-bg-body-stripe-row;
    }
  }

  &-hover {
    .@{table-cls-tr}:not(.@{table-prefix-cls}-empty-row):hover {
      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
        background-color: @table-color-bg-body-row_hover;
      }

      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
      .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: @table-color-bg-body-row_hover;
          z-index: -1;
        }
      }
    }

    // 展开行的hover效果
    .@{table-prefix-cls}-expand-content:not(.@{table-prefix-cls}-empty-row):hover
      .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
      background-color: @table-color-bg-expand-content_hover;
    }

    // 去除嵌套子表格的 hover 效果
    .@{table-prefix-cls}-expand-content .@{table-cls-td} & {
      .@{table-cls-tr}:not(.@{table-prefix-cls}-empty-row) {
        .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
          background-color: transparent;
        }

        .@{table-cls-td}.@{table-prefix-cls}-col-fixed-left,
        .@{table-cls-td}.@{table-prefix-cls}-col-fixed-right {
          &::before {
            background-color: transparent;
          }
        }
      }
    }
  }

  // Active row
  &-type-radio &-row-checked.@{table-cls-tr} .@{table-cls-td} {
    background-color: @table-color-bg-body-row_active;
  }

  // virtualized
  &-virtualized table {
    table-layout: fixed;
  }

  &-virtualized div&-body div&-tr {
    display: flex;
  }

  &-virtualized div&-body div&-td {
    display: flex;
    align-items: center;
    flex: 1;
  }

  // https://github.com/arco-design/arco-design/issues/695
  &-virtualized &-selection-col {
    max-width: @table-size-selection-col-width;
  }

  &-virtualized &-expand-icon-col {
    max-width: @table-size-expand-icon-col-width;
  }

  // summary
  div&-tfoot {
    width: 100%;
    overflow-x: scroll;
    background-color: @table-color-bg-tfoot;
    scrollbar-color: inherit;
    position: relative;
    z-index: 1;
    box-shadow: 0 -@table-border-width 0 @table-color-border;

    &::-webkit-scrollbar {
      background-color: transparent;
    }
  }

  &-tfoot &-td {
    background-color: @table-color-bg-tfoot;
  }
}

.@{table-prefix-cls}-pagination {
  display: flex;
  justify-content: flex-end;

  &-left {
    justify-content: flex-start;
  }

  &-center {
    justify-content: center;
  }

  &-top {
    margin-bottom: @table-spacing-pagination-margin;
    margin-top: 0;
  }

  .@{prefix}-pagination {
    margin-top: @table-spacing-pagination-margin;
  }
}

// RTL
.@{table-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-rtl&-border {
    .@{table-cls-th}:first-child,
    .@{table-cls-td}:first-child {
      border-left: 0;
      border-right: @table-border-width @table-border-style @table-color-border;
    }
  }

  &-rtl&-border-cell {
    .@{table-cls-th},
    .@{table-cls-td} {
      border-left: @table-border-width @table-border-style @table-color-border;
    }
  }

  &-rtl table {
    thead tr:first-child {
      th:first-child {
        border-radius: 0 @table-border-radius 0 0;
      }

      th:last-child {
        border-radius: @table-border-radius 0 0 0;
      }
    }
  }

  &-rtl &-th,
  &-rtl &-td {
    text-align: right;
  }

  &-rtl &-th&-operation &-th-item,
  &-rtl &-td&-operation {
    text-align: center;
  }

  &-rtl&-border &-container {
    border-left: @table-border-width @table-border-style @table-color-border;
    border-right: 0;
  }

  &-rtl&-border-cell {
    .@{table-cls-th},
    .@{table-cls-td} {
      border-left: 0;
      border-right: @table-border-width @table-border-style @table-color-border;
    }
  }

  &-rtl&-border-header-cell {
    .@{table-cls-th} {
      border-left: 0;
      border-right: @table-border-width @table-border-style @table-color-border;
    }
  }

  &-rtl&-border-body-cell {
    .@{table-cls-td} {
      border-left: 0;
      border-right: @table-border-width @table-border-style @table-color-border;
    }
  }

  &-rtl&-border-cell:not(&-border) {
    .@{table-cls-th}:first-child,
    .@{table-cls-td}:first-child {
      border-right: 0;
    }
  }

  &-rtl &-cell-indent {
    float: right;
  }

  &-rtl &-cell-expand-icon {
    float: right;

    button {
      margin-left: @table-spacing-expand-button-margin-right;
      margin-right: 0;
    }
  }

  &-rtl &-cell-expand-icon-hidden {
    margin-left: @table-spacing-expand-button-margin-right;
    margin-right: 0;
  }

  &-rtl &-filters {
    left: 0;
    right: unset;
  }

  &-rtl &-sorter {
    margin-left: 0;
    margin-right: @table-spacing-header-sorter-icon-margin-left;
  }

  &-rtl &-col-fixed-left-last::after,
  &-rtl &-col-fixed-right-first::after {
    left: unset;
    right: -20px;
  }

  &-rtl &-col-fixed-left-last::after {
    left: -20px;
    right: unset;
  }

  &-rtl&-scroll-position-right &-col-fixed-left-last::after {
    box-shadow: none;
  }

  &-rtl&-scroll-position-right &-col-fixed-right-first::after,
  &-rtl&-scroll-position-middle &-col-fixed-right-first::after {
    box-shadow: @table-shadow-left;
  }

  &-rtl&-scroll-position-left &-col-fixed-right-first::after {
    box-shadow: none;
  }

  &-rtl&-scroll-position-left &-col-fixed-left-last::after,
  &-rtl&-scroll-position-middle &-col-fixed-left-last::after {
    box-shadow: @table-shadow-right;
  }

  &-rtl&:not(&-has-fixed-col-left) {
    &.@{table-prefix-cls}-scroll-position-right,
    &.@{table-prefix-cls}-scroll-position-middle {
      .@{table-prefix-cls}-content-scroll::before {
        box-shadow: none;
      }
      .@{table-prefix-cls}-content-scroll::after {
        box-shadow: @table-shadow-right;
      }
    }
  }

  &-rtl&:not(&-has-fixed-col-right) {
    &.@{table-prefix-cls}-scroll-position-left,
    &.@{table-prefix-cls}-scroll-position-middle {
      .@{table-prefix-cls}-content-scroll::before {
        box-shadow: @table-shadow-left;
      }
      .@{table-prefix-cls}-content-scroll::after {
        box-shadow: none;
      }
    }
  }

  @{arco-theme-tag}[arco-theme='dark'] &-stripe {
    .@{table-cls-tr}:nth-child(even) .@{table-cls-td} {
      background-color: @table-color-bg-body-stripe-row_dark;
    }

    // .@{table-cls-tr}:not(.@{table-prefix-cls}-empty-row):hover .@{table-cls-td}:not(.@{table-prefix-cls}-col-fixed-left):not(.@{table-prefix-cls}-col-fixed-right) {
    //   background-color: @table-color-bg-body-stripe-row_dark;
    // }
  }
}


/********** Table end ***************/
    


/********** Tabs  ***************/



@tabs-size-mini-font-size: @font-size-body-1;
@tabs-size-small-font-size: @font-size-body-3;
@tabs-size-default-font-size: @font-size-body-3;
@tabs-size-large-font-size: @font-size-body-3;

@tabs-size-mini-font-size_card: @font-size-body-1;
@tabs-size-small-font-size_card: @font-size-body-3;
@tabs-size-default-font-size_card: @font-size-body-3;
@tabs-size-large-font-size_card: @font-size-body-3;

@tabs-size-default-font-size_text: @font-size-body-3;

@tabs-size-mini-font-size_rounded: @font-size-body-1;
@tabs-size-small-font-size_rounded: @font-size-body-3;
@tabs-size-default-font-size_rounded: @font-size-body-3;
@tabs-size-large-font-size_rounded: @font-size-body-3;

@tabs-size-mini-font-size_capsule: @font-size-body-1;
@tabs-size-small-font-size_capsule: @font-size-body-3;
@tabs-size-default-font-size_capsule: @font-size-body-3;
@tabs-size-large-font-size_capsule: @font-size-body-3;

@tabs-size-mini-header-height_line: @size-8;
@tabs-size-small-header-height_line: @size-9;
@tabs-size-default-header-height_line: @size-10;
@tabs-size-large-header-height_line: @size-11;

@tabs-size-mini-header-height: @size-6;
@tabs-size-small-header-height: @size-7;
@tabs-size-default-header-height: @size-8;
@tabs-size-large-header-height: @size-9;

@tabs-size-mini-header-height_capsule: @size-6;
@tabs-size-small-header-height_capsule: @size-7;
@tabs-size-default-header-height_capsule: @size-8;
@tabs-size-large-header-height_capsule: @size-9;

@tabs-size-default-header-height_text: @size-8;

@tabs-size-mini-header-height_rounded: @size-6;
@tabs-size-small-header-height_rounded: @size-7;
@tabs-size-default-header-height_rounded: @size-8;
@tabs-size-large-header-height_rounded: @size-9;

@tabs-padding-title-text-vertical: 1px;
@tabs-padding-title-text-horizontal: @spacing-4;

@tabs-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@tabs-color-title-text_active: @color-primary-6;
@tabs-color-title-text_hover: @tabs-color-title-text;
@tabs-color-title-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@tabs-color-title-text_disabled_active: var(~'@{arco-cssvars-prefix}-color-primary-light-3');

@tabs-line-size-header-border: @border-1;
@tabs-line-color-header-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@tabs-line-size-ink-stroke: 2px;
@tabs-line-color-ink-bg: @color-primary-6;
@tabs-line-color-ink-bg_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@tabs-line-font-title-text-weight_active: @font-weight-500;
@tabs-line-margin-title-horizontal: @spacing-10;
@tabs-line-margin-title-horizontal_first: @spacing-7;
@tabs-line-margin-title-vertical: @spacing-6;
@tabs-line-padding-title-horizontal_vertical: @spacing-8;
@tabs-line-color-title-bg: @color-transparent;
@tabs-line-color-title-bg_active: @color-transparent;
@tabs-line-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');

@tabs-line-font-title-text-weight_hover: @font-weight-400;
@tabs-line-border-radius: @radius-small;

@tabs-card-border-width: @border-1;
@tabs-card-color-title-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@tabs-card-padding-title-horizontal: @spacing-7;
@tabs-card-padding-title-right_editable: @spacing-6;
@tabs-card-border-radius: @radius-small;
@tabs-card-color-title-bg: @color-transparent;
@tabs-card-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@tabs-card-color-title-bg_disabled: @tabs-card-color-title-bg;
@tabs-card-color-title-bg_active: @color-transparent;
@tabs-card-border-content-width: @border-1;

@tabs-card-gutter-spacing-horizontal: @spacing-2;
@tabs-card-gutter-color-title-bg: var(~'@{arco-cssvars-prefix}-color-fill-1');
@tabs-card-gutter-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@tabs-card-gutter-color-title-bg_active: @color-transparent;
@tabs-card-gutter-color-title-bg_disabled: @tabs-card-gutter-color-title-bg;

@tabs-text-size-separator-height: @size-3;
@tabs-text-size-separator-width: 2px;
@tabs-text-color-separator-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');
@tabs-text-margin-title-horizontal: @spacing-4;
@tabs-text-color-title-bg: @color-transparent;
@tabs-text-color-title-bg_active: @color-transparent;
@tabs-text-color-title-bg_disabled: @color-transparent;
@tabs-text-color-title-bg_disabled_active: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@tabs-text-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');

@tabs-rounded-padding-title-horizontal: @spacing-7;
@tabs-rounded-margin-title-horizontal: @spacing-6;
@tabs-rounded-color-title-bg: @color-transparent;
@tabs-rounded-color-title-bg_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
@tabs-rounded-color-title-bg_disabled: @color-transparent;
@tabs-rounded-color-title-bg_hover: @tabs-rounded-color-title-bg_active;

@tabs-capsule-color-header-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@tabs-capsule-margin-title-horizontal: 3px;
@tabs-capsule-padding-title-horizontal: @spacing-6;
@tabs-capsule-padding-header-vertical: 3px;
@tabs-capsule-padding-header-horizontal: 3px;
@tabs-capsule-border-header-radius: @radius-small;
@tabs-capsule-border-title-radius: @radius-small;

@tabs-capsule-color-title-bg: @color-transparent;
@tabs-capsule-color-title-bg_active: var(~'@{arco-cssvars-prefix}-color-bg-2');
@tabs-capsule-color-title-bg_hover: @tabs-capsule-color-title-bg_active;
@tabs-capsule-size-separator-width: 1px;
@tabs-capsule-size-separator-height: 14px;
@tabs-capsule-color-separator-bg: var(~'@{arco-cssvars-prefix}-color-fill-3');

@tabs-margin-close-icon-left: @spacing-4;
@tabs-size-icon: @size-3;
@tabs-size-icon-bg: @size-4;
@tabs-card-color-close-icon-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');
@tabs-margin-add-icon-left: @spacing-4;
@tabs-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@tabs-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@tabs-spacing-nav-icon-header: @spacing-3;
@tabs-padding-header-wrapper-horizontal: @spacing-5;
@tabs-padding-header-wrapper-vertical: @spacing-3;

@tabs-content-padding: @spacing-7;

// focus shadow
@tabs-box-shadow-radius: 2px;
@tabs-color-box-shadow: var(~'@{arco-cssvars-prefix}-color-primary-light-3');

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


@tabs-prefix-cls: ~'@{prefix}-tabs';

.get-title-padding(@header-height, @font-size, @padding-vertical ) {
  @result: max(
    0,
    round((@header-height / 2) - @line-height-base * (@font-size / 2) - @padding-vertical)
  );
}

.tabs-focus-visible-style() {
  box-shadow: inset 0 0 0 @tabs-box-shadow-radius @tabs-color-box-shadow;
}

.tabs-icon-focus-visible-style() {
  box-shadow: 0 0 0 @tabs-box-shadow-radius @tabs-color-box-shadow;
}

// tabs icon style
.icon-hover(@tabs-prefix-cls, @tabs-size-icon, @tabs-size-icon-bg);

.@{tabs-prefix-cls} {
  & &-icon-hover {
    font-size: @tabs-size-icon;
    color: @tabs-color-icon;
    user-select: none;
  }

  &-dropdown-icon {
    font-size: @tabs-size-icon;
    margin-left: @tabs-spacing-nav-icon-header;
    user-select: none;
  }

  &-close-icon {
    margin-left: @tabs-margin-close-icon-left;
    user-select: none;

    &:focus-visible .@{prefix}-icon-hover::before {
      .tabs-icon-focus-visible-style();
    }
  }

  &-add-icon {
    font-size: @tabs-size-icon;
    display: inline-flex;
    align-items: center;
    user-select: none;
    justify-content: center;
    padding: 0 @tabs-margin-add-icon-left;

    &:focus-visible .@{prefix}-icon-hover::before {
      .tabs-icon-focus-visible-style();
    }
  }

  &-add {
    position: relative;
  }

  &-left-icon {
    margin-left: @tabs-padding-header-wrapper-horizontal;
    margin-right: @tabs-spacing-nav-icon-header;
  }

  &-right-icon {
    margin-right: @tabs-padding-header-wrapper-horizontal;
    margin-left: @tabs-spacing-nav-icon-header;
  }

  &-up-icon {
    margin-bottom: @tabs-padding-header-wrapper-horizontal;
  }

  &-down-icon {
    margin-top: @tabs-padding-header-wrapper-horizontal;
  }

  & &-nav-icon-disabled {
    cursor: not-allowed;
    color: @tabs-color-icon_disabled;
  }
}

.@{tabs-prefix-cls} {
  position: relative;
  overflow: hidden;

  &-header-nav {
    position: relative;

    &::before {
      content: '';
      clear: both;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: @tabs-line-size-header-border;
      background-color: @tabs-line-color-header-border;
      display: block;
    }

    &-bottom {
      &::before {
        top: 0;
      }

      .@{tabs-prefix-cls}-header {
        &-ink {
          top: 0;

          .@{tabs-prefix-cls}-header-ink-inner {
            bottom: unset;
            top: 0;
          }
        }
      }
    }
  }

  &-header-wrapper {
    display: flex;
    overflow: hidden;
    flex: 1;
  }

  &-header {
    position: relative;
    display: inline-block;
    transition: transform @transition-duration-2 @transition-timing-function-standard;
    white-space: nowrap;

    &-extra {
      width: auto;
      display: flex;
      align-items: center;
      line-height: @tabs-size-default-header-height;
      flex-shrink: 0;

      .@{tabs-prefix-cls}-add-icon {
        padding-left: 0;
      }
    }

    &-title {
      box-sizing: border-box;
      font-size: @tabs-size-default-font-size;
      cursor: pointer;
      color: @tabs-color-title-text;
      transition: color @transition-duration-2 @transition-timing-function-linear;
      display: inline-flex;
      align-items: center;
      line-height: 1.5715;
      padding: .get-title-padding(
          @tabs-size-default-header-height,
          @tabs-size-default-font-size,
          @tabs-padding-title-text-vertical
        )
        [] 0;

      &-text {
        display: inline-block;
      }

      &:hover {
        color: @tabs-color-title-text_hover;
        font-weight: @tabs-line-font-title-text-weight_hover;
      }

      &-disabled,
      &-disabled:hover {
        color: @tabs-color-title-text_disabled;
        cursor: not-allowed;
      }

      &-active,
      &-active:hover {
        color: @tabs-color-title-text_active;
        font-weight: @tabs-line-font-title-text-weight_active;

        &.@{tabs-prefix-cls}-header-title-disabled {
          color: @tabs-color-title-text_disabled_active;
        }
      }
    }

    &-ink {
      position: absolute;
      bottom: 0;
      right: initial;
      top: initial;
      height: @tabs-line-size-ink-stroke;
      background-color: @tabs-line-color-ink-bg;
      transition: left @transition-duration-2 @transition-timing-function-standard,
        width @transition-duration-2 @transition-timing-function-standard;

      &.@{tabs-prefix-cls}-header-ink-no-animation {
        transition: none;
      }

      // 自定义 ink
      &.@{tabs-prefix-cls}-header-ink-custom {
        background-color: transparent;

        .@{tabs-prefix-cls}-header-ink-inner {
          background-color: @tabs-line-color-ink-bg;
          position: absolute;
          left: 50%;
          bottom: 0;
          width: 100%;
          height: 100%;
          transform: translateX(-50%);
        }
      }

      &-disabled {
        background-color: @tabs-line-color-ink-bg_disabled;
      }
    }
  }
}
// card card-gutter 类型

.@{tabs-prefix-cls} {
  // type = line
  &-header-nav-line &-header-extra {
    line-height: @tabs-size-default-header-height_line;
  }

  &-header-nav-line &-header-title {
    line-height: 1.5715;
    margin: 0 (@tabs-line-margin-title-horizontal / 2);
    padding: .get-title-padding(
        @tabs-size-default-header-height_line,
        @tabs-size-default-font-size,
        @tabs-padding-title-text-vertical
      )
      [] 0;

    &-text {
      display: inline-block;
      position: relative;
      padding: @tabs-padding-title-text-vertical 0;

      &::before {
        content: '';
        z-index: -1;
        opacity: 1;
        transition: all @transition-duration-2 @transition-timing-function-linear;
        border-radius: @tabs-line-border-radius;
        position: absolute;
        top: 0;
        bottom: 0;
        left: -@tabs-padding-title-text-horizontal;
        right: -@tabs-padding-title-text-horizontal;
        background-color: @tabs-line-color-title-bg;
      }
    }

    &:hover {
      .@{tabs-prefix-cls}-header-title-text::before {
        background-color: @tabs-line-color-title-bg_hover;
      }
    }

    &:focus-visible .@{tabs-prefix-cls}-header-title-text::before {
      .tabs-focus-visible-style();
    }

    &-active,
    &-active:hover {
      .@{tabs-prefix-cls}-header-title-text::before {
        background-color: @tabs-line-color-title-bg_active;
      }
    }

    &-disabled,
    &-disabled:hover {
      .@{tabs-prefix-cls}-header-title-text::before {
        opacity: 0;
      }
    }
  }

  &-header-nav-line&-header-nav-horizontal > &-header-scroll &-header-title:first-of-type {
    margin-left: @tabs-line-margin-title-horizontal_first;
  }

  // headerPadding=false & type === line/text & horizontal
  &-header-nav-line&-header-nav-horizontal &-header-no-padding > &-header-title:first-of-type,
  &-header-nav-text&-header-nav-horizontal &-header-no-padding > &-header-title:first-of-type {
    margin-left: 0;
  }

  // type = card card-gutter
  &-header-nav-card &-header,
  &-header-nav-card-gutter &-header {
    &-title {
      font-size: @tabs-size-default-font-size_card;
      border: @tabs-card-border-width solid @tabs-card-color-title-border;
      transition: padding @transition-duration-2 @transition-timing-function-linear,
        color @transition-duration-2 @transition-timing-function-linear;
      padding: .get-title-padding(
          (@tabs-size-default-header-height - @tabs-card-border-width * 2),
          @tabs-size-default-font-size_card,
          0
        )
        [] @tabs-card-padding-title-horizontal;

      &:focus-visible {
        .tabs-focus-visible-style();
      }
    }

    &-title-editable {
      padding-right: @tabs-card-padding-title-right_editable;
    }

    &-title-editable:not(.@{tabs-prefix-cls}-header-title-active):hover
      .@{prefix}-icon-hover:hover::before {
      background-color: @tabs-card-color-close-icon-bg_hover;
    }
  }

  &-header-nav-card,
  &-header-nav-card-gutter {
    .@{tabs-prefix-cls}-add-icon {
      color: @tabs-color-icon;
      height: @tabs-size-default-header-height;
    }
  }

  &-header-nav-card &-header-title {
    border-right: none;
    background-color: @tabs-card-color-title-bg;

    &:last-child {
      border-right: @tabs-card-border-width solid @tabs-card-color-title-border;
      border-top-right-radius: @tabs-card-border-radius;
    }

    &:first-child {
      border-top-left-radius: @tabs-card-border-radius;
    }

    &:hover {
      background-color: @tabs-card-color-title-bg_hover;
    }

    &-disabled,
    &-disabled:hover {
      background-color: @tabs-card-color-title-bg_disabled;
    }

    &-active,
    &-active:hover {
      border-bottom-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
      background-color: @tabs-card-color-title-bg_active;
    }
  }

  &-header-nav-card&-header-nav-bottom &-header-title {
    &-active,
    &-active:hover {
      border-top-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
      border-bottom-color: @tabs-card-color-title-border;
    }
  }

  &-header-nav-card-gutter &-header-title {
    margin-left: @tabs-card-gutter-spacing-horizontal;
    border-right: @tabs-card-border-width solid @tabs-card-color-title-border;
    background-color: @tabs-card-gutter-color-title-bg;
    border-radius: @tabs-card-border-radius @tabs-card-border-radius 0 0;

    &:hover {
      background-color: @tabs-card-gutter-color-title-bg_hover;
    }

    &-disabled,
    &-disabled:hover {
      background-color: @tabs-card-gutter-color-title-bg_disabled;
    }

    &-active,
    &-active:hover {
      border-bottom-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
      background-color: @tabs-card-gutter-color-title-bg_active;
    }

    &:first-child {
      margin-left: 0;
    }
  }

  &-header-nav-card-gutter&-header-nav-bottom &-header-title {
    &-active,
    &-active:hover {
      border-top-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
      border-bottom-color: @tabs-card-color-title-border;
    }
  }

  // type = text
  &-header-nav-text {
    &::before {
      display: none;
    }

    .@{tabs-prefix-cls}-header-title {
      position: relative;
      line-height: 1.5715;
      margin: 0 (@tabs-text-margin-title-horizontal + (@tabs-text-size-separator-width / 2));
      font-size: @tabs-size-default-font-size_text;
      padding: .get-title-padding(
          @tabs-size-default-header-height_text,
          @tabs-size-default-font-size,
          0
        )
        [] 0;

      &:not(:first-of-type)::before {
        height: @tabs-text-size-separator-height;
        position: absolute;
        width: @tabs-text-size-separator-width;
        background-color: @tabs-text-color-separator-bg;
        content: '';
        display: block;
        top: 50%;
        transform: translateY(-50%);
        left: -(@tabs-text-margin-title-horizontal + (@tabs-text-size-separator-width / 2));
      }

      &-text {
        padding-left: @tabs-text-margin-title-horizontal;
        padding-right: @tabs-text-margin-title-horizontal;
        background-color: @tabs-text-color-title-bg;
      }

      &-text:hover {
        background-color: @tabs-text-color-title-bg_hover;
      }

      &:focus-visible .@{tabs-prefix-cls}-header-title-text {
        .tabs-focus-visible-style();
      }

      &-active {
        .@{tabs-prefix-cls}-header-title-text,
        .@{tabs-prefix-cls}-header-title-text:hover {
          background-color: @tabs-text-color-title-bg_active;
        }
      }

      &-disabled {
        .@{tabs-prefix-cls}-header-title-text,
        .@{tabs-prefix-cls}-header-title-text:hover {
          background-color: @tabs-text-color-title-bg_disabled;
        }
      }

      &-active&-disabled {
        .@{tabs-prefix-cls}-header-title-text,
        .@{tabs-prefix-cls}-header-title-text:hover {
          background-color: @tabs-text-color-title-bg_disabled_active;
        }
      }
    }
  }

  &-header-nav-rounded {
    &::before {
      display: none;
    }

    .@{tabs-prefix-cls}-header-title {
      padding: .get-title-padding(
          @tabs-size-default-header-height_rounded,
          @tabs-size-default-font-size_rounded,
          0
        )
        [] 0;
      padding-left: @tabs-rounded-padding-title-horizontal;
      padding-right: @tabs-rounded-padding-title-horizontal;
      margin: 0 (@tabs-rounded-margin-title-horizontal / 2);
      font-size: @tabs-size-default-font-size_rounded;
      background-color: @tabs-rounded-color-title-bg;
      border-radius: @tabs-size-default-header-height_rounded;

      &:hover {
        background-color: @tabs-rounded-color-title-bg_hover;
      }

      &:focus-visible {
        .tabs-focus-visible-style();
      }

      &-disabled:hover {
        background-color: @tabs-rounded-color-title-bg_disabled;
      }

      &-active,
      &-active:hover {
        background-color: @tabs-rounded-color-title-bg_active;
      }
    }
  }

  &-header-nav-capsule {
    &::before {
      display: none;
    }

    .@{tabs-prefix-cls}-header-wrapper {
      justify-content: flex-end;
    }

    .@{tabs-prefix-cls}-header {
      line-height: 1;
      background-color: @tabs-capsule-color-header-bg;
      border-radius: @tabs-capsule-border-header-radius;
      padding: @tabs-capsule-padding-header-vertical @tabs-capsule-padding-header-horizontal;
    }

    .@{tabs-prefix-cls}-header-title {
      line-height: @tabs-size-default-header-height_capsule - @tabs-capsule-padding-header-vertical *
        2;
      padding: 0 @tabs-capsule-padding-title-horizontal;
      background-color: @tabs-capsule-color-title-bg;
      position: relative;
      font-size: @tabs-size-default-font-size_capsule;
      border-radius: @tabs-capsule-border-title-radius;

      &:focus-visible {
        .tabs-focus-visible-style();
      }

      &:hover {
        background-color: @tabs-capsule-color-title-bg_hover;
      }

      &-disabled:hover {
        background-color: unset;
      }

      &-active,
      &-active:hover {
        background-color: @tabs-capsule-color-title-bg_active;

        &::before,
        & + .@{tabs-prefix-cls}-header-title::before {
          opacity: 0;
        }
      }
    }

    &.@{tabs-prefix-cls}-header-nav-horizontal
      .@{tabs-prefix-cls}-header-title:not(:first-of-type) {
      margin-left: @tabs-capsule-margin-title-horizontal;

      &::before {
        position: absolute;
        top: 50%;
        left: -(@tabs-capsule-margin-title-horizontal / 2) - (@tabs-capsule-size-separator-width / 2);
        transform: translateY(-50%);
        display: block;
        height: @tabs-capsule-size-separator-height;
        width: @tabs-capsule-size-separator-width;
        background-color: @tabs-capsule-color-separator-bg;
        content: '';
        transition: all @transition-duration-2 @transition-timing-function-linear;
      }
    }
  }
}

// .@{tabs-prefix-cls} {
//   /* Horizontal */
//   &-header-nav {
//     position: relative;
//     background: #fff;
//     .@{tabs-prefix-cls}-icon {
//       line-height: @tab-pane-height;
//       font-size: 12px;
//       position: absolute;
//       color: @color--grey7;
//       cursor: pointer;
//       user-select: none;

//       &:hover {
//         color: @tab-pane-active-color;
//         color: @color--grey6;
//       }
//     }
//   }

//   /** header */

.@{tabs-prefix-cls} {
  &-header-scroll {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
  }

  &-content {
    width: 100%;
    overflow: hidden;
    padding-top: @tabs-content-padding;
    box-sizing: border-box;

    .@{tabs-prefix-cls}-content-inner {
      display: flex;
      width: 100%;
    }

    .@{tabs-prefix-cls}-content-item {
      width: 100%;
      overflow: hidden;
      height: 0;
      flex-shrink: 0;

      &.@{tabs-prefix-cls}-content-item-active {
        height: auto;
      }
    }
  }

  &-card,
  &-card-gutter {
    > .@{tabs-prefix-cls}-content {
      border: @tabs-card-border-content-width solid @tabs-line-color-header-border;
      border-top: none;
    }
  }

  &-card&-bottom,
  &-card-gutter&-bottom {
    > .@{tabs-prefix-cls}-content {
      border-top: @tabs-card-border-content-width solid @tabs-line-color-header-border;
      border-bottom: none;
    }
  }

  &-animation&-content {
    &-inner {
      transition: all @transition-duration-2 @transition-timing-function-standard;
    }
  }

  &-horizontal&-justify {
    display: flex;
    flex-direction: column;
    height: 100%;

    .@{tabs-prefix-cls}-content,
    .@{tabs-prefix-cls}-content-inner,
    .@{tabs-prefix-cls}-pane {
      height: 100%;
    }
  }
}

// 不同尺寸
@sizes: mini, small, large;

.for(@data, @i: 1) when(@i =< length(@data)) {
  @size: extract(@data, @i);

  .@{tabs-prefix-cls}-header-size-@{size} {
    &.@{tabs-prefix-cls}-header-nav-line {
      @height: ~'tabs-size-@{size}-header-height_line';
      @font-size: ~'tabs-size-@{size}-font-size';

      .@{tabs-prefix-cls}-header-extra {
        line-height: @@height;
        font-size: @@font-size;
      }

      .@{tabs-prefix-cls}-header-title {
        font-size: @@font-size;

        @padding: .get-title-padding(@@height, @@font-size, @tabs-padding-title-text-vertical) [];

        padding-top: @padding;
        padding-bottom: @padding;
      }

      .@{tabs-prefix-cls}-header-extra {
        line-height: @@height;
        font-size: @@font-size;
      }
    }

    &.@{tabs-prefix-cls}-header-nav-card,
    &.@{tabs-prefix-cls}-header-nav-card-gutter {
      @card-font-size: ~'tabs-size-@{size}-font-size_card';
      @card-height: ~'tabs-size-@{size}-header-height';

      .@{tabs-prefix-cls}-header-title {
        font-size: @@card-font-size;
        padding-top: .get-title-padding(
            @@card-height - @tabs-card-border-width * 2,
            @@card-font-size,
            0
          )
          [];
        padding-bottom: $padding-top;
      }

      .@{tabs-prefix-cls}-header-extra {
        line-height: @@card-height;
        font-size: @@card-font-size;
      }

      .@{tabs-prefix-cls}-add-icon {
        height: @@card-height;
      }
    }

    &.@{tabs-prefix-cls}-header-nav-capsule {
      @capsule-font-size: ~'tabs-size-@{size}-font-size_capsule';
      @capsule-height: ~'tabs-size-@{size}-header-height_capsule';

      .@{tabs-prefix-cls}-header-title {
        font-size: @@capsule-font-size;
        line-height: @@capsule-height - @tabs-capsule-padding-header-vertical * 2;
      }

      .@{tabs-prefix-cls}-header-extra {
        line-height: @@capsule-height;
        font-size: @@capsule-font-size;
      }
    }

    &.@{tabs-prefix-cls}-header-nav-rounded {
      @rounded-font-size: ~'tabs-size-@{size}-font-size_rounded';
      @rounded-height: ~'tabs-size-@{size}-header-height_rounded';

      .@{tabs-prefix-cls}-header-title {
        font-size: @@rounded-font-size;
        padding-top: .get-title-padding(@@rounded-height, @@rounded-font-size, 0) [];
        padding-bottom: $padding-top;
      }

      .@{tabs-prefix-cls}-header-extra {
        line-height: @@rounded-height;
        font-size: @@rounded-font-size;
      }
    }
  }

  .for(@data, (@i + 1));
}

.for(@sizes);

@tabs-prefix-cls: ~'@{prefix}-tabs';

@tabs-prefix-cls-vertical: ~'@{tabs-prefix-cls}-vertical';

/* Vertical */
.@{tabs-prefix-cls} {
  &-right {
    flex-direction: row-reverse;
  }

  &-vertical {
    display: flex;
    flex-wrap: nowrap;
  }

  &-header-nav-vertical {
    flex-grow: 0;
    flex-shrink: 0;

    &::before {
      position: absolute;
      left: initial;
      bottom: 0;
      right: 0;
      top: 0;
      width: @tabs-line-size-header-border;
      height: 100%;
      clear: both;
    }

    .@{tabs-prefix-cls}-add-icon {
      margin-left: 0;
      margin-top: @tabs-margin-add-icon-left;
      padding: 0 @tabs-card-padding-title-horizontal;
      height: auto;
    }
  }

  &-header-nav-vertical &-header {
    height: auto;

    &-scroll {
      flex-direction: column;
    }

    &-overflow-scroll {
      padding: @tabs-padding-header-wrapper-vertical 0;
    }

    &-wrapper {
      height: 100%;
      flex-direction: column;
    }

    &-ink {
      position: absolute;
      left: initial;
      right: 0;
      bottom: initial;
      width: @tabs-line-size-ink-stroke;
      transition: top @transition-duration-2 @transition-timing-function-standard,
        height @transition-duration-2 @transition-timing-function-standard;

      &.@{tabs-prefix-cls}-header-ink-custom .@{tabs-prefix-cls}-header-ink-inner {
        left: unset;
        bottom: unset;
        right: 0;
        transform: translateY(-50%);
        top: 50%;
      }
    }
  }

  &-header-nav-vertical &-header-title {
    display: block;
    white-space: nowrap;
    margin: 0;
    margin-top: @tabs-line-margin-title-vertical;

    &:first-of-type {
      margin-top: 0;
    }
  }

  &-header-nav-right::before {
    right: unset;
    left: 0;
  }

  &-header-nav-right &-header-ink {
    left: 0;
    right: unset;

    .@{tabs-prefix-cls}-header-ink-inner {
      left: 0;
      right: unset;
    }
  }

  &-header-nav-vertical &-header-scroll {
    position: relative;
    height: 100%;
    box-sizing: border-box;
  }

  &-header-nav-line&-header-nav-vertical &-header-title {
    padding: 0 @tabs-line-padding-title-horizontal_vertical;
  }

  &-header-nav-vertical&-header-nav-card &-header {
    &-title {
      margin: 0;
      position: relative;
      border: @tabs-card-border-width solid @tabs-card-color-title-border;
      border-bottom-color: @color-transparent;

      &:first-child {
        border-top-left-radius: @tabs-card-border-radius;
      }

      &-active,
      &-active:hover {
        border-bottom-color: @color-transparent;
        border-right-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
      }

      &:last-child {
        border-bottom: @tabs-card-border-width solid @tabs-card-color-title-border;
        border-bottom-left-radius: @tabs-card-border-radius;
      }
    }
  }

  &-header-nav-vertical&-header-nav-card&-header-nav-right &-header {
    &-title {
      &-active,
      &-active:hover {
        border-right-color: @tabs-card-color-title-border;
        border-left-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
      }
    }
  }

  &-header-nav-vertical&-header-nav-card-gutter &-header {
    &-title {
      margin-left: 0;
      border-radius: @tabs-card-border-radius 0 0 @tabs-card-border-radius;
      position: relative;

      &:not(:first-of-type) {
        margin-top: 4px;
      }

      &-active,
      &-active:hover {
        border-right-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
        border-bottom-color: @tabs-card-color-title-border;
      }
    }
  }

  &-header-nav-vertical&-header-nav-card-gutter&-header-nav-right &-header {
    &-title {
      &-active,
      &-active:hover {
        border-right-color: @tabs-card-color-title-border;
        border-left-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
      }
    }
  }

  &-content-vertical {
    width: auto;
    height: 100%;
    padding: 0;
    flex: auto;
  }

  &-right &-content-vertical {
    padding-right: @tabs-content-padding;
  }

  &-left &-content-vertical {
    padding-left: @tabs-content-padding;
  }

  &-card,
  &-card-gutter {
    > .@{tabs-prefix-cls}-content-vertical {
      border: @tabs-card-border-content-width solid @tabs-line-color-header-border;
      border-left: none;
    }
  }

  &-card&-right,
  &-card-gutter&-right {
    > .@{tabs-prefix-cls}-content-vertical {
      border-left: @tabs-card-border-content-width solid @tabs-line-color-header-border;
      border-right: none;
    }
  }
}

.@{tabs-prefix-cls}-rtl {
  direction: rtl;

  &.@{tabs-prefix-cls}-left {
    flex-direction: row-reverse;
  }

  &.@{tabs-prefix-cls}-right {
    flex-direction: row;
  }

  .@{tabs-prefix-cls} {
    &-close-icon {
      margin-left: 0;
      margin-right: @tabs-margin-close-icon-left;
    }

    &-left-icon,
    &-right-icon {
      margin-left: @tabs-spacing-nav-icon-header;
      margin-right: @tabs-padding-header-wrapper-horizontal;
    }
  }

  .@{tabs-prefix-cls}-header-nav-line {
    > .@{tabs-prefix-cls}-header-nav-horizontal {
      .@{tabs-prefix-cls}-header-scroll {
        > .@{tabs-prefix-cls}-header-title {
          &:first-of-type {
            margin-right: 0;
          }
        }
      }
    }
  }

  .@{tabs-prefix-cls}-header-nav-line,
  .@{tabs-prefix-cls}-header-nav-text {
    > .@{tabs-prefix-cls}-header-nav-horizontal {
      .@{tabs-prefix-cls}-header-no-padding {
        > .@{tabs-prefix-cls}-header-title {
          &:first-of-type {
            margin-right: 0;
          }
        }
      }
    }
  }

  .@{tabs-prefix-cls}-header-nav-card,
  .@{tabs-prefix-cls}-header-nav-card-gutter {
    .@{tabs-prefix-cls}-header-title-editable {
      padding-left: @tabs-card-padding-title-right_editable;
      padding-right: @tabs-card-padding-title-horizontal;
    }
  }

  .@{tabs-prefix-cls}-header-nav-card .@{tabs-prefix-cls}-header-title {
    border-right: @tabs-card-border-width solid @tabs-card-color-title-border;
    border-left: none;

    &:last-child {
      border-left: @tabs-card-border-width solid @tabs-card-color-title-border;
      border-top-left-radius: @tabs-card-border-radius;
      border-top-right-radius: 0;
    }

    &:first-child {
      border-top-left-radius: 0;
      border-top-right-radius: @tabs-card-border-radius;
    }
  }

  .@{tabs-prefix-cls}-header-nav-card-gutter .@{tabs-prefix-cls}-header-title {
    margin-right: @tabs-card-gutter-spacing-horizontal;

    &:first-child {
      margin-right: 0;
    }
  }

  .@{tabs-prefix-cls}-header-nav-text {
    .@{tabs-prefix-cls}-header-title {
      &:not(:first-of-type)::before {
        left: initial;
        right: -(@tabs-text-margin-title-horizontal + (@tabs-text-size-separator-width / 2));
      }
    }
  }

  .@{tabs-prefix-cls}-header-nav-capsule.@{tabs-prefix-cls}-header-nav-horizontal {
    .@{tabs-prefix-cls}-header-title:not(:first-of-type) {
      margin-left: 0;
      margin-right: @tabs-capsule-margin-title-horizontal;

      &::before {
        right: -(@tabs-capsule-margin-title-horizontal / 2) - (@tabs-capsule-size-separator-width /
              2);
        left: initial;
      }
    }
  }
}


@{arco-theme-tag} {
  &[arco-theme='dark'] {
    .@{tabs-prefix-cls}-header-nav-capsule {
      .@{tabs-prefix-cls}-header-title {
        &-active {
          background-color: var(~'@{arco-cssvars-prefix}-color-fill-3');
        }

        &:not(&-disabled):hover {
          background-color: var(~'@{arco-cssvars-prefix}-color-fill-3');
        }
      }
    }
  }
}


/********** Tabs end ***************/
    


/********** Tag  ***************/



@tag-border-width: 1px;
@tag-border-type: solid;
@tag-padding-horizontal: 8px;
@tag-padding-vertical: 0;
@tag-icon-margin-right: @spacing-2;
@tag-text-font-weight: @font-weight-500;
@tag-border-radius: @radius-small;

@tag-size-small: @size-5;
@tag-size-default: @size-6;
@tag-size-medium: @size-7;
@tag-size-large: @size-8;

@tag-size-small-font-size: 12px;
@tag-size-default-font-size: 12px;
@tag-size-medium-font-size: 14px;
@tag-size-large-font-size: 14px;

@tag-color-bg-not-checked_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');

@tag-custom-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@tag-custom-color-icon-bg_hover: rgba(255, 255, 255, 0.2);

@tag-default-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@tag-default-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@tag-default-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@tag-default-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@tag-default-color-border: @color-transparent;
@tag-default-bordered-color-border: var(~'@{arco-cssvars-prefix}-color-border-2');
@tag-default-color-border_hover: @color-transparent;

@tag-red-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-red-1'));;
@tag-red-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-red-2'));;
@tag-red-color-border: @color-transparent;
@tag-red-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-red-6'));;
@tag-red-color-border_hover: @color-transparent;
@tag-red-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-red-6'));;
@tag-red-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-red-2'));;
@tag-red-color-text:  rgb(var(~'@{arco-cssvars-prefix}-red-6'));;

@tag-orangered-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-orangered-1'));;
@tag-orangered-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-orangered-2'));;
@tag-orangered-color-border: @color-transparent;
@tag-orangered-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-orangered-6'));;
@tag-orangered-color-border_hover: @color-transparent;
@tag-orangered-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-orangered-6'));;
@tag-orangered-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-orangered-2'));;
@tag-orangered-color-text:  rgb(var(~'@{arco-cssvars-prefix}-orangered-6'));;

@tag-orange-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-orange-1'));;
@tag-orange-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-orange-2'));;
@tag-orange-color-border: @color-transparent;
@tag-orange-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));
@tag-orange-color-border_hover: @color-transparent;
@tag-orange-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-orange-6'));;
@tag-orange-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-orange-2'));;
@tag-orange-color-text:  rgb(var(~'@{arco-cssvars-prefix}-orange-6'));;

@tag-gold-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-gold-1'));;
@tag-gold-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-gold-3'));;
@tag-gold-color-border: @color-transparent;
@tag-gold-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-gold-6'));;
@tag-gold-color-border_hover: @color-transparent;
@tag-gold-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-gold-6'));;
@tag-gold-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-gold-2'));;
@tag-gold-color-text:  rgb(var(~'@{arco-cssvars-prefix}-gold-6'));;

@tag-lime-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-lime-1'));;
@tag-lime-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-lime-2'));;
@tag-lime-color-border: @color-transparent;
@tag-lime-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-lime-6'));;
@tag-lime-color-border_hover: @color-transparent;
@tag-lime-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-lime-6'));;
@tag-lime-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-lime-2'));;
@tag-lime-color-text:  rgb(var(~'@{arco-cssvars-prefix}-lime-6'));;

@tag-green-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-green-1'));;
@tag-green-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-green-2'));;
@tag-green-color-border: @color-transparent;
@tag-green-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-green-6'));;
@tag-green-color-border_hover: @color-transparent;
@tag-green-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-green-6'));;
@tag-green-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-green-2'));;
@tag-green-color-text:  rgb(var(~'@{arco-cssvars-prefix}-green-6'));;

@tag-cyan-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-cyan-1'));;
@tag-cyan-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-cyan-2'));;
@tag-cyan-color-border: @color-transparent;
@tag-cyan-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));;
@tag-cyan-color-border_hover: @color-transparent;
@tag-cyan-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));;
@tag-cyan-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-cyan-2'));;
@tag-cyan-color-text:  rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));;

@tag-blue-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-blue-1'));;
@tag-blue-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-blue-2'));;
@tag-blue-color-border: @color-transparent;
@tag-blue-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-blue-6'));;
@tag-blue-color-border_hover: @color-transparent;
@tag-blue-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-blue-6'));;
@tag-blue-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-blue-2'));;
@tag-blue-color-text:  rgb(var(~'@{arco-cssvars-prefix}-blue-6'));;

@tag-arcoblue-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));;
@tag-arcoblue-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));;
@tag-arcoblue-color-border: @color-transparent;
@tag-arcoblue-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));;
@tag-arcoblue-color-border_hover: @color-transparent;
@tag-arcoblue-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));;
@tag-arcoblue-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));;
@tag-arcoblue-color-text:  rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));;

@tag-purple-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-purple-1'));;
@tag-purple-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-purple-2'));;
@tag-purple-color-border: @color-transparent;
@tag-purple-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-purple-6'));;
@tag-purple-color-border_hover: @color-transparent;
@tag-purple-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-purple-6'));;
@tag-purple-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-purple-2'));;
@tag-purple-color-text:  rgb(var(~'@{arco-cssvars-prefix}-purple-6'));;

@tag-pinkpurple-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-1'));;
@tag-pinkpurple-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-2'));;
@tag-pinkpurple-color-border: @color-transparent;
@tag-pinkpurple-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));;
@tag-pinkpurple-color-border_hover: @color-transparent;
@tag-pinkpurple-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));;
@tag-pinkpurple-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-2'));;
@tag-pinkpurple-color-text:  rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));;

@tag-magenta-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-magenta-1'));;
@tag-magenta-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-magenta-2'));;
@tag-magenta-color-border: @color-transparent;
@tag-magenta-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));;
@tag-magenta-color-border_hover: @color-transparent;
@tag-magenta-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));;
@tag-magenta-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-magenta-2'));;
@tag-magenta-color-text:  rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));;

@tag-gray-color-bg:  rgb(var(~'@{arco-cssvars-prefix}-gray-2'));;
@tag-gray-color-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-gray-3'));;
@tag-gray-color-border: @color-transparent;
@tag-gray-bordered-color-border:  rgb(var(~'@{arco-cssvars-prefix}-gray-6'));;
@tag-gray-color-border_hover: @color-transparent;
@tag-gray-color-icon:  rgb(var(~'@{arco-cssvars-prefix}-gray-6'));;
@tag-gray-color-icon-bg_hover:  rgb(var(~'@{arco-cssvars-prefix}-gray-3'));;
@tag-gray-color-text:  rgb(var(~'@{arco-cssvars-prefix}-gray-6'));;

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


@tag-prefix-cls: ~'@{prefix}-tag';

@colors: red, orangered, orange, gold, lime, green, cyan, blue, arcoblue, purple, pinkpurple,
  magenta, gray;

.@{tag-prefix-cls} {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: @tag-size-default;
  padding: @tag-padding-vertical @tag-padding-horizontal;
  border: @tag-border-width @tag-border-type transparent;
  border-radius: @tag-border-radius;
  font-size: @tag-size-default-font-size;
  font-weight: @tag-text-font-weight;
  line-height: @tag-size-default - @tag-border-width * 2 - @tag-padding-vertical * 2;
  color: @tag-default-color-text;

  .icon-hover(
    @tag-prefix-cls,
    12px,
    16px
  );
  .icon-hover-bg(@tag-prefix-cls, @tag-default-color-bg_hover);

  &-content {
    flex: 1;
    .text-ellipsis();
  }

  &-checkable {
    cursor: pointer;
    transition: all @transition-duration-1 @transition-timing-function-linear;
  }

  &-checkable:hover {
    background-color: @tag-color-bg-not-checked_hover;
  }

  &-checked {
    border-color: @tag-default-color-border;
    background-color: @tag-default-color-bg;
  }

  &-checkable&-checked:hover {
    background-color: @tag-default-color-bg_hover;
    border-color: @tag-default-color-border_hover;
  }

  &-bordered,
  &-checkable&-checked&-bordered:hover {
    border-color: @tag-default-bordered-color-border;
  }

  // Size
  &-size-small {
    height: @tag-size-small;
    line-height: @tag-size-small - @tag-border-width * 2;
    font-size: @tag-size-small-font-size;
  }

  &-size-medium {
    height: @tag-size-medium;
    line-height: @tag-size-medium - @tag-border-width * 2;
    font-size: @tag-size-medium-font-size;
  }

  &-size-large {
    height: @tag-size-large;
    line-height: @tag-size-large - @tag-border-width * 2;
    font-size: @tag-size-large-font-size;
  }

  &-hide {
    display: none;
  }

  &-loading {
    opacity: 0.8;
    cursor: default;
  }

  &-icon {
    margin-right: @tag-icon-margin-right;
    color: @tag-default-color-icon;
  }

  each(@colors, {
    &-checked&-@{value} {
      color: ~'@{tag-@{value}-color-text}';
      background-color: ~'@{tag-@{value}-color-bg}';
      border: @tag-border-width @tag-border-type ~'@{tag-@{value}-color-border}';

      .icon-hover-bg(@tag-prefix-cls, ~'@{tag-@{value}-color-icon-bg_hover}');
    }

    &-checkable&-checked&-@{value}:hover {
      background-color: ~'@{tag-@{value}-color-bg_hover}';
      border-color: ~'@{tag-@{value}-color-border_hover}';
    }

    &-checked&-@{value}&-bordered,
    &-checked&-@{value}&-bordered:hover {
      border-color: ~'@{tag-@{value}-bordered-color-border}';
    }

    &-checked&-@{value} &-icon,
    &-checked&-@{value} &-close-icon,
    &-checked&-@{value} &-loading-icon {
      color: ~'@{tag-@{value}-color-icon}';
    }
  });

  &-custom-color {
    color: @tag-custom-color-text;

    .icon-hover-bg(@tag-prefix-cls, @tag-custom-color-icon-bg_hover);
  }

  & &-close-btn {
    font-size: 12px;
    margin-left: 4px;

    &:focus-visible::before {
      box-shadow: inset 0 0 0 2px var(~'@{arco-cssvars-prefix}-color-primary-light-3');
    }

    > svg {
      position: relative;
    }
  }

  &-loading-icon {
    font-size: 12px;
    margin-left: 4px;
  }
}

@{arco-theme-tag} {
  &[arco-theme='dark'] {
    .@{tag-prefix-cls}-checked {
      color: rgba(255, 255, 255, 90%);
    }

    each(@colors, {
    .@{tag-prefix-cls}-checked.@{tag-prefix-cls}-@{value} {
      background-color: ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.2)';

      .icon-hover-bg(@tag-prefix-cls, ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.35)');
    }

    .@{tag-prefix-cls}-checkable.@{tag-prefix-cls}-checked.@{tag-prefix-cls}-@{value}:hover {
      background-color: ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.35)';
    }
  });
  }
}

.@{tag-prefix-cls}-rtl {
  direction: rtl;

  .@{tag-prefix-cls} {
    &-icon {
      margin-left: @tag-icon-margin-right;
      margin-right: 0;
    }

    &-close-btn,
    &-loading-icon {
      margin-left: 0;
      margin-right: 4px;
    }
  }
}


/********** Tag end ***************/
    


/********** Timeline  ***************/



@timeline-color-content-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@timeline-color-label-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@timeline-color-dot-bg: @color-primary-6;
@timeline-color-line-bg: var(~'@{arco-cssvars-prefix}-color-neutral-3');

@timeline-font-content-size: @font-size-body-3;
@timeline-font-label-size: @font-size-body-1;
@timeline-item-min-height: 78px;

@timeline-dot-size-width: 6px;
@timeline-dot-border-radius: @radius-circle;
@timeline-dot-border-width_hollow: @border-2;

@timeline-color-dot-bg_hollow: var(~'@{arco-cssvars-prefix}-color-bg-2');
@timeline-horizontal-margin-content-spacing: @spacing-7;
@timeline-horizontal-margin-line-left: @spacing-3;
@timeline-horizontal-margin-line-right: @spacing-2;

@timeline-vertical-margin-content-bottom: @spacing-2;
@timeline-vertical-margin-content-left: @spacing-7;
@timeline-vertical-margin-line-top: @spacing-2;
@timeline-vertical-margin-line-bottom: @spacing-2;
@timeline-size-line-width: @border-1;


@timeline-prefix-cls: ~'@{prefix}-timeline';
@timeline-item-prefix-cls: ~'@{prefix}-timeline-item';

.@{timeline-prefix-cls} {
  &-item {
    position: relative;
    color: @timeline-color-content-text;
    font-size: @timeline-font-content-size;
    min-height: @timeline-item-min-height;
    padding-left: @timeline-dot-size-width;

    &-label {
      color: @timeline-color-label-text;
      font-size: @timeline-font-label-size;
      line-height: 1.667;
    }

    &-content {
      line-height: 1.5715;
      font-size: @timeline-font-content-size;
      color: @timeline-color-content-text;
      margin-bottom: @timeline-vertical-margin-content-bottom;

      &-wrapper {
        margin-left: @timeline-vertical-margin-content-left;
        position: relative;
      }
    }
  }
}

// 节点的样式
.@{timeline-prefix-cls}-item {
  &&-last {
    > .@{timeline-prefix-cls}-item-dot-wrapper .@{timeline-prefix-cls}-item-dot-line {
      display: none;
    }
  }

  &-dot-wrapper {
    position: absolute;
    text-align: center;
    height: 100%;
    left: 0;

    .@{timeline-prefix-cls}-item-dot-content {
      width: @timeline-dot-size-width;
      height: 1.5715 * @timeline-font-content-size;
      line-height: $height;
      position: relative;
    }
  }

  &-dot {
    width: @timeline-dot-size-width;
    height: @timeline-dot-size-width;
    border-radius: @timeline-dot-border-radius;
    box-sizing: border-box;
    color: @timeline-color-dot-bg;
    margin-top: -50%;
    position: relative;
    top: 50%;

    &-solid {
      background-color: @timeline-color-dot-bg;
    }

    &-hollow {
      border: @timeline-dot-border-width_hollow solid @timeline-color-dot-bg;
      background-color: @timeline-color-dot-bg_hollow;
    }

    &-custom {
      display: inline-flex;
      transform-origin: center;
      color: @timeline-color-dot-bg;
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
      transform: translateX(-50%) translateY(-50%);

      svg {
        color: inherit;
      }
    }
  }

  &-dot-line {
    width: @timeline-size-line-width;
    border-left-width: @timeline-size-line-width;
    border-color: @timeline-color-line-bg;
    left: 50%;
    transform: translateX(-50%);
    top: 1.5715 * (@timeline-font-content-size / 2) + (@timeline-dot-size-width / 2) +
      @timeline-vertical-margin-line-top;
    bottom: -(1.5715 * (@timeline-font-content-size / 2) - (@timeline-dot-size-width / 2) -
          @timeline-vertical-margin-line-bottom);
    // bottom: -7px;
    position: absolute;
    box-sizing: border-box;
  }
}

/* mode  */
.@{timeline-prefix-cls} {
  &-alternate {
    overflow: hidden;

    .@{timeline-item-prefix-cls}-vertical-left {
      padding-left: 0;

      > .@{timeline-item-prefix-cls}-dot-wrapper {
        left: 50%;
      }

      > .@{timeline-item-prefix-cls}-content-wrapper {
        left: 50%;
        width: 50%;
        margin-left: @timeline-vertical-margin-content-left + @timeline-dot-size-width;
        padding-right: @timeline-vertical-margin-content-left + @timeline-dot-size-width;
      }
    }

    .@{timeline-item-prefix-cls}-vertical-right {
      padding-right: 0;

      > .@{timeline-item-prefix-cls}-dot-wrapper {
        left: 50%;
      }

      > .@{timeline-item-prefix-cls}-content-wrapper {
        left: 0;
        margin-left: -@timeline-vertical-margin-content-left;
        margin-right: 0;
        text-align: right;
        width: 50%;
        padding-right: @timeline-vertical-margin-content-left;
      }
    }
  }

  &-right {
    .@{timeline-item-prefix-cls}-vertical-right {
      padding-right: @timeline-dot-size-width;

      > .@{timeline-item-prefix-cls}-dot-wrapper {
        right: 0;
        left: unset;
      }

      > .@{timeline-item-prefix-cls}-content-wrapper {
        text-align: right;
        margin-left: 0;
        margin-right: @timeline-vertical-margin-content-left;
      }
    }
  }
}

/* label position */
.@{timeline-prefix-cls}-item {
  &-label-relative {
    > .@{timeline-prefix-cls}-item-label {
      position: absolute;
      top: 0;
      max-width: 100px;
      box-sizing: border-box;
    }
  }

  &-vertical-left&-label-relative {
    margin-left: 100px;

    > .@{timeline-prefix-cls}-item-label {
      text-align: right;
      padding-right: @timeline-vertical-margin-content-left;
      transform: translateX(-100%);
      left: 0;
    }
  }

  &-vertical-right&-label-relative {
    margin-right: 100px;

    > .@{timeline-prefix-cls}-item-label {
      text-align: left;
      padding-left: @timeline-vertical-margin-content-left;
      transform: translateX(100%);
      right: 0;
    }
  }

  &-horizontal-top&-label-relative {
    margin-top: 50px;

    > .@{timeline-prefix-cls}-item-label {
      padding-bottom: @timeline-horizontal-margin-content-spacing;
      transform: translateY(-100%);
    }

    > .@{timeline-prefix-cls}-item-content {
      margin-bottom: 0;
    }
  }

  &-horizontal-bottom&-label-relative {
    margin-bottom: 50px;

    > .@{timeline-prefix-cls}-item-content {
      margin-bottom: 0;
    }

    > .@{timeline-prefix-cls}-item-label {
      top: unset;
      bottom: 0;
      text-align: left;
      padding-top: @timeline-horizontal-margin-content-spacing;
      transform: translateY(100%);
    }
  }
}

.@{timeline-prefix-cls}-alternate {
  .@{timeline-prefix-cls}-item-vertical-left.@{timeline-prefix-cls}-item-label-relative {
    margin-left: 0;

    > .@{timeline-prefix-cls}-item-label {
      width: 50%;
      max-width: unset;
      transform: none;
      left: 0;
    }
  }

  .@{timeline-prefix-cls}-item-vertical-right.@{timeline-prefix-cls}-item-label-relative {
    margin-right: 0;

    > .@{timeline-prefix-cls}-item-label {
      width: 50%;
      max-width: unset;
      transform: none;
      right: 0;
    }
  }

  .@{timeline-prefix-cls}-item-horizontal-top.@{timeline-prefix-cls}-item-label-relative {
    margin-top: 0;
  }

  .@{timeline-prefix-cls}-item-horizontal-bottom.@{timeline-prefix-cls}-item-label-relative {
    margin-bottom: 0;
  }
}

.@{timeline-prefix-cls}-direction-horizontal {
  display: flex;
}

.@{timeline-prefix-cls}-item-dot-line-is-horizontal {
  left: @timeline-dot-size-width + @timeline-horizontal-margin-line-left;
  right: @timeline-horizontal-margin-line-right;
  border-left: none;
  height: @timeline-size-line-width;
  border-top-width: @timeline-size-line-width;
  top: 50%;
  transform: translateY(-50%);
  width: unset;
}

.@{timeline-prefix-cls}-item-horizontal-bottom,
.@{timeline-prefix-cls}-item-horizontal-top {
  flex: 1;
  padding-left: 0;
  padding-right: 0;
  min-height: unset;

  > .@{timeline-prefix-cls}-item-dot-wrapper {
    height: auto;
    width: 100%;
    top: 0;

    .@{timeline-prefix-cls}-item-dot {
      margin-top: unset;
      top: unset;
    }

    .@{timeline-prefix-cls}-item-dot-content {
      height: @timeline-dot-size-width;
      line-height: @timeline-dot-size-width;
    }
  }
}

.@{timeline-prefix-cls}-item-horizontal-top {
  padding-top: @timeline-dot-size-width;

  > .@{timeline-prefix-cls}-item-dot-wrapper {
    bottom: unset;
    top: 0;
  }

  > .@{timeline-prefix-cls}-item-content-wrapper {
    margin-top: @timeline-horizontal-margin-content-spacing;
    margin-left: 0;
  }
}

.@{timeline-prefix-cls}-item-horizontal-bottom {
  padding-bottom: @timeline-dot-size-width;

  > .@{timeline-prefix-cls}-item-dot-wrapper {
    bottom: 0;
    top: unset;
  }

  > .@{timeline-prefix-cls}-item-content-wrapper {
    margin-left: 0;
    margin-bottom: @timeline-horizontal-margin-content-spacing;
  }
}

.@{timeline-prefix-cls}-alternate.@{timeline-prefix-cls}-direction-horizontal {
  align-items: center;
  min-height: 200px;
  overflow: visible;

  .@{timeline-prefix-cls}-item-horizontal-bottom {
    transform: translateY(-50%);
    margin-top: @timeline-dot-size-width;
  }

  .@{timeline-prefix-cls}-item-horizontal-top {
    margin-top: -@timeline-dot-size-width;
    transform: translateY(50%);
  }
}

.@{timeline-prefix-cls}-rtl {
  .@{timeline-item-prefix-cls}-vertical-left {
    > .@{timeline-item-prefix-cls}-content-wrapper {
      text-align: left;
    }
  }

  &.@{timeline-prefix-cls}-alternate {
    .@{timeline-prefix-cls}-item-vertical-left.@{timeline-prefix-cls}-item-label-relative {
      > .@{timeline-prefix-cls}-item-label {
        left: 50%;
        text-align: left;
        padding-left: @timeline-vertical-margin-content-left;
        padding-right: 0;
      }

      > .@{timeline-prefix-cls}-item-content-wrapper {
        text-align: right;
        right: 50%;
        left: initial;
        margin-right: @timeline-vertical-margin-content-left;
        padding-left: @timeline-vertical-margin-content-left;
        padding-right: 0;
        margin-left: 0;
      }
    }

    .@{timeline-prefix-cls}-item-vertical-right.@{timeline-prefix-cls}-item-label-relative {
      > .@{timeline-prefix-cls}-item-label {
        right: 50%;
        text-align: right;
        padding-right: @timeline-vertical-margin-content-left;
        padding-left: 0;
      }

      > .@{timeline-prefix-cls}-item-content-wrapper {
        text-align: left;
        left: 0;
        right: initial;
        margin-right: -(@timeline-vertical-margin-content-left + @timeline-dot-size-width);
        padding-left: @timeline-vertical-margin-content-left+ @timeline-dot-size-width;
        margin-left: 0;
        padding-right: 0;
      }
    }

    .@{timeline-item-prefix-cls}-vertical-left {
      > .@{timeline-prefix-cls}-item-content-wrapper {
        right: 50%;
        text-align: right;
      }
    }

    .@{timeline-item-prefix-cls}-vertical-right {
      > .@{timeline-prefix-cls}-item-content-wrapper {
        left: 0;
        margin-right: -(@timeline-vertical-margin-content-left + @timeline-dot-size-width);
        padding-left: @timeline-vertical-margin-content-left+ @timeline-dot-size-width;
        margin-left: 0;
        padding-right: 0;
        text-align: left;
      }
    }
  }
}



/********** Timeline end ***************/
    


/********** TimePicker  ***************/



@timepicker-wrapper-border-radius: @radius-medium;

@timepicker-column-width: 64px;
@timepicker-column-height: 224px;
@timepicker-cell-height: 24px;
@timepicker-cell-spacing: @spacing-4;
@timepicker-cell-font-size: @font-size-body-3;
@timepicker-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@timepicker-color-cell-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@timepicker-color-text-cell: var(~'@{arco-cssvars-prefix}-color-text-1');
@timepicker-color-bg-cell_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@timepicker-color-bg-cell_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
@timepicker-color-text-cell_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@timepicker-font-weight-cell: @font-weight-500;
@timepicker-font-weight-cell_active: @font-weight-500;
@timepicker-color-extra-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@timepicker-font-extra-size: @font-size-body-1;
@timepicker-extra-padding-horizontal: @spacing-4;
@timepicker-extra-padding-vertical: @spacing-4;
@timepicker-footer-padding-horizontal: @spacing-4;
@timepicker-footer-padding-vertical: @spacing-4;


@time-picker-prefix-cls: ~'@{prefix}-timepicker';

.@{time-picker-prefix-cls} {
  position: relative;
  display: flex;
  padding: 0;
  box-sizing: border-box;

  &-container {
    border-radius: @timepicker-wrapper-border-radius;
    border: 1px solid @timepicker-color-border;
    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');
    box-shadow: @popup-box-shadow-base;
    overflow: hidden;
  }

  &-list {
    width: @timepicker-column-width;
    height: @timepicker-column-height;
    overflow: hidden;
    box-sizing: border-box;
    scrollbar-width: none; // firefox

    // safari & chrome
    &::-webkit-scrollbar {
      width: 0;
    }

    &:not(:last-child) {
      border-right: 1px solid @timepicker-color-cell-border;
    }

    &:hover {
      overflow-y: auto;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      box-sizing: border-box;

      &::after {
        content: '';
        display: block;
        width: 100%;
        height: @timepicker-column-height - @timepicker-cell-height - @timepicker-cell-spacing;
      }
    }
  }

  &-cell {
    padding: @timepicker-cell-spacing / 2 0;
    text-align: center;
    color: @timepicker-color-text-cell;
    font-weight: @timepicker-font-weight-cell;
    cursor: pointer;

    &-inner {
      height: @timepicker-cell-height;
      line-height: @timepicker-cell-height;
      font-size: @timepicker-cell-font-size;
    }

    &:not(&-selected):not(&-disabled):hover &-inner {
      background-color: @timepicker-color-bg-cell_hover;
    }
  }

  &-cell-selected &-cell-inner {
    background-color: @timepicker-color-bg-cell_active;
    font-weight: @timepicker-font-weight-cell_active;
  }

  &-cell-disabled {
    color: @timepicker-color-text-cell_disabled;
    cursor: not-allowed;
  }

  &-footer-extra-wrapper {
    border-top: 1px solid @timepicker-color-cell-border;
    padding: @timepicker-extra-padding-vertical @timepicker-extra-padding-horizontal;
    color: @timepicker-color-extra-text;
    font-size: @timepicker-font-extra-size;
  }

  &-footer-btn-wrapper {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid @timepicker-color-cell-border;
    padding: @timepicker-footer-padding-vertical @timepicker-footer-padding-horizontal;
  }
}


/********** TimePicker end ***************/
    


/********** Tooltip  ***************/



@tooltip-padding-horizontal: @spacing-6;
@tooltip-padding-vertical: @spacing-4;

@tooltip-mini-padding-horizontal: @spacing-6;
@tooltip-mini-padding-vertical: @spacing-2;
@tooltip-mini-font-size: @font-size-body-3;

@tooltip-font-size: @font-size-body-3;
@tooltip-border-radius: @radius-small;

@tooltip-color-text: #fff;
@tooltip-color-bg: var(~'@{arco-cssvars-prefix}-color-tooltip-bg');


.@{prefix}-tooltip {
  &-content {
    padding: @tooltip-padding-vertical @tooltip-padding-horizontal;
    background-color: @tooltip-color-bg;
    font-size: @tooltip-font-size;
    border-radius: @tooltip-border-radius;
    color: @tooltip-color-text;
    line-height: @line-height-base;
    box-shadow: @shadow2-down;

    &-inner {
      word-wrap: break-word;
      text-align: start;
    }
  }

  &-mini {
    font-size: @tooltip-mini-font-size;
    padding: @tooltip-mini-padding-vertical @tooltip-mini-padding-horizontal;
  }

  .@{prefix}-trigger-arrow&-arrow {
    background-color: @tooltip-color-bg;
  }
}

@{arco-theme-tag} {
  &[arco-theme='dark'] {
    .@{prefix}-tooltip-content {
      border: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
    }

    .@{prefix}-tooltip .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow {
      z-index: 1;
    }

    .@{prefix}-trigger {
      &[trigger-placement='top'] .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow,
      &[trigger-placement='tl'] .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow,
      &[trigger-placement='tr'] .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow {
        border-bottom: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
        border-right: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
      }

      &[trigger-placement='bottom'] .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow,
      &[trigger-placement='bl'] .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow,
      &[trigger-placement='br'] .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow {
        border-top: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
        border-left: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
      }

      &[trigger-placement='left'] .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow,
      &[trigger-placement='lt'] .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow,
      &[trigger-placement='lb'] .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow {
        border-top: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
        border-right: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
      }

      &[trigger-placement='right'] .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow,
      &[trigger-placement='rt'] .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow,
      &[trigger-placement='rb'] .@{prefix}-trigger-arrow.@{prefix}-tooltip-arrow {
        border-left: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
        border-bottom: @border-1 solid var(~'@{arco-cssvars-prefix}-color-neutral-3');
      }
    }
  }
}


/********** Tooltip end ***************/
    


/********** Transfer  ***************/



@transfer-width: 200px;
@transfer-height: 224px;
@transfer-height-title: @size-10;
@transfer-height-footer: @size-10;
@transfer-padding-horizontal-footer: @spacing-4;
@transfer-border-color: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@transfer-border-width: @border-1;
@transfer-border-radius: @radius-small;

@transfer-font-size-header: @font-size-body-3;
@transfer-font-size-header-unit: @font-size-body-1;
@transfer-font-size-icon: @font-size-body-1;
@transfer-font-weight-header: @font-weight-500;

@transfer-color-text-header: var(~'@{arco-cssvars-prefix}-color-text-1');
@transfer-color-text-header-unit: var(~'@{arco-cssvars-prefix}-color-text-3');
@transfer-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@transfer-color-bg-icon: var(~'@{arco-cssvars-prefix}-color-fill-3');
@transfer-color-bg-header: var(~'@{arco-cssvars-prefix}-color-fill-1');

@transfer-search-padding-left: 12px;
@transfer-search-padding-right: 12px;
@transfer-search-padding-top: 8px;
@transfer-search-padding-bottom: 4px;

@transfer-item-color-bg_default: @color-transparent;
@transfer-item-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@transfer-item-color-bg_disabled: @color-transparent;
@transfer-item-color_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@transfer-item-color_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@transfer-item-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@transfer-item-height: @size-9;
@transfer-item-padding-horizontal: @spacing-5;
@transfer-item-font-size: @font-size-body-3;

@transfer-item-draggable-height-gap: 2px;
@transfer-item-draggable-color-bg-gap: @color-primary-6;
@transfer-item-draggable-color-bg_dragging: var(~'@{arco-cssvars-prefix}-color-fill-1');
@transfer-item-draggable-color_dragging: var(~'@{arco-cssvars-prefix}-color-text-4');
@transfer-item-draggable-color_blink: var(~'@{arco-cssvars-prefix}-color-primary-light-1');

@transfer-pagination-width-input: @size-6;
@transfer-pagination-gap-separator: @spacing-4;

@transfer-operation-padding-horizontal: @spacing-8;
@transfer-operation-gap-buttons: @spacing-6;
@transfer-color-icon-box-shadow: @color-primary-6;

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


@transfer-prefix-cls: ~'@{prefix}-transfer';

.@{transfer-prefix-cls} {
  display: flex;
  align-items: center;

  &-view {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: @transfer-width;
    height: @transfer-height;
    border: @transfer-border-width solid @transfer-border-color;
    border-radius: @transfer-border-radius;

    &-search {
      padding: @transfer-search-padding-top @transfer-search-padding-right
        @transfer-search-padding-bottom @transfer-search-padding-left;
    }

    &-list {
      flex: 1;
      overflow: hidden;
    }

    &-custom-list {
      flex: 1;
      overflow: auto;
    }

    &-header,
    &-item {
      display: flex;
      align-items: center;
      padding: 0 @transfer-item-padding-horizontal;
    }

    &-header > *:first-child,
    &-item &-item-content {
      flex: 1;
      .text-ellipsis();

      &:not(:last-child) {
        margin-right: 8px;
      }
    }

    &-header {
      height: @transfer-height-title;
      line-height: $height;
      font-size: @transfer-font-size-header;
      font-weight: @transfer-font-weight-header;
      background-color: @transfer-color-bg-header;
      color: @transfer-color-text-header;

      &-title {
        display: flex;
        align-items: center;

        .@{prefix}-checkbox {
          .text-ellipsis();

          font-size: inherit;

          &-text {
            color: inherit;
          }
        }
      }

      &-unit {
        margin-right: 2px;
        font-weight: normal;
        font-size: @transfer-font-size-header-unit;
        color: @transfer-color-text-header-unit;
      }
    }

    &-item {
      position: relative;
      height: @transfer-item-height;
      line-height: $height;
      list-style: none;
      color: @transfer-item-color_default;
      background-color: @transfer-item-color-bg_default;
      cursor: default;

      &-content {
        font-size: @transfer-item-font-size;
      }

      &-disabled {
        color: @transfer-item-color_disabled;
        background-color: @transfer-item-color-bg_disabled;
        cursor: not-allowed;
      }

      &:not(&-disabled):hover {
        color: @transfer-item-color_hover;
        background-color: @transfer-item-color-bg_hover;
      }

      .@{prefix}-checkbox {
        width: 100%;
        height: 100%;

        &-text {
          color: inherit;
        }
      }

      /*********************************************
       * Style of draggable items
       ********************************************/
      &-draggable:first-child {
        margin-top: @transfer-item-draggable-height-gap;
      }

      &-draggable:last-child {
        margin-bottom: @transfer-item-draggable-height-gap;
      }

      &-draggable::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        height: @transfer-item-draggable-height-gap;
        border-radius: ($height / 2);
      }

      &-gap-bottom::before {
        bottom: -@transfer-item-draggable-height-gap;
        background-color: @transfer-item-draggable-color-bg-gap;
      }

      &-gap-top::before {
        top: -@transfer-item-draggable-height-gap;
        background-color: @transfer-item-draggable-color-bg-gap;
      }

      &-dragging {
        background-color: @transfer-item-draggable-color-bg_dragging !important;
        color: @transfer-item-draggable-color_dragging !important;
      }

      &-dragged {
        animation: ~'@{prefix}-transfer-drag-item-blink' 0.4s;
        animation-timing-function: @transition-timing-function-linear;
      }
    }

    & &-icon-clear {
      margin-left: 8px;
    }

    & &-icon-clear,
    & &-item-icon-remove {
      cursor: pointer;
      font-size: @transfer-font-size-icon;
      color: @transfer-color-icon;

      &:hover::before {
        background-color: @transfer-color-bg-icon;
      }

      &:focus-visible::before {
        box-shadow: 0 0 0 2px @transfer-color-icon-box-shadow;
      }
    }

    .@{prefix}-list {
      display: flex;
      flex-direction: column;
      height: 100%;
      border-radius: 0;

      &-content {
        flex: 1;
        overflow-y: auto;
      }

      &-footer {
        display: flex;
        align-items: center;
        position: relative;
        box-sizing: border-box;
        height: @transfer-height-footer;
        padding: 0 @transfer-padding-horizontal-footer;
      }

      .@{prefix}-pagination {
        position: absolute;
        top: 50%;
        right: @transfer-padding-horizontal-footer;
        margin: 0;
        transform: translateY(-50%);

        &-jumper-input {
          width: @transfer-pagination-width-input;
        }

        &-jumper-separator {
          padding: 0 @transfer-pagination-gap-separator;
        }
      }
    }

    .@{prefix}-checkbox {
      padding-left: 6px;

      &-wrapper {
        display: inline;
      }

      .@{prefix}-icon-hover:hover::before {
        background-color: @transfer-color-bg-icon;
      }
    }
  }

  &-operations {
    padding: 0 @transfer-operation-padding-horizontal;

    .@{prefix}-btn {
      display: block;

      &:last-child {
        margin-top: @transfer-operation-gap-buttons;
      }
    }

    &-words {
      .@{prefix}-btn {
        width: 100%;
        padding: 0 12px;
        text-align: left;
      }
    }
  }

  &-simple {
    .@{transfer-prefix-cls}-view-source {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: none;
    }

    .@{transfer-prefix-cls}-view-target {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  &-disabled {
    .@{transfer-prefix-cls}-view-header {
      color: @transfer-item-color_disabled;
    }
  }
}

@keyframes ~'@{prefix}-transfer-drag-item-blink' {
  0% {
    background-color: @transfer-item-draggable-color_blink;
  }

  100% {
    background-color: transparent;
  }
}

.@{transfer-prefix-cls}-rtl {
  direction: rtl;

  .@{transfer-prefix-cls}-view {
    &-search {
      padding: @transfer-search-padding-top @transfer-search-padding-left
        @transfer-search-padding-bottom @transfer-search-padding-right;
    }

    &-header > *:first-child,
    &-item &-item-content {
      &:not(:last-child) {
        margin-right: 0;
        margin-left: 8px;
      }
    }

    &-header-unit {
      margin-left: 2px;
      margin-right: 0;
    }

    &-icon-clear {
      margin-right: 8px;
      margin-left: 0;
    }

    .@{prefix}-list {
      .@{prefix}-pagination {
        right: initial;
        left: @transfer-padding-horizontal-footer;
      }
    }

    .@{prefix}-checkbox {
      padding-left: 0;
      padding-right: 6px;
    }
  }

  .@{transfer-prefix-cls}-operations {
    &-words {
      .@{prefix}-btn {
        text-align: right;
      }
    }
  }

  &.@{transfer-prefix-cls}-simple {
    .@{transfer-prefix-cls}-view-source {
      border-right: @transfer-border-width solid @transfer-border-color;
      border-left: none;
    }
  }
}


/********** Transfer end ***************/
    


/********** Tree  ***************/



@tree-color-title-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@tree-color-title-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@tree-color-title-text_active: @color-primary-6;
@tree-color-title-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@tree-color-title-text_active_disabled: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@tree-color-title-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@tree-color-title-bg_highlight: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@tree-color-title-text_highlight: var(~'@{arco-cssvars-prefix}-color-text-1');
@tree-color-title-bg_dragging: var(~'@{arco-cssvars-prefix}-color-fill-1');
@tree-color-title-text_dragging: var(~'@{arco-cssvars-prefix}-color-text-4');

@tree-color-loading-icon: @color-primary-6;
@tree-color-switcher-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@tree-color-drag-icon: @color-primary-6;
@tree-node-border-radius: @radius-small;
@tree-margin-checkbox-right: @spacing-5;
@tree-margin-switcher-icon-right: @spacing-5;
@tree-margin-custom-icon-right: @spacing-5;
@tree-padding-title-horizontal: @spacing-2;
@tree-spacing-drag-icon-right: @spacing-6;
@tree-spacing-drag-icon-text: @spacing-22;

@tree-draggable-color-gap-bg: @color-primary-6;
@tree-draggable-size-gap-height: 2px;
@tree-showline-color-line-bg: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@tree-showline-color-plus-icon-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@tree-showline-color-plus-icon-border: @color-transparent;
@tree-showline-plus-icon-border-width: @border-1;
@tree-showline-size-plus-icon-stroke: 2px;
@tree-showline-size-plus-icon-width: 6px;
@tree-showline-size-line-width: @border-1;
@tree-showline-style-line: @border-solid;
@tree-showline-size-switcher-icon: 14px;
@tree-showline-spacing-line-vertical: @spacing-2;
@tree-showline-border-plus-icon-radius: @radius-small;

@tree-size-mini-icon-size: @size-3;
@tree-size-small-icon-size: @size-3;
@tree-size-default-icon-size: @size-3;
@tree-size-large-icon-size: @size-3;
@tree-size-expand-icon-bg_hover: @size-4;

@tree-size-mini-font-size: @font-size-body-1;
@tree-size-small-font-size: @font-size-body-3;
@tree-size-default-font-size: @font-size-body-3;
@tree-size-large-font-size: @font-size-body-3;

@tree-size-mini-line-height: @size-mini;
@tree-size-small-line-height: @size-small;
@tree-size-default-line-height: @size-default;
@tree-size-large-line-height: @size-large;

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


@tree-prefix-cls: ~'@{prefix}-tree';
@tree-node-prefix-cls: ~'@{prefix}-tree-node';

/******* icon ******/

.icon-hover(@tree-node-prefix-cls, @tree-size-default-icon-size, @tree-size-expand-icon-bg_hover);

.getLinePos(@size) {
  top: (@size / 2) + (@tree-showline-size-switcher-icon / 2) + @tree-showline-spacing-line-vertical;
  bottom: min(
    -((@size / 2) - (@tree-showline-size-switcher-icon / 2) - @tree-showline-spacing-line-vertical),
    0
  );
}

.getIndentLinePos(@size) {
  top: @tree-showline-spacing-line-vertical -
    ((@size / 2) - (@tree-showline-size-switcher-icon / 2));
  // 计算：距离上一节点的图标和下一节点的图标都是 @tree-showline-spacing-line-vertical
  bottom: min(
    -((@size / 2) - (@tree-showline-size-switcher-icon / 2) - @tree-showline-spacing-line-vertical),
    0
  );
}

.@{tree-node-prefix-cls} {
  &-switcher {
    font-size: @tree-size-default-icon-size;
    color: @tree-color-switcher-icon;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    position: relative;
    margin-right: @tree-margin-switcher-icon-right;
    height: @tree-size-default-line-height;
    width: @tree-size-default-icon-size;
    flex-shrink: 0;

    &-icon {
      position: relative;
      margin: 0 auto;

      svg {
        transform: rotate(-90deg);
        position: relative;
        transition: transform @transition-duration-2 @transition-timing-function-standard;
      }
    }
  }

  &-expanded &-switcher-icon svg,
  &-is-leaf &-switcher-icon svg {
    transform: rotate(0);
  }

  &-drag-icon {
    color: @tree-color-drag-icon;
    opacity: 0;
    margin-left: @tree-spacing-drag-icon-text;
  }

  // 自定义icon
  &-custom-icon {
    font-size: inherit;
    cursor: pointer;
    user-select: none;
    margin-right: @tree-margin-custom-icon-right;
  }

  .@{prefix}-icon-loading {
    color: @tree-color-loading-icon;
  }

  &-minus-icon,
  &-plus-icon {
    cursor: pointer;
    background: @tree-showline-color-plus-icon-bg;
    border-radius: @tree-showline-border-plus-icon-radius;
    position: relative;
    display: block;
    width: @tree-showline-size-switcher-icon;
    height: @tree-showline-size-switcher-icon;
    box-sizing: border-box;
    border: @tree-showline-plus-icon-border-width solid @tree-showline-color-plus-icon-border;

    &::after {
      content: '';
      position: absolute;
      display: block;
      color: @tree-color-switcher-icon;
      width: @tree-showline-size-plus-icon-width;
      height: @tree-showline-size-plus-icon-stroke;
      background-color: @tree-color-switcher-icon;
      border-radius: 0.5px;
      top: 50%;
      left: 50%;
      margin-top: -(@tree-showline-size-plus-icon-stroke / 2);
      margin-left: -(@tree-showline-size-plus-icon-width / 2);
    }
  }

  &-plus-icon::before {
    content: '';
    border-radius: 0.5px;
    position: absolute;
    display: block;
    color: @tree-color-switcher-icon;
    height: @tree-showline-size-plus-icon-width;
    width: @tree-showline-size-plus-icon-stroke;
    background-color: @tree-color-switcher-icon;
    left: 50%;
    margin-left: -(@tree-showline-size-plus-icon-stroke / 2);
    top: 50%;
    margin-top: -(@tree-showline-size-plus-icon-width / 2);
  }
}

/******* tree ***********/
.@{tree-prefix-cls} {
  color: @tree-color-title-text;

  .@{prefix}-checkbox {
    margin-right: @tree-margin-checkbox-right;
    padding-left: 0;
    line-height: @tree-size-default-line-height;
  }

  &-node {
    padding-left: (@tree-size-expand-icon-bg_hover / 2) - (@tree-size-default-icon-size / 2);
    color: @tree-color-title-text;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    line-height: @line-height-base;

    &-selected &-title,
    &-selected &-title:hover {
      color: @tree-color-title-text_active;
      transition: color @transition-duration-2 @transition-timing-function-linear;
    }

    &-disabled-selectable,
    &-disabled {
      .@{tree-node-prefix-cls}-title,
      .@{tree-node-prefix-cls}-title:hover {
        background: none;
        color: @tree-color-title-text_disabled;
        cursor: not-allowed;
      }
    }

    &-disabled&-selected &-title {
      color: @tree-color-title-text_active_disabled;
    }
  }

  &-node-title-block {
    flex: 1;
    box-sizing: content-box;

    .@{tree-node-prefix-cls}-drag-icon {
      position: absolute;
      right: @tree-spacing-drag-icon-right;
      margin-left: unset;
    }
  }

  &-node-indent {
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
  }

  &-node-indent-block {
    display: inline-block;
    width: @tree-size-default-icon-size;
    margin-right: @tree-margin-switcher-icon-right;
    height: 100%;
    position: relative;
    vertical-align: top;
  }

  &-node-title {
    font-size: @tree-size-default-font-size;
    padding: (round((@tree-size-default-line-height - @line-height-base * $font-size)) / 2) 0;
    padding-left: @tree-padding-title-horizontal;
    padding-right: @tree-padding-title-horizontal;
    margin-left: -@tree-padding-title-horizontal;
    border-radius: @tree-node-border-radius;
    position: relative;
    // overflow: hidden;

    &:hover {
      background-color: @tree-color-title-bg_hover;
      color: @tree-color-title-text_hover;

      .@{tree-node-prefix-cls}-drag-icon {
        opacity: 1;
      }
    }

    // &-draggable {
    //   margin-top: @tree-draggable-size-gap-height;
    // }

    &-draggable::before {
      content: '';
      display: block;
      height: @tree-draggable-size-gap-height;
      border-radius: (@tree-draggable-size-gap-height / 2);
      left: 0;
      right: 0;
      position: absolute;
      top: 0;
    }

    &-gap-bottom::before {
      top: unset;
      bottom: 0;
      background-color: @tree-draggable-color-gap-bg;
    }

    &-gap-top::before {
      background-color: @tree-draggable-color-gap-bg;
    }

    &-highlight {
      background-color: @tree-color-title-bg_highlight;
      color: @tree-color-title-text_highlight;
    }

    &-dragging,
    &-dragging:hover {
      background-color: @tree-color-title-bg_dragging;
      color: @tree-color-title-text_dragging;
    }
  }

  // show line

  &-show-line {
    padding-left: (@tree-size-expand-icon-bg_hover / 2) - (@tree-showline-size-switcher-icon / 2);

    .@{tree-prefix-cls}-node-switcher {
      width: @tree-showline-size-switcher-icon;
      text-align: center;

      .@{prefix}-tree-node-icon-hover {
        width: 100%;
      }
    }

    .@{tree-prefix-cls}-node-indent-block {
      width: @tree-showline-size-switcher-icon;
    }

    .@{tree-prefix-cls}-node-indent-block::before {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: @tree-showline-size-line-width;
      border-left: @tree-showline-size-line-width @tree-showline-style-line
        @tree-showline-color-line-bg;
      content: '';
      box-sizing: border-box;

      .getIndentLinePos(@tree-size-default-line-height);
    }

    .@{tree-prefix-cls}-node-is-leaf:not(.@{tree-prefix-cls}-node-is-tail)
      .@{tree-prefix-cls}-node-indent::after {
      content: '';
      position: absolute;
      box-sizing: border-box;
      border-left: @tree-showline-size-line-width @tree-showline-style-line
        @tree-showline-color-line-bg;
      width: @tree-showline-size-line-width;
      right: -(@tree-showline-size-switcher-icon / 2);
      transform: translateX(50%);

      .getLinePos(@tree-size-default-line-height);
    }

    .@{tree-prefix-cls}-node-indent-block-lineless::before {
      display: none;
    }
  }
}

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

.@{tree-prefix-cls}-size-mini {
  .@{tree-prefix-cls}-node-switcher {
    height: @tree-size-mini-line-height;
  }

  .@{prefix}-checkbox {
    line-height: @tree-size-mini-line-height;
  }

  .@{tree-prefix-cls}-node-title {
    font-size: @tree-size-mini-font-size;
    line-height: 1.667;
    padding-top: (round((@tree-size-mini-line-height - $line-height * $font-size)) / 2);
    padding-bottom: $padding-top;
  }

  .@{tree-prefix-cls}-node-indent-block::before {
    .getIndentLinePos(@tree-size-mini-line-height);
  }

  .@{tree-prefix-cls}-node-is-leaf:not(.@{tree-prefix-cls}-node-is-tail)
    .@{tree-prefix-cls}-node-indent::after {
    .getLinePos(@tree-size-mini-line-height);
  }
}

.@{tree-prefix-cls}-size-small {
  .@{tree-prefix-cls}-node-switcher {
    height: @tree-size-small-line-height;
  }

  .@{prefix}-checkbox {
    line-height: @tree-size-small-line-height;
  }

  .@{tree-prefix-cls}-node-title {
    font-size: @tree-size-small-font-size;
    padding-top: round((@tree-size-small-line-height - @line-height-base * $font-size)) / 2;
    padding-bottom: $padding-top;
  }

  .@{tree-prefix-cls}-node-indent-block::before {
    .getIndentLinePos(@tree-size-small-line-height);
  }

  .@{tree-prefix-cls}-node-is-leaf:not(.@{tree-prefix-cls}-node-is-tail)
    .@{tree-prefix-cls}-node-indent::after {
    .getLinePos(@tree-size-small-line-height);
  }
}

.@{tree-prefix-cls}-size-large {
  .@{tree-prefix-cls}-node-switcher {
    height: @tree-size-large-line-height;
  }

  .@{prefix}-checkbox {
    line-height: @tree-size-large-line-height;
  }

  .@{tree-prefix-cls}-node-title {
    font-size: @tree-size-large-font-size;
    padding-top: round((@tree-size-large-line-height - @line-height-base * $font-size)) / 2;
    padding-bottom: $padding-top;
  }

  .@{tree-prefix-cls}-node-indent-block::before {
    .getIndentLinePos(@tree-size-large-line-height);
  }

  .@{tree-prefix-cls}-node-is-leaf:not(.@{tree-prefix-cls}-node-is-tail)
    .@{tree-prefix-cls}-node-indent::after {
    .getLinePos(@tree-size-large-line-height);
  }
}

.@{tree-prefix-cls}-node-list {
  overflow: hidden;
  transition: height @transition-duration-2 @transition-timing-function-standard;
}

.@{tree-prefix-cls}-rtl {
  direction: rtl;

  .@{tree-node-prefix-cls} {
    &-switcher {
      margin-left: @tree-margin-switcher-icon-right;
      margin-right: 0;

      &-icon {
        svg {
          transform: rotate(90deg);
        }
      }
    }

    &-expanded,
    &-is-leaf {
      .@{tree-node-prefix-cls}-switcher-icon svg {
        transform: rotate(0);
      }
    }

    &-custom-icon {
      margin-right: 0;
      margin-left: @tree-margin-custom-icon-right;
    }

    &-minus-icon,
    &-plus-icon {
      &::after {
        margin-left: 0;
        margin-right: -(@tree-showline-size-plus-icon-width / 2);
      }
    }

    &-plus-icon::before {
      margin-left: 0;
      margin-right: -(@tree-showline-size-plus-icon-stroke / 2);
    }
  }

  .@{prefix}-checkbox {
    padding-right: 0;
    margin-right: 0;
    margin-left: @tree-margin-checkbox-right;
  }

  .@{tree-prefix-cls}-node {
    padding-left: 0;
    padding-right: (@tree-size-expand-icon-bg_hover / 2) - (@tree-size-default-icon-size / 2);
    align-items: flex-end;

    &-title-block {
      .@{tree-node-prefix-cls}-drag-icon {
        left: @tree-spacing-drag-icon-right;
        right: initial;
        margin-right: unset;
      }
    }
  }

  &-node-indent-block {
    margin-right: 0;
    margin-left: @tree-margin-switcher-icon-right;
  }

  &-node-title {
    padding-right: @tree-padding-title-horizontal;
    padding-left: @tree-padding-title-horizontal;
    margin-left: unset;
    margin-right: -@tree-padding-title-horizontal;
  }

  &-show-line {
    padding-left: 0;
    padding-right: (@tree-size-expand-icon-bg_hover / 2) - (@tree-showline-size-switcher-icon / 2);

    .@{tree-prefix-cls}-node-indent-block::before {
      border-left: none;
      border-right: @tree-showline-size-line-width @tree-showline-style-line
        @tree-showline-color-line-bg;
    }

    .@{tree-prefix-cls}-node-is-leaf:not(.@{tree-prefix-cls}-node-is-tail)
      .@{tree-prefix-cls}-node-indent::after {
      left: -(@tree-showline-size-switcher-icon / 2);
    }
  }
}


/********** Tree end ***************/
    


/********** TreeSelect  ***************/

.fixedWidth(@width) {
  width: @width;
  min-width: @width;
  max-width: @width;
}

.icon-hover(@prefixCls, @inner-height, @bg-height) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover::before {
    width: @bg-height;
    height: @bg-height;
  }
}

.icon-hover-bg(@prefixCls, @background-color-hover) {
  .@{prefix}-icon-hover.@{prefixCls}-icon-hover:hover::before {
    background-color: @background-color-hover;
  }
}

.text-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}




/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/


/**********************************************
 * type: single / multi
 * size: mini / small / default / large
 **********************************************/
@select-size-mini-height: @size-mini;
@select-size-small-height: @size-small;
@select-size-default-height: @size-default;
@select-size-large-height: @size-large;

@select-size-mini-font-size: @font-size-body-1;
@select-size-small-font-size: @font-size-body-3;
@select-size-default-font-size: @font-size-body-3;
@select-size-large-font-size: @font-size-body-3;

@select-signal-size-mini-padding: @spacing-4;
@select-signal-size-small-padding: @spacing-6;
@select-signal-size-default-padding: @spacing-6;
@select-signal-size-large-padding: @spacing-7;

@select-multi-padding: @spacing-2;
@select-size-icon: @size-3;
@select-size-icon-bg: @size-4;

/**********************************************
 * border
 **********************************************/
@select-border-width: @border-1;
@select-border-radius: @radius-small;

/************************************************
 * status: default / disabled _ (hover / focus)
 ************************************************/
// text color
@select-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@select-color-text_focused: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-color-placeholder_default: var(~'@{arco-cssvars-prefix}-color-text-3');
@select-color-placeholder_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@select-color-placeholder_focused: var(~'@{arco-cssvars-prefix}-color-text-3');

// icon color
@select-color-icon_default: var(~'@{arco-cssvars-prefix}-color-text-2');
@select-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@select-color-icon_focused: var(~'@{arco-cssvars-prefix}-color-text-2');
@select-color-icon-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// bg color with hover & focus
@select-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
@select-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@select-color-bg_default_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@select-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@select-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@select-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@select-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@select-color-bg_disabled_hover: @select-color-bg_disabled;

// border color with hover & focus
@select-color-border_default: @color-transparent;
@select-color-border_default_hover: @color-transparent;
@select-color-border_default_focus: @color-primary-6;
@select-color-border_error: @color-transparent;
@select-color-border_error_hover: @color-transparent;
@select-color-border_error_focus: @color-danger-6;
@select-color-border_disabled: @color-transparent;
@select-color-border_disabled_hover: @select-color-border_disabled;
// shadow
@select-shadow-distance_default_focus: @shadow-distance-none;
@select-shadow-distance_error_focus: @shadow-distance-none;
@select-color-shadow_default_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@select-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');

/**********************************************
 * Popup Box
 **********************************************/
@select-popup-max-height: @size-50;
@select-popup-border-radius: @radius-medium;
@select-popup-padding-vertical: @spacing-2;
@select-popup-padding-horizontal: @spacing-none;
@select-popup-font-size: @font-size-body-3;
@select-popup-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@select-popup-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
@select-popup-box-shadow: @shadow2-down;

/**********************************************
 * Popup Options
 * status: default / disabled / selected / hover
 **********************************************/
@select-popup-option-height: @size-9;
@select-popup-option-font-weight_selected: @font-weight-500;
@select-signal-popup-option-padding-horizontal: @spacing-6;
@select-multi-popup-option-padding-horizontal: @spacing-2;
@select-popup-option-border-radius: @border-radius-none;

@select-popup-option-color-bg_default: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@select-popup-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@select-popup-option-color-bg_selected: var(~'@{arco-cssvars-prefix}-color-bg-popup');
@select-popup-option-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-popup');

@select-popup-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@select-popup-option-color-hightlight-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@select-popup-option-font-hightlight-weight: @font-weight-500;

// option group title
@select-popup-group-title-height: @size-5;
@select-popup-group-title-padding-horizontal: @spacing-6;
@select-popup-group-title-padding-top: @spacing-4;
@select-popup-group-title-font-size: @font-size-body-1;
@select-popup-group-title-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');

// addon
@select-addon-padding-horizontal: @spacing-6;
@select-color-addon-bg: @select-color-bg_default;
@select-color-addon-border: var(~'@{arco-cssvars-prefix}-color-border-2');
@select-color-addon-border_default: @color-transparent;
@select-border-addon-separator-width: @border-1;
@select-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// warning
@select-color-bg_warning_focus: @input-color-bg_warning_focus;
@select-color-bg_warning: @input-color-bg_warning;
@select-color-bg_warning_hover: @input-color-bg_warning_hover;
@select-color-border_warning: @input-color-border_warning;
@select-color-border_warning_hover: @input-color-border_warning_hover;
@select-color-border_warning_focus: @input-color-border_warning_focus;
@select-color-shadow_warning_focus: @input-color-shadow_warning_focus;
@select-shadow-distance_warning_focus: @select-shadow-distance_error_focus;




/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/


/**********************************************
 * size: mini / small / default / large
 **********************************************/
@input-tag-size-mini-height: @size-mini;
@input-tag-size-small-height: @size-small;
@input-tag-size-default-height: @size-default;
@input-tag-size-large-height: @size-large;

@input-tag-size-mini-tag-height: @size-5;
@input-tag-size-small-tag-height: @size-5;
@input-tag-size-default-tag-height: @size-6;
@input-tag-size-large-tag-height: @size-7;

@input-tag-size-mini-font-size: @font-size-body-1;
@input-tag-size-small-font-size: @font-size-body-3;
@input-tag-size-default-font-size: @font-size-body-3;
@input-tag-size-large-font-size: @font-size-title-1;

@input-tag-size-mini-padding_no_tag: @spacing-4;
@input-tag-size-small-padding_no_tag: @spacing-6;
@input-tag-size-default-padding_no_tag: @spacing-6;
@input-tag-size-large-padding_no_tag: @spacing-7;

/****************************************************
 * status: default / error / disabled _ (hover / focus)
 ****************************************************/
// text color
@input-tag-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-text_error: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// icon color
@input-tag-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-tag-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-tag-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// border color with focus & hover
@input-tag-color-border_default: @color-transparent;
@input-tag-color-border_default_hover: @color-transparent;
@input-tag-color-border_default_focus: @color-primary-6;
@input-tag-color-border_error: @color-transparent;
@input-tag-color-border_error_hover: @color-transparent;
@input-tag-color-border_error_focus: @color-danger-6;
@input-tag-color-border_disabled: @color-transparent;
@input-tag-color-border_disabled_hover: @input-tag-color-border_disabled;
@input-tag-color-border_disabled_focus: @input-tag-color-border_disabled;

// bg color with focus & hover
@input-tag-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-color-bg_default_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-color-bg_error: @color-danger-1;
@input-tag-color-bg_error_hover: @color-danger-2;
@input-tag-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-color-bg_disabled_hover: @input-tag-color-bg_disabled;

@input-tag-color-shadow_default_focus: @color-primary-2;
@input-tag-color-shadow_error_focus: @color-danger-2;
@input-tag-size-shadow_error_focus: @shadow-distance-none;
@input-tag-size-shadow_default_focus: @shadow-distance-none;

// input box
@input-tag-tag-margin-right: @spacing-2;
@input-tag-tag-margin-vertical: @spacing-1;
@input-tag-padding-horizontal: @spacing-2;
@input-tag-border-radius: @radius-small;
@input-tag-border-width: @border-1;
@input-tag-size-icon-clear: @size-3;
@input-tag-size-icon-clear_hover: @size-5;

// tags
@input-tag-tag-font-size: @font-size-body-1;
@input-tag-tag-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-tag-tag-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-tag-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-tag-tag-color-border_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-remove-icon-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-tag-tag-remove-icon-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-3');

// warning
@input-tag-color-text_warning: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-tag-color-border_warning: @input-color-border_warning;
@input-tag-color-border_warning_hover: @input-color-border_warning_hover;
@input-tag-color-border_warning_focus: @input-color-border_warning_focus;
@input-tag-color-bg_warning: @input-color-bg_warning;
@input-tag-color-bg_warning_hover: @input-color-bg_warning_hover;
@input-tag-color-bg_warning_focus: @input-color-bg_warning_focus;
@input-tag-color-shadow_warning_focus: @input-color-shadow_warning_focus;
@input-tag-size-shadow_warning_focus: @input-size-shadow_warning_focus;

// addon
@input-tag-addon-padding-horizontal: @spacing-6;
@input-tag-color-addon-bg: @input-tag-color-bg_default;
@input-tag-color-addon-border: var(~'@{arco-cssvars-prefix}-color-border-2');
@input-tag-color-addon-border_default: @color-transparent;
@input-tag-border-addon-separator-width: @border-1;
@input-tag-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');


@input-tag-prefix-cls: ~'@{prefix}-input-tag';

.input-tag-input-element-padding(@paddingLeft) {
  .@{input-tag-prefix-cls}-has-placeholder {
    input,
    .@{input-tag-prefix-cls}-input-mirror {
      box-sizing: border-box;
      padding-left: @paddingLeft;
    }
  }
}

.input-tag-input-element-padding-rtl(@paddingRight) {
  .@{input-tag-prefix-cls}-has-placeholder {
    input,
    .@{input-tag-prefix-cls}-input-mirror {
      padding-left: 0;
      padding-right: @paddingRight;
    }
  }
}


// used by form
.color(@prefixCls, @status) {
  @suffix: if(@status = default, ~'', ~'-@{status}');

  .@{prefixCls}@{suffix} {
    .@{prefixCls}-view {
      & when (@status = default) , (@status = disabled) {
        color: ~'@{select-color-text_@{status}}';
      }

      background-color: ~'@{select-color-bg_@{status}}';
      border: 1px solid ~'@{select-color-border_@{status}}';
    }

    &:hover {
      .@{prefixCls}-view {
        background-color: ~'@{select-color-bg_@{status}_hover}';
        border-color: ~'@{select-color-border_@{status}_hover}';
      }
    }

    &.@{prefixCls}-focused when not (@status = disabled) {
      .@{prefixCls}-view {
        color: @select-color-text_focused;
        background-color: ~'@{select-color-bg_@{status}_focus}';
        border-color: ~'@{select-color-border_@{status}_focus}';
        box-shadow: 0 0 0 ~'@{select-shadow-distance_@{status}_focus}' ~'@{select-color-shadow_@{status}_focus}';
      }
    }

    .@{prefixCls}-suffix-icon,
    .@{prefixCls}-loading-icon,
    .@{prefixCls}-search-icon,
    .@{prefixCls}-clear-icon,
    .@{prefixCls}-arrow-icon,
    .@{prefixCls}-expand-icon {
      & when (@status = default) , (@status = disabled) {
        color: ~'@{select-color-icon_@{status}}';
      }
    }
  }

  .@{prefixCls}-no-border {
    .@{prefixCls}-view {
      border: none !important;
      background: none !important;
    }
  }
}

.select-view(@prefixCls) {
  @tail-icon-position-right: 10px;

  .size(@size) {
    @ref-font-size: ~'select-size-@{size}-font-size';
    @ref-height: ~'select-size-@{size}-height';
    @ref-padding: ~'select-signal-size-@{size}-padding';

    @font-size: @@ref-font-size;
    @height: @@ref-height;
    @padding: @@ref-padding - @select-border-width;
    @multi-padding: @select-multi-padding - @select-border-width;

    .@{prefixCls} {
      &-size-@{size}&-multiple {
        .@{prefixCls}-view {
          height: auto;
          font-size: @font-size;
          padding: 0 @multi-padding;
          line-height: 0;
        }

        .input-tag-input-element-padding(@padding - @multi-padding);

        .@{prefixCls}-suffix {
          padding-right: @padding - @multi-padding;
        }

        input {
          font-size: @font-size;
        }
      }

      &-size-@{size}&-single {
        .@{prefixCls}-view {
          height: @height;
          line-height: $height - @select-border-width * 2;
          font-size: @font-size;
          padding: 0 @padding;
        }

        input {
          font-size: @font-size;
        }
      }

      &-size-@{size}&-multiple {
        .@{prefixCls}-view-with-prefix {
          padding-left: @padding;
        }
      }
    }
  }

  .color(@prefixCls, default);
  .color(@prefixCls, error);
  .color(@prefixCls, warning);
  .color(@prefixCls, disabled);

  .size(mini);
  .size(small);
  .size(default);
  .size(large);

  .@{prefixCls} {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    cursor: pointer;

    &-view {
      display: flex;
      position: relative;
      box-sizing: border-box;
      width: 100%;
      border-radius: @select-border-radius;
      outline: none;
      user-select: none;
      text-align: left;
      transition: all @transition-duration-1 @transition-timing-function-linear, padding 0s linear;

      input {
        color: inherit;
        cursor: inherit;

        &::placeholder {
          color: @select-color-placeholder_default;
        }

        // since Chrome 116 <input disabled /> won't trigger onClick callback
        // remove all events of disabled <input /> to make sure Trigger works correctly
        &[disabled] {
          pointer-events: none;
        }
      }
    }

    .hide-input-element() {
      // 需要在隐藏 input 的同时保证其能被 Tab 键聚焦
      // 故不要用 display: none / visibility: hidden / width: 0
      // width 设置为 0，会导致在火狐浏览器下触发 onFocus 之后不能立刻触发 onClick
      // https://github.com/arco-design/arco-design/issues/1232
      opacity: 0;
      position: absolute;
      // 避免绝对定位的元素位于所有同级节点的最上层，遮挡其他元素的鼠标操作（例如被 Tooltip 包裹的 value 文本）
      // 不要使用 pointer-events: none，会导致火狐浏览器下下拉弹窗需要点击两次才可弹出
      // https://github.com/arco-design/arco-design/issues/2127
      z-index: -1;
    }

    &-multiple,
    &-show-search {
      cursor: text;
    }

    &-disabled {
      cursor: not-allowed;

      .@{prefixCls}-view input::placeholder {
        color: @select-color-placeholder_disabled;
      }
    }

    &-single &-view {
      // Keep forward compatibility
      // Do NOT move this section under &-selector
      &-input {
        box-sizing: border-box;
        width: 100%;
        padding: 0;
        border: none;
        outline: none;
        background: transparent;
        .text-ellipsis();
      }

      &-selector {
        position: relative;
        display: inline-flex;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;

        // Keep forward compatibility
        // Do NOT move this section out of &-selector
        .@{prefixCls}-view-input {
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1;
        }

        .@{prefixCls}-view-value-mirror {
          opacity: 0;
        }
      }

      &-value,
      &-value-mirror {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        .text-ellipsis();

        // Do NOT remove this, it may cause baseline-changing of select-view
        &::after {
          content: '.';
          font-size: 0;
          line-height: 0;
          visibility: hidden;
        }
      }

      .@{prefixCls}-hidden {
        .hide-input-element();
      }
    }

    &-multiple {
      vertical-align: top;

      .@{prefixCls}-view {
        padding: 0 @select-multi-padding;
        line-height: 0;
      }

      .@{prefixCls}-view-with-prefix {
        padding-left: @select-signal-size-default-padding;
      }

      .@{prefix}-input-tag {
        flex: 1;
        padding: 0;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        overflow: hidden;
      }

      .@{prefix}-tag {
        max-width: 100%;
      }

      // 多选的空白输入框在已存在选择项并且未聚焦时隐藏，避免导致不必要的换行
      &:not(.@{prefixCls}-focused) {
        .@{prefix}-input-tag input:not(:first-child)[value=''] {
          .hide-input-element();
        }
      }
    }

    &-prefix {
      display: flex;
      align-items: center;
      margin-right: 12px;
      white-space: nowrap;
      color: @select-color-icon_default;
    }

    &-suffix {
      display: flex;
      align-items: center;
      margin-left: 4px;
    }

    &-suffix-icon,
    &-search-icon,
    &-loading-icon,
    &-expand-icon,
    &-clear-icon {
      font-size: @select-size-icon;
      transition: all @transition-duration-1 @transition-timing-function-linear;
    }

    &-arrow-icon {
      font-size: @select-size-icon;
    }

    &-open &-arrow-icon svg {
      transform: rotateZ(180deg);
    }

    & &-clear-icon {
      display: none;
      cursor: pointer;

      > svg {
        position: relative;
        transition: all @transition-duration-1 @transition-timing-function-linear;
      }
    }

    &:hover &-clear-icon {
      display: block;

      & ~ * {
        display: none;
      }
    }

    &-wrapper {
      display: inline-flex;
      align-items: stretch;
      width: 100%;

      .@{prefixCls} {
        min-width: 0; // 避免 .arco-select 宽度超出 .arco-select-wrapper
      }

      .@{prefixCls}:not(.@{prefixCls}-focused) {
        &:not(:first-child) .@{prefixCls}-view {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }

        &:not(:last-child) .@{prefixCls}-view {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }

    // &-addafter,
    &-addbefore {
      display: flex;
      align-items: center;
      padding: 0 @select-addon-padding-horizontal;
      color: @select-color-addon-text;
      background-color: @select-color-addon-bg;
      white-space: nowrap;
      border: 1px solid @select-color-addon-border_default;
    }

    &-addbefore {
      border-right: @select-border-addon-separator-width solid @select-color-addon-border;
      border-top-left-radius: @select-border-radius;
      border-bottom-left-radius: @select-border-radius;
    }

    // &-addafter {
    //   border-left: @select-border-addon-separator-width solid @select-color-addon-border;
    //   border-top-right-radius: @select-border-radius;
    //   border-bottom-right-radius: @select-border-radius;
    // }
  }
}

.select-view-rtl(@prefixCls, @prefixClsRtl) {
  .size(@size) {
    @ref-padding: ~'select-signal-size-@{size}-padding';
    @padding: @@ref-padding - @select-border-width;
    @multi-padding: @select-multi-padding - @select-border-width;

    .@{prefixClsRtl}.@{prefixCls}-size-@{size}.@{prefixCls}-multiple {
      .@{prefixCls}-view-with-prefix {
        padding-left: 0;
        padding-right: @padding;
      }

      .@{prefixCls}-suffix {
        padding-right: 0;
        padding-left: @padding - @multi-padding;
      }

      .input-tag-input-element-padding-rtl(@padding - @multi-padding);
    }
  }

  .size(mini);
  .size(small);
  .size(default);
  .size(large);

  .@{prefixCls}-wrapper-rtl .@{prefixCls}-addbefore {
    border-right: unset;
    border-left: @select-border-addon-separator-width solid @select-color-addon-border;
  }

  .@{prefixClsRtl} {
    .@{prefixCls}-view {
      text-align: right;
    }

    .@{prefixCls}-multiple {
      .@{prefixCls}-view-with-prefix {
        padding-left: 0;
        padding-right: @select-signal-size-default-padding;
      }
    }

    .@{prefixCls}-prefix {
      margin-right: 0;
      margin-left: 12px;
    }

    .@{prefixCls}-suffix {
      margin-left: 0;
      margin-right: 4px;
    }
  }
}



@tree-select-padding-popup-left: @spacing-5;
@tree-select-padding-popup-right: @spacing-2;
@tree-select-padding-popup-vertical: @spacing-2;


@tree-prefix-cls: ~'@{prefix}-tree';
@tree-select-prefix-cls: ~'@{prefix}-tree-select';
@tree-select-prefix-cls-rtl: ~'@{prefix}-tree-select-rtl';

.select-view(@tree-select-prefix-cls);

.@{tree-select-prefix-cls} {
  &-popup {
    box-sizing: border-box;
    border: 1px solid @select-popup-color-border;
    border-radius: @select-popup-border-radius;
    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');
    box-shadow: @select-popup-box-shadow;
    padding: @tree-select-padding-popup-vertical 0;
    padding-left: @tree-select-padding-popup-left;
    padding-right: @tree-select-padding-popup-right;
    max-height: @select-popup-max-height;
    overflow: auto;

    .@{tree-prefix-cls}-node {
      padding-left: 0;
    }
  }

  &-highlight {
    font-weight: @font-weight-500;
  }
}

.@{tree-select-prefix-cls}-rtl {
  direction: rtl;

  &-popup {
    padding-left: @tree-select-padding-popup-right;
    padding-right: @tree-select-padding-popup-left;
  }
}

.select-view-rtl(@tree-select-prefix-cls,@tree-select-prefix-cls-rtl);


/********** TreeSelect end ***************/
    


/********** Trigger  ***************/



@trigger-color-arrow-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');
@trigger-size-arrow-width: @size-2;
@trigger-border-arrow-radius: 2px;


@trigger-prefix-cls: ~'@{prefix}-trigger';

.@{trigger-prefix-cls} {
  position: absolute;
  z-index: @z-index-popup;
  backface-visibility: hidden; // Prevent shaking

  &-arrow {
    background-color: @trigger-color-arrow-bg;
    content: '';
    height: @trigger-size-arrow-width;
    width: @trigger-size-arrow-width;
    position: absolute;
    display: block;
    box-sizing: border-box;
    transform: rotate(45deg);
    transform-origin: 50% 50% 0;
    z-index: -1;
  }

  &[trigger-placement='top'] > &-arrow-container &-arrow,
  &[trigger-placement='tl'] > &-arrow-container &-arrow,
  &[trigger-placement='tr'] > &-arrow-container &-arrow {
    bottom: -(@trigger-size-arrow-width / 2);
    margin-left: -(@trigger-size-arrow-width / 2);
    border-top: none;
    border-left: none;
    border-bottom-right-radius: @trigger-border-arrow-radius;
  }

  &[trigger-placement='bottom'] > &-arrow-container &-arrow,
  &[trigger-placement='bl'] > &-arrow-container &-arrow,
  &[trigger-placement='br'] > &-arrow-container &-arrow {
    top: -(@trigger-size-arrow-width / 2);
    margin-left: -(@trigger-size-arrow-width / 2);
    border-bottom: none;
    border-right: none;
    border-top-left-radius: @trigger-border-arrow-radius;
  }

  &[trigger-placement='left'] > &-arrow-container &-arrow,
  &[trigger-placement='lt'] > &-arrow-container &-arrow,
  &[trigger-placement='lb'] > &-arrow-container &-arrow {
    right: -(@trigger-size-arrow-width / 2);
    margin-top: -(@trigger-size-arrow-width / 2);
    border-left: none;
    border-bottom: none;
    border-top-right-radius: @trigger-border-arrow-radius;
  }

  &[trigger-placement='right'] > &-arrow-container &-arrow,
  &[trigger-placement='rt'] > &-arrow-container &-arrow,
  &[trigger-placement='rb'] > &-arrow-container &-arrow {
    left: -(@trigger-size-arrow-width / 2);
    margin-top: -(@trigger-size-arrow-width / 2);
    border-top: none;
    border-right: none;
    border-bottom-left-radius: @trigger-border-arrow-radius;
  }

  &-rtl {
    direction: rtl;
  }
}


/********** Trigger end ***************/
    


/********** Typography  ***************/



@typography-font-size-h1: 36px;
@typography-font-size-h2: 32px;
@typography-font-size-h3: 28px;
@typography-font-size-h4: 24px;
@typography-font-size-h5: 20px;
@typography-font-size-h6: 16px;

@typography-heading-margin-top: 1em;
@typography-heading-margin-bottom: 0.5em;
@typography-heading-font-weight: @font-weight-500;

@typography-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');

@typography-text-color-text-primary: @color-primary-6;
@typography-text-color-text-secondary: var(~'@{arco-cssvars-prefix}-color-text-2');
@typography-text-color-text-success: @color-success-6;
@typography-text-color-text-warning: @color-warning-6;
@typography-text-color-text-error: @color-danger-6;
@typography-text-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@typography-text-color-bg-mark: rgb(var(~'@{arco-cssvars-prefix}-yellow-4'));
@typography-text-font-weight-bold: @font-weight-500;

@typography-text-color-code: var(~'@{arco-cssvars-prefix}-color-text-2');
@typography-text-color-code-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@typography-text-color-code-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
@typography-text-padding-code-vertical: 2px;
@typography-text-padding-code-horizontal: 8px;
@typography-text-margin-code-horizontal: 2px;

@typography-paragraph-line-height: @line-height-base;
@typography-paragraph-line-height-close: 1.3;

// Operations
@typography-operation-margin-left: @spacing-1;
@typography-color-icon-copy: var(~'@{arco-cssvars-prefix}-color-text-2');
@typography-color-bg-icon-copy: @color-transparent;
@typography-color-icon-copy_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
@typography-color-bg-icon-copy_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@typography-color-icon-copy_copied: @color-success-6;

@typography-color-icon-edit: var(~'@{arco-cssvars-prefix}-color-text-2');
@typography-color-bg-icon-edit: @color-transparent;
@typography-color-icon-edit_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
@typography-color-bg-icon-edit_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');

@typography-color-expand-text: @color-primary-6;
@typography-color-expand-text_hover: @color-primary-5;

@typography-color-blockquote-border-width: 2px;
@typography-color-blockquote-border-left: var(~'@{arco-cssvars-prefix}-color-neutral-6');
@typography-color-blockquote-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@typography-color-box-shadow: var(~'@{arco-cssvars-prefix}-color-primary-light-3');

@ellipsis-action-text-color: @color-primary-6;
@ellipsis-action-text-color_hover: @color-primary-5;



/******** 基础配置项 end *******/

// 背景色
@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
@input-color-addon-bg: @input-color-bg;

// 边框色
@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@input-border-addon-separator-width: @border-1;
@input-color-border_focus: @color-primary-6;
@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
@input-size-shadow_focus: @shadow-distance-none;
@input-color-addon-border_default: @color-transparent;

// 文本色
@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

// 默认前后标签文本色
@input-color-addon-text: var(~'@{arco-cssvars-prefix}-color-text-1');

// textarea  color
@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');

/******** 基础配置项 end *******/

/******** 高级配置项 *******/

// 错误状态
@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@input-color-bg_error_hover: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-color-bg_error_focus: @input-color-bg_focus;
@input-color-border_error_focus: @color-danger-6;
@input-color-shadow_error_focus: var(~'@{arco-cssvars-prefix}-color-danger-light-2');
@input-size-shadow_error_focus: @shadow-distance-none;

// warning 状态
@input-color-bg_warning: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
@input-color-bg_warning_hover: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-color-bg_warning_focus: @input-color-bg_focus;
@input-color-border_warning_focus: @color-warning-6;
@input-color-shadow_warning_focus: var(~'@{arco-cssvars-prefix}-color-warning-light-2');
@input-size-shadow_warning_focus: @shadow-distance-none;

// 圆角
@input-border-radius: @radius-small;

// 不同尺寸
@input-size-default-height: @size-default;
@input-size-mini-height: @size-mini;
@input-size-small-height: @size-small;
@input-size-large-height: @size-large;

// 边框尺寸以及边框色
@input-border-width: @border-1;
@input-color-border: @color-transparent;
@input-color-border_disabled: @color-transparent;
@input-color-border_hover: @color-transparent;
@input-color-border_error: @color-transparent;
@input-color-border_error_hover: @color-transparent;
@input-color-border_warning: @color-transparent;
@input-color-border_warning_hover: @color-transparent;

// 不同尺寸文字大小
@input-size-default-font-size: @font-size-body-3;
@input-size-small-font-size: @font-size-body-3;
@input-size-large-font-size: @font-size-body-3;
@input-size-mini-font-size: @font-size-body-1;
@input-font-tip-size: @font-size-body-1; // show limit word 文字色

// 不同尺寸的 suffix，addon 尺寸。
@input-size-mini-icon-suffix-size: @size-3;
@input-size-small-icon-suffix-size: 14px;
@input-size-default-icon-suffix-size: 14px;
@input-size-large-icon-suffix-size: 14px;

@input-size-mini-icon-addon-size: @size-3;
@input-size-small-icon-addon-size: 14px;
@input-size-default-icon-addon-size: 14px;
@input-size-large-icon-addon-size: 14px;

@input-size-icon-clear: @size-3;
@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');

// input search
@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@search-button-color-text: var(~'@{arco-cssvars-prefix}-color-white');
@search-size-icon: 14px;
@search-button-padding-horizontal: @spacing-4;

// 布局
@input-padding-horizontal: @spacing-6;
@input-size-mini-padding-horizontal: @spacing-4;
@input-size-small-padding-horizontal: @spacing-6;
@input-size-large-padding-horizontal: @spacing-7;
@input-spacing-clear-icon-right: @spacing-4;
@input-padding-word-limit-left: @spacing-4;

// textarea
@textarea-padding-horizontal: @spacing-6;
@textarea-padding-vertical: @spacing-2;
@textarea-font-size: @font-size-body-3;
@textarea-font-tip-size: @font-size-body-1;
@textarea-layout-tip-right: @spacing-5;
@textarea-layout-tip-bottom: @spacing-3;
@textarea-size-min-height: @size-default;
@textarea-size-icon-clear: @font-size-body-1;
@textarea-layout-top-icon-clear: @spacing-5;

// password
@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@password-size-eye-icon: @size-3;

// input.group
@input-group-border-radius_compact: @radius-small;
@input-group-border-separator-width: @border-1;
@input-group-color-separator-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');

/******** 高级配置项 end *******/


@typography-prefix-cls: ~'@{prefix}-typography';
@ellipsis-cls: ~'@{prefix}-ellipsis';

// Title
.@{typography-prefix-cls} {
  color: @typography-color-text;
  line-height: @typography-paragraph-line-height;
  word-break: break-all;
  white-space: normal;

  h1&,
  &-h1,
  h2&,
  &-h2,
  h3&,
  &-h3,
  h4&,
  &-h4,
  h5&,
  &-h5,
  h6&,
  &-h6 {
    font-weight: @typography-heading-font-weight;
    margin-top: @typography-heading-margin-top;
    margin-bottom: @typography-heading-margin-bottom;
  }

  h1&,
  &-h1 {
    font-size: @typography-font-size-h1;
    line-height: 1.23;
  }

  h2&,
  &-h2 {
    font-size: @typography-font-size-h2;
    line-height: 1.25;
  }

  h3&,
  &-h3 {
    font-size: @typography-font-size-h3;
    line-height: 1.29;
  }

  h4&,
  &-h4 {
    font-size: @typography-font-size-h4;
    line-height: 1.33;
  }

  h5&,
  &-h5 {
    font-size: @typography-font-size-h5;
    line-height: 1.4;
  }

  h6&,
  &-h6 {
    font-size: @typography-font-size-h6;
    line-height: 1.5;
  }

  div&,
  p& {
    margin-top: 0;
    margin-bottom: 1em;
  }

  &-simple-ellipsis {
    display: flex;
    align-items: flex-end;
    white-space: nowrap;
  }

  // Text
  &-primary {
    color: @typography-text-color-text-primary;
  }

  &-secondary {
    color: @typography-text-color-text-secondary;
  }

  &-success {
    color: @typography-text-color-text-success;
  }

  &-warning {
    color: @typography-text-color-text-warning;
  }

  &-error {
    color: @typography-text-color-text-error;
  }

  &-disabled {
    color: @typography-text-color-text_disabled;
    cursor: not-allowed;
  }

  & mark {
    background-color: @typography-text-color-bg-mark;
  }

  & u {
    text-decoration: underline;
  }

  & del {
    text-decoration: line-through;
  }

  & b {
    font-weight: @typography-text-font-weight-bold;
  }

  & code {
    font-size: 85%;
    color: @typography-text-color-code;
    border: 1px solid @typography-text-color-code-border;
    background-color: @typography-text-color-code-bg;
    padding: @typography-text-padding-code-vertical @typography-text-padding-code-horizontal;
    margin: 0 @typography-text-margin-code-horizontal;
    border-radius: 2px;
  }

  & blockquote {
    margin: 0;
    margin-bottom: 1em;
    border-left: @typography-color-blockquote-border-width solid
      @typography-color-blockquote-border-left;
    background-color: @typography-color-blockquote-bg;
    padding-left: 8px;
  }

  & ol,
  & ul {
    padding: 0;
    margin: 0;
  }

  & ul li,
  & ol li {
    margin-left: 20px;
  }

  & ul {
    list-style: circle;
  }

  &-spacing-close {
    line-height: @typography-paragraph-line-height-close;
  }

  // Operations
  &-operation-copy,
  &-operation-copied {
    padding: 2px;
    margin-left: @typography-operation-margin-left;
  }

  &-operation-copy {
    cursor: pointer;
    color: @typography-color-icon-copy;
    background-color: @typography-color-bg-icon-copy;
    border-radius: 2px;
    transition: background-color @transition-duration-1 @transition-timing-function-linear;

    &:hover {
      color: @typography-color-icon-copy_hover;
      background-color: @typography-color-bg-icon-copy_hover;
    }

    &:focus-visible {
      box-shadow: 0 0 0 2px @typography-color-box-shadow;
    }
  }

  &-operation-copied {
    color: @typography-color-icon-copy_copied;
  }

  &-operation-edit {
    padding: 2px;
    margin-left: @typography-operation-margin-left;
    cursor: pointer;
    color: @typography-color-icon-edit;
    background-color: @typography-color-bg-icon-edit;
    border-radius: 2px;
    transition: background-color @transition-duration-1 @transition-timing-function-linear;

    &:hover {
      color: @typography-color-icon-edit_hover;
      background-color: @typography-color-bg-icon-edit_hover;
    }

    &:focus-visible {
      box-shadow: 0 0 0 2px @typography-color-box-shadow;
    }
  }

  &-operation-expand {
    color: @typography-color-expand-text;
    margin: 0 4px;
    cursor: pointer;

    &:hover {
      color: @typography-color-expand-text_hover;
    }

    &:focus-visible {
      box-shadow: 0 0 0 2px @typography-color-box-shadow;
      border-radius: @radius-small;
    }
  }

  // edit content
  &-edit-content {
    position: relative;
    left: -(@textarea-padding-horizontal + @input-border-width);
    margin-right: -(@textarea-padding-horizontal + @input-border-width);
    margin-top: -(@textarea-padding-vertical + @input-border-width);
    margin-bottom: calc(1em - @textarea-padding-vertical - @input-border-width);
  }

  &-edit-content-textarea {
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
  }
}

.@{typography-prefix-cls}-rtl {
  direction: rtl;

  & blockquote {
    border-right: @typography-color-blockquote-border-width solid
      @typography-color-blockquote-border-left;
    padding-right: 8px;
    padding-left: 0;
  }

  & ul li,
  & ol li {
    margin-left: 0;
    margin-right: 20px;
  }

  .@{typography-prefix-cls} {
    &-operation-copy,
    &-operation-copied,
    &-operation-edit {
      margin-right: @typography-operation-margin-left;
      margin-left: 0;
    }

    &-edit-content {
      left: initial;
      right: -(@textarea-padding-horizontal + @input-border-width);
      margin-left: -(@textarea-padding-horizontal + @input-border-width);
      margin-right: 0;
    }
  }
}

.@{ellipsis-cls} {
  display: flex;
  position: relative;

  &-content {
    &.@{ellipsis-cls}-multiple::before {
      content: ' ';
      float: right;
      height: 100%;
      margin-bottom: -21px;
    }

    .@{ellipsis-cls}-action {
      display: inline-block;

      &-collapsed {
        float: right;
        clear: both;
      }
    }

    .@{ellipsis-cls}-action-text {
      color: @ellipsis-action-text-color;
      margin: 0 4px;
      cursor: pointer;

      &:hover {
        color: @ellipsis-action-text-color_hover;
      }

      //&:focus-visible {
      //  box-shadow: 0 0 0 2px @typography-color-box-shadow;
      //  border-radius: @radius-small;
      //}
    }
  }

  &-single {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &-multiple {
    display: block;
    word-break: break-all;
  }

  /* stylelint-disable */

  &-collapsed {
    display: -webkit-box;
    display: -moz-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
  }

  /* stylelint-enable */

  &-content-mirror {
    position: absolute;
    width: 100%;
    visibility: hidden;
  }
}


/********** Typography end ***************/
    


/********** Upload  ***************/



@upload-tip-color-text: var(~'@{arco-cssvars-prefix}-color-text-3');
@upload-tip-margin-top: @spacing-2;
@upload-tip-font-size: @font-size-body-1;
@upload-list-margin-top: @spacing-9;

@upload-picture-item-width: @size-20;
@upload-picture-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@upload-picture-border-radius: @radius-small;
@upload-picture-border-width: @border-1;
@upload-picture-border-style: @border-dashed;
@upload-picture-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@upload-picture-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@upload-picture-color-border_hover: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@upload-picture-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@upload-picture-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-1');
@upload-picture-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
@upload-picture-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
@upload-picture-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@upload-drag-font-size: @font-size-body-3;
@upload-drag-border-radius: @radius-small;
@upload-drag-tip-margin-top: 0;
@upload-drag-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@upload-drag-border-style: @border-dashed;
@upload-drag-border-width: @border-1;
@upload-drag-padding-vertical: 50px;
@upload-drag-margin-icon-bottom: 24px;
@upload-drag-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-1');
@upload-drag-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
@upload-drag-color-bg_active: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
@upload-drag-color-bg_disabled: @upload-drag-color-bg;
@upload-drag-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@upload-drag-color-border_active: @color-primary-6;
@upload-drag-color-border_hover: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@upload-drag-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
@upload-drag-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@upload-drag-color-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
@upload-drag-color-icon_active: @color-primary-6;
@upload-drag-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
@upload-drag-color-text_active: var(~'@{arco-cssvars-prefix}-color-text-1');
@upload-drag-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');

@upload-text-item-size-operation-icon: @size-3;
@upload-text-item-margin-top: @spacing-6;
@upload-text-item-font-size: @font-size-body-3;
@upload-text-item-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@upload-text-item-padding-left: @spacing-6;
@upload-text-item-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-1');
@upload-text-item-padding-vertical: @spacing-4;
@upload-text-item-margin-remove-icon-left: @spacing-6;
@upload-text-item-color-remove-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
@upload-text-item-color-status-icon: var(~'@{arco-cssvars-prefix}-color-white');
@upload-text-item-color-file-icon_success: @color-primary-6;
@upload-text-item-color-progress-bg_hover: rgba(var(~'@{arco-cssvars-prefix}-gray-10'), 0.2);
@upload-text-item-color-progress-bg_hover_active: @color-primary-7;
@upload-text-item-size-file-icon: @size-4;
@upload-text-item-margin-file-icon-right: @spacing-6;
@upload-text-item-color-file-icon: @color-primary-6;
@upload-text-item-padding-right: @spacing-5;
@upload-text-item-color-link: @color-link-6;
@upload-text-item-color-reupload-icon: @color-primary-6;
@upload-text-item-color-reupload-icon_hover: @color-primary-7;
@upload-text-item-size-status-icon: @size-3;
@upload-text-item-color-error-icon: @color-danger-6;
@upload-text-item-color-success-icon: @color-success-6;
@upload-text-item-border-radius: @radius-small;
@upload-text-item-margin-error-icon-left: @spacing-2;
@upload-text-item-margin-status-left: @spacing-5;
@upload-text-item-thumbnail-width: @size-10;
@upload-text-item-margin-thumbnail-right: @spacing-6;
@upload-text-item-color-text_error: @color-danger-6;
@upload-text-item-color-text_success: unset;
@upload-text-item-color-text_uploading: unset;

@upload-picture-item-margin-preview-icon-right: @spacing-8;
@upload-picture-item-size-width: @size-20;
@upload-picture-item-border-radius: @radius-small;
@upload-picture-item-margin-right: @spacing-4;
@upload-picture-item-margin-bottom: @spacing-4;
@upload-picture-item-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@upload-picture-item-color-operation_bg: rgba(0, 0, 0, 0.5);
@upload-picture-item-color-operation-icon: var(~'@{arco-cssvars-prefix}-color-white');
@upload-picture-item-color-error-icon: var(~'@{arco-cssvars-prefix}-color-white');
@upload-picture-text-item-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
@upload-picture-text-item-color-text_error: @color-danger-6;
@upload-picture-text-item-color-text_success: unset;
@upload-picture-text-item-color-text_uploading: unset;
@upload-picture-text-item-padding-vertical: @spacing-4;

// 图标尺寸
@upload-drag-size-icon: 14px;
@upload-picture-item-size-mask-icon: @size-4;
@upload-picture-item-size-error-icon: 26px;
@upload-text-item-size-reupload-icon: 14px;
@upload-text-item-size-success-icon: 14px;
@upload-text-item-size-error-icon: 14px;
@upload-picture-item-size-operation-icon: 14px;

@upload-color-icon-box-shadow_default: var(~'@{arco-cssvars-prefix}-color-primary-light-3');
@upload-color-icon-box-shadow_active: @color-primary-6;


@upload-prefix-cls: ~'@{prefix}-upload';

.@{upload-prefix-cls} {
  display: inline-block;
  max-width: 100%;

  &-type-picture-card {
    vertical-align: top;
  }

  &-drag {
    width: 100%;
  }

  &-hide {
    display: none;
  }

  &-disabled {
    .@{upload-prefix-cls}-trigger-picture,
    .@{upload-prefix-cls}-trigger-picture:hover {
      cursor: not-allowed;
      border-color: @upload-picture-color-border_disabled;
      background-color: @upload-picture-color-bg_disabled;
      color: @upload-picture-color-text_disabled;
    }

    .@{upload-prefix-cls}-trigger-drag,
    .@{upload-prefix-cls}-trigger-drag:hover {
      cursor: not-allowed;
      border-color: @upload-drag-color-border_disabled;
      background-color: @upload-drag-color-bg_disabled;

      .@{prefix}-icon-plus,
      .@{upload-prefix-cls}-trigger-drag-text {
        color: @upload-drag-color-text_disabled;
      }
    }

    .@{upload-prefix-cls}-trigger-tip {
      color: @upload-drag-color-text_disabled;
    }
  }

  &-trigger {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    width: 100%;

    &-tip {
      color: @upload-tip-color-text;
      margin-top: @upload-tip-margin-top;
      font-size: @upload-tip-font-size;
      line-height: 1.5;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    &-picture {
      min-width: @upload-picture-item-width;
      height: @upload-picture-item-width;
      color: @upload-picture-color-text;
      text-align: center;
      margin-bottom: 0;
      background: @upload-picture-color-bg;
      border-radius: @upload-picture-border-radius;
      border: @upload-picture-border-width @upload-picture-border-style @upload-picture-color-border;
      transition: all @transition-duration-1 @transition-timing-function-linear;

      &:hover {
        border-color: @upload-picture-color-border_hover;
        background-color: @upload-picture-color-bg_hover;
        color: @upload-picture-color-text_hover;
      }

      &:focus-visible {
        box-shadow: 0 0 0 2px @upload-color-icon-box-shadow_default;
      }

      &-text {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    &-drag {
      width: 100%;
      border-radius: @upload-drag-border-radius;
      border: @upload-drag-border-width @upload-drag-border-style @upload-drag-color-border;
      background-color: @upload-drag-color-bg;
      text-align: center;
      transition: all @transition-duration-2 ease;
      color: @upload-drag-color-text;
      padding: @upload-drag-padding-vertical 0;

      .@{prefix}-icon-plus {
        font-size: @upload-drag-size-icon;
        margin-bottom: @upload-drag-margin-icon-bottom;
        color: @upload-drag-color-icon;
      }

      &:hover {
        border-color: @upload-drag-color-border_hover;
        background-color: @upload-drag-color-bg_hover;

        .@{upload-prefix-cls}-trigger-drag-text {
          color: @upload-drag-color-text_hover;
        }

        .@{prefix}-icon-plus {
          color: @upload-drag-color-icon_hover;
        }
      }

      &:focus-visible {
        box-shadow: 0 0 0 2px @upload-color-icon-box-shadow_default;
      }

      &-active {
        border-color: @upload-drag-color-border_active;
        color: @upload-drag-color-text_active;
        background-color: @upload-drag-color-bg_active;

        .@{upload-prefix-cls}-trigger-drag-text {
          color: @upload-drag-color-text_active;
        }

        .@{prefix}-icon-plus {
          color: @upload-drag-color-icon_active;
        }
      }

      .@{upload-prefix-cls}-trigger-tip {
        margin-top: 0;
      }
    }

    &-drag-text {
      color: @upload-drag-color-text;
      line-height: 1.5;
      font-size: @upload-drag-font-size;
    }
  }
}

.@{upload-prefix-cls}-hide + .@{upload-prefix-cls}-list {
  .@{upload-prefix-cls}-list-item:first-of-type {
    margin-top: 0;
  }
}

.@{upload-prefix-cls}-list {
  width: 100%;

  &-type-text,
  &-type-picture-list {
    .@{upload-prefix-cls}-list-item:first-of-type {
      margin-top: @upload-list-margin-top;
    }
  }

  // icons

  &-file-icon {
    line-height: @upload-text-item-size-file-icon;
    font-size: @upload-text-item-size-file-icon;
    color: @upload-text-item-color-file-icon;
    margin-right: @upload-text-item-margin-file-icon-right;
  }

  &-preview-icon {
    cursor: pointer;
  }

  &-error-icon {
    cursor: pointer;
    color: @upload-text-item-color-error-icon;
    font-size: @upload-text-item-size-error-icon;
    margin-left: @upload-text-item-margin-error-icon-left;
  }

  &-success-icon {
    cursor: pointer;
    color: @upload-text-item-color-success-icon;
    font-size: @upload-text-item-size-success-icon;
    line-height: @upload-text-item-size-success-icon;
  }

  &-remove-icon {
    position: relative;
    cursor: pointer;
    font-size: @upload-picture-item-size-operation-icon;
  }

  &-start-icon,
  &-cancel-icon {
    position: absolute;
    color: @upload-text-item-color-status-icon;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    font-size: @upload-text-item-size-status-icon;

    &:focus-visible {
      color: @upload-color-icon-box-shadow_active;
    }
  }

  &-reupload-icon {
    cursor: pointer;
    color: @upload-text-item-color-reupload-icon;
    font-size: @upload-text-item-size-reupload-icon;
    transition: all @transition-duration-2 ease;

    &:active,
    &:hover {
      color: @upload-text-item-color-reupload-icon_hover;
    }

    &:focus-visible {
      box-shadow: inset 0 0 0 2px @upload-color-icon-box-shadow_default;
    }
  }

  /*** listtype is text ****/

  &-status {
    position: relative;
    cursor: pointer;
    line-height: @upload-text-item-size-status-icon;

    &:hover {
      .@{prefix}-progress-circle-mask {
        stroke: @upload-text-item-color-progress-bg_hover;
      }

      .@{prefix}-progress-circle-path {
        stroke: @upload-text-item-color-progress-bg_hover_active;
      }
    }
  }

  &-item-done &-file-icon {
    color: @upload-text-item-color-file-icon_success;
  }

  &-item {
    box-sizing: border-box;
    padding-right: @upload-text-item-size-operation-icon + @upload-text-item-margin-remove-icon-left;
    margin-top: @upload-text-item-margin-top;
    position: relative;

    &-operation {
      font-size: @upload-text-item-size-operation-icon;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      color: @upload-text-item-color-remove-icon;

      .@{upload-prefix-cls}-list-remove-icon-hover:focus-visible::before {
        box-shadow: 0 0 0 2px @upload-color-icon-box-shadow_active;
      }

      .@{upload-prefix-cls}-list-remove-icon {
        font-size: inherit;
      }
    }
  }

  &-item-text {
    font-size: @upload-text-item-font-size;
    display: flex;
    align-items: center;
    border-radius: @upload-text-item-border-radius;
    width: 100%;
    box-sizing: border-box;
    background-color: @upload-text-item-color-bg;
    padding: @upload-text-item-padding-vertical 0;
    padding-left: @upload-text-item-padding-left;
    padding-right: @upload-text-item-padding-right;
    flex-wrap: nowrap;

    &-content {
      flex: 1;
      display: flex;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      justify-content: space-between;
      flex-wrap: nowrap;
      transition: background-color @transition-duration-1 @transition-timing-function-linear;
    }

    &-thumbnail {
      height: @upload-text-item-thumbnail-width;
      width: @upload-text-item-thumbnail-width;
      margin-right: @upload-text-item-margin-thumbnail-right;
      flex-shrink: 0;

      img {
        width: 100%;
        height: 100%;
      }
    }

    &-name {
      white-space: nowrap;
      display: flex;
      overflow: hidden;
      flex-shrink: 1;
      flex-grow: 1;
      align-items: center;
      color: @upload-text-item-color-text;
      font-size: @upload-text-item-font-size;
      text-overflow: ellipsis;
      line-height: 1.4286;
      margin-right: @upload-text-item-margin-status-left;
    }

    &-name-link {
      cursor: pointer;
      text-decoration: none;
      overflow: hidden;
      color: @upload-text-item-color-link;
      text-overflow: ellipsis;
    }

    &-name-text {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &-item-error,
  &-item-done {
    .@{upload-prefix-cls}-list-status {
      display: none;
    }
  }

  &-type-text {
    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-text-name-link,
    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-text-name {
      color: @upload-text-item-color-text_error;
    }

    .@{upload-prefix-cls}-list-item-done
      .@{upload-prefix-cls}-list-item-text-name
      when
      not(@upload-text-item-color-text_success = unset) {
      color: @upload-text-item-color-text_success;
    }

    .@{upload-prefix-cls}-list-item-uploading
      .@{upload-prefix-cls}-list-item-text-name
      when
      not(@upload-text-item-color-text_uploading = unset) {
      color: @upload-text-item-color-text_uploading;
    }
  }

  /*** end ****/

  &&-type-picture-card {
    display: inline;
    vertical-align: top;

    .@{upload-prefix-cls}-list-status {
      top: 50%;
      transform: translateY(-50%);
      margin-left: 0;
    }
  }

  &-type-picture-card &-item {
    display: inline-block;
    vertical-align: top;
    margin-top: 0;
    padding-right: 0;
    margin-right: @upload-picture-item-margin-right;
    margin-bottom: @upload-picture-item-margin-bottom;
    overflow: hidden;
    transition: all @transition-duration-2 @transition-timing-function-standard;
  }

  &-type-picture-card &-item-error &-item-picture-mask {
    opacity: 1;
  }

  &-item-picture {
    width: @upload-picture-item-size-width;
    height: @upload-picture-item-size-width;
    position: relative;
    overflow: hidden;
    border-radius: @upload-picture-item-border-radius;
    box-sizing: border-box;
    text-align: center;
    vertical-align: top;
    background-color: @upload-picture-item-color-bg;

    img {
      width: 100%;
      height: 100%;
    }

    &-mask {
      cursor: pointer;
      position: absolute;
      text-align: center;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: @upload-picture-item-color-operation_bg;
      color: @upload-picture-item-color-operation-icon;
      font-size: @upload-picture-item-size-mask-icon;
      line-height: @upload-picture-item-size-width;
      opacity: 0;
      transition: opacity @transition-duration-1 @transition-timing-function-linear;
    }

    &-operation {
      font-size: @upload-picture-item-size-operation-icon;

      .@{upload-prefix-cls}-list-reupload-icon {
        color: @upload-picture-item-color-operation-icon;
      }

      .@{upload-prefix-cls}-list-reupload-icon + .@{upload-prefix-cls}-list-remove-icon,
      .@{upload-prefix-cls}-list-preview-icon + .@{upload-prefix-cls}-list-remove-icon {
        margin-left: @upload-picture-item-margin-preview-icon-right;
      }

      .@{upload-prefix-cls}-list-reupload-icon,
      .@{upload-prefix-cls}-list-preview-icon,
      .@{upload-prefix-cls}-list-remove-icon {
        &:focus-visible {
          border-radius: 2px;
          box-shadow: 0 0 0 2px @upload-color-icon-box-shadow_default;
        }
      }
    }

    &-error-tip {
      .@{upload-prefix-cls}-list-item-picture-operation {
        opacity: 0;
        width: 0;
        height: 0;
      }
      .@{upload-prefix-cls}-list-error-icon {
        font-size: @upload-picture-item-size-error-icon;
        color: @upload-picture-item-color-error-icon;
      }
    }

    &-mask:hover,
    &-mask:focus-within,
    &-mask:hover &-operation,
    &-mask:focus-within &-operation {
      opacity: 1;
      display: block;
    }

    &-mask:hover &-error-tip,
    &-mask:focus-within &-error-tip {
      display: none;
    }
  }

  // picture-list
  &-type-picture-list {
    .@{upload-prefix-cls}-list-item-text {
      padding-top: @upload-picture-text-item-padding-vertical;
      padding-bottom: @upload-picture-text-item-padding-vertical;
    }

    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-text {
      background-color: @upload-picture-text-item-color-bg_error;
    }

    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-text-name-link,
    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-text-name {
      color: @upload-picture-text-item-color-text_error;
    }

    .@{upload-prefix-cls}-list-item-done
      .@{upload-prefix-cls}-list-item-text-name
      when
      not(@upload-picture-text-item-color-text_success = unset) {
      color: @upload-picture-text-item-color-text_success;
    }

    .@{upload-prefix-cls}-list-item-uploading
      .@{upload-prefix-cls}-list-item-text-name
      when
      not(@upload-picture-text-item-color-text_uploading = unset) {
      color: @upload-picture-text-item-color-text_uploading;
    }
  }
}

.@{upload-prefix-cls}-slide-up-enter {
  opacity: 0;
}

.@{upload-prefix-cls}-slide-up-enter-active {
  opacity: 1;
  transition: opacity @transition-duration-2 @transition-timing-function-standard;
}

.@{upload-prefix-cls}-slide-up-exit {
  opacity: 1;
}

.@{upload-prefix-cls}-slide-up-exit-active {
  opacity: 0;
  overflow: hidden;
  margin: 0;
  transition: opacity @transition-duration-1 @transition-timing-function-linear,
    height @transition-duration-3 @transition-timing-function-standard @transition-duration-1,
    margin @transition-duration-3 @transition-timing-function-standard @transition-duration-1;
}

.@{upload-prefix-cls}-list-item {
  &.@{upload-prefix-cls}-slide-inline-enter {
    opacity: 0;
  }

  &.@{upload-prefix-cls}-slide-inline-enter-active {
    opacity: 1;
    transition: opacity @transition-duration-2 @transition-timing-function-linear;
  }

  &.@{upload-prefix-cls}-slide-inline-exit {
    opacity: 1;
  }

  &.@{upload-prefix-cls}-slide-inline-exit-active {
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: opacity @transition-duration-1 @transition-timing-function-linear,
      width @transition-duration-3 @transition-timing-function-standard @transition-duration-1,
      margin @transition-duration-3 @transition-timing-function-standard @transition-duration-1;
  }
}

.@{upload-prefix-cls}-rtl {
  direction: rtl;
}

.@{upload-prefix-cls}-list-rtl {
  direction: rtl;

  .@{upload-prefix-cls}-list {
    &-file-icon {
      margin-right: 0;
      margin-left: @upload-text-item-margin-file-icon-right;
    }

    &-error-icon {
      margin-left: 0;
      margin-right: @upload-text-item-margin-error-icon-left;
    }

    &-item {
      padding-right: 0;
      padding-left: @upload-text-item-size-operation-icon +
        @upload-text-item-margin-remove-icon-left;

      &-operation {
        right: initial;
        left: 0;
      }

      &-text {
        padding-right: @upload-text-item-padding-left;
        padding-left: @upload-text-item-padding-right;

        &-thumbnail {
          margin-right: 0;
          margin-left: @upload-text-item-margin-thumbnail-right;
        }

        &-name {
          margin-right: 0;
          margin-left: @upload-text-item-margin-status-left;
        }
      }

      &-picture-operation {
        .@{upload-prefix-cls}-list-reupload-icon + .@{upload-prefix-cls}-list-remove-icon,
        .@{upload-prefix-cls}-list-preview-icon + .@{upload-prefix-cls}-list-remove-icon {
          margin-left: 0;
          margin-right: @upload-picture-item-margin-preview-icon-right;
        }
      }
    }
  }

  &.@{upload-prefix-cls}-list-type-picture-card {
    .@{upload-prefix-cls}-list-status {
      margin-left: initial;
      margin-right: 0;
    }

    .@{upload-prefix-cls}-list-item {
      margin-right: 0;
      padding-left: 0;
      margin-left: @upload-picture-item-margin-right;
    }
  }
}


/********** Upload end ***************/
    


/********** Mentions  ***************/



@mentions-padding-horizontal: @spacing-6;
@mentions-padding-vertical: @spacing-2;
@mentions-font-size: @font-size-body-3;
@mentions-line-height: @line-height-base;

@mentions-prefix-cls: ~'@{prefix}-mentions';

.@{mentions-prefix-cls} {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  vertical-align: middle;
  white-space: pre-wrap;

  &-textarea,
  &-measure {
    padding: @mentions-padding-vertical @mentions-padding-horizontal;
    font-size: @mentions-font-size;
    line-height: @mentions-line-height;
    white-space: inherit;
  }

  &-textarea {
    resize: none;
  }

  &-measure,
  &-align-textarea &-measure-trigger {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    visibility: hidden;
    pointer-events: none;
  }
}

.@{mentions-prefix-cls}-rtl {
  direction: rtl;
}


/********** Mentions end ***************/
    


/********** Watermark  ***************/





/********** Watermark end ***************/
    


/********** Image  ***************/


@image-radius: @radius-small;
// title
@image-font-size-title: @font-size-title-1;
@image-font-weight-title: @font-weight-500;
// description
@image-font-size-description: @font-size-body-3;
@image-color-title_footer_outer-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@image-color-title_footer_inner-text: var(~'@{arco-cssvars-prefix}-color-white');
@image-color-description_footer_inner-text: var(~'@{arco-cssvars-prefix}-color-white');
@image-color-description_footer_outer-text: var(~'@{arco-cssvars-prefix}-color-neutral-6');
// actions
@image-spacing-actions-left: @spacing-6;
// actions item
@image-font-size-actions-item: 14px;
@image-padding-actions-item-vertical: @spacing-none;
@image-padding-actions-item-horizontal: @spacing-none;
@image-spacing-actions-item-left: @spacing-6;
@image-radius-actions-item: @radius-small;
@image-color-actions-item_footer_inner_hover-bg: rgba(0, 0, 0, 0.5);
@image-color-actions-item_footer_outer_hover-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
@image-color-actions-item_trigger-text: var(~'@{arco-cssvars-prefix}-color-neutral-8');
@image-color-actions-item_trigger_hover-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
@image-spacing-actions-trigger-item-vertical: 5px;
@image-spacing-actions-trigger-item-horizontal: 4px;
// footer
@image-color-footer_inner-bg: linear-gradient(360deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
@image-color-footer_inner-text: var(~'@{arco-cssvars-prefix}-color-white');
@image-padding-footer_inner_vertical: 9px;
@image-padding-footer_inner_horizontal: 16px;

@image-spacing-footer_inner_simple-vertical: @spacing-6;
@image-spacing-footer_inner_simple-horizontal: @spacing-7;
@image-color-footer_outer-text: var(~'@{arco-cssvars-prefix}-color-neutral-8');
@image-spacing-footer-top: @spacing-2;
// error
@image-color-error-bg: var(~'@{arco-cssvars-prefix}-color-neutral-1');
@image-color-error-text: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@image-font-size-error-icon: 60px;
@image-font-size-error-text: @font-size-body-1;
@image-line-height-error-text: 1.6667;
@image-size-error-min-height: 100px;
@image-spacing-error-padding: @spacing-7;
// loader
@image-color-loader-bg: var(~'@{arco-cssvars-prefix}-color-neutral-1');
@image-size-loader-min-height: 100px;
// loader spin
@image-font-size-loader-spin: 32px;
@image-color-loader-spin-text: @color-primary-6;
@image-color-loader-spin-text-text: var(~'@{arco-cssvars-prefix}-color-neutral-6');
@image-font-size-loader-spin-text: @font-size-title-1;

// preview mask
@image-preview-color-mask-bg: var(~'@{arco-cssvars-prefix}-color-mask-bg');
// preview scale value
@image-preview-size-scale-value-height: 32px;
@image-preview-spacing-scale-value-vertical: 7px;
@image-preview-spacing-scale-value-horizontal: 10px;
@image-preview-font-size-scale-value: @font-size-body-1;
@image-preview-color-scale-value-text: var(~'@{arco-cssvars-prefix}-color-white');
@image-preview-color-scale-value-bg: rgba(255, 255, 255, 0.08);
// preview toolbar
@image-preview-color-toolbar-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
@image-preview-radius-toolbar: @radius-medium;
@image-preview-spacing-toolbar-vertical: @spacing-2;
@image-preview-spacing-toolbar-horizontal: @spacing-7;
@image-preview-spacing-toolbar-horizontal_simple: @spacing-2;
@image-preview-spacing-toolbar-vertical_simple: @spacing-2;

@image-preview-position-toolbar-bottom: 46px;
// preview toolbar action
@image-preview-font-size-action: 14px;
@image-preview-color-action-text: var(~'@{arco-cssvars-prefix}-color-neutral-8');
@image-preview-radius-action: @radius-small;
@image-preview-color-action-bg: @color-transparent;
@image-preview-color-action_hover-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
@image-preview-color-action_hover-text: @color-primary-6;
@image-preview-color-action_disabled-bg: transparent;
@image-preview-color-action_disabled-text: var(~'@{arco-cssvars-prefix}-color-text-4');
@image-preview-font-size-action-name: @font-size-body-1;
@image-preview-spacing-action-name-right: @spacing-6;
@image-preview-padding-action-content: 13px;
@image-preview-margin-action-right: @spacing-none;
// preview trigger
@image-preview-spacing-trigger-padding-vertical: @spacing-6;
@image-preview-spacing-trigger-padding-horizontal: @spacing-7;
@image-preview-margin-action-bottom: @spacing-none;

// preview loading
@image-preview-color-loading-text: @color-primary-6;
@image-preview-color-loading-bg: #232324;
@image-preview-font-size-loading: 18px;
@image-preview-spacing-loading-padding: @spacing-5;
@image-preview-size-loading-width: 48px;
@image-preview-size-loading-height: 48px;
@image-preview-radius-loading: @radius-medium;
// preview close-btn
@image-preview-size-close-btn-width: 32px;
@image-preview-size-close-icon: 14px;
@image-preview-color-close-btn-bg: rgba(0, 0, 0, 0.5);
@image-preview-color-close-btn-text: var(~'@{arco-cssvars-prefix}-color-white');
@image-preview-position-close-btn-right: 36px;
@image-preview-position-close-btn-top: 36px;
// preview arrow
@image-preview-arrow-position: @spacing-8;
@image-preview-arrow-size: @size-8;
@image-preview-arrow-font-size: @size-4;
@image-preview-arrow-color-icon: var(~'@{arco-cssvars-prefix}-color-white');
@image-preview-arrow-color-icon_disabled: rgba(255, 355, 255, 0.3);
@image-preview-arrow-color-bg: rgba(255, 355, 255, 0.3);
@image-preview-arrow-color-bg_hover: rgba(255, 355, 255, 0.5);
@image-preview-arrow-color-bg_disabled: rgba(255, 355, 255, 0.2);

// image trigger
@image-trigger-spacing-padding-vertical: 6px;
@image-trigger-spacing-padding-horizontal: 4px;
@image-trigger-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');
@image-trigger-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@image-trigger-size-border: 1px;
@image-trigger-radius: 4px;
@image-color-box-shadow: @color-primary-6;

@image-trigger-prefix-cls: ~'@{prefix}-image-trigger';

.@{image-trigger-prefix-cls} {
  padding: @image-trigger-spacing-padding-vertical @image-trigger-spacing-padding-horizontal;
  background: @image-trigger-color-bg;
  border: @image-trigger-size-border solid @image-trigger-color-border;
  border-radius: @image-trigger-radius;

  .@{prefix}-trigger-arrow {
    border: @image-trigger-size-border solid @image-trigger-color-border;
    background-color: @image-trigger-color-bg;
  }
}

@image-prefix-cls: ~'@{prefix}-image';

.@{image-prefix-cls} {
  position: relative;
  display: inline-block;
  border-radius: @image-radius;
  vertical-align: middle;

  &-img {
    vertical-align: middle;
    border-radius: inherit;

    &:focus-visible {
      box-shadow: 0 0 0 2px @image-color-box-shadow;
    }
  }

  &-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &-footer {
    width: 100%;
    max-width: 100%;
    display: flex;

    &-block {
      flex: auto;
    }
  }

  &-caption {
    &-title {
      font-size: @image-font-size-title;
      font-weight: @image-font-weight-title;
    }

    &-description {
      font-size: @image-font-size-description;
    }
  }

  &-actions {
    padding-left: @image-spacing-actions-left;

    &-list {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    &-item {
      font-size: @image-font-size-actions-item;
      line-height: 1;
      margin-left: @image-spacing-actions-item-left;
      border-radius: @image-radius-actions-item;
      padding: @image-padding-actions-item-vertical @image-padding-actions-item-horizontal;
      cursor: pointer;

      &:first-child {
        margin-left: 0;
      }

      &-trigger {
        padding: @image-spacing-actions-trigger-item-vertical
          @image-spacing-actions-trigger-item-horizontal;
        display: inline-block;
      }
    }
  }

  &-with-footer-inner {
    .@{image-prefix-cls}-footer {
      background: @image-color-footer_inner-bg;
      color: @image-color-footer_inner-text;
      box-sizing: border-box;
      padding: @image-padding-footer_inner_vertical @image-padding-footer_inner_horizontal;
      align-items: center;
      position: absolute;
      left: 0;
      bottom: 0;
      border-bottom-right-radius: inherit;
      border-bottom-left-radius: inherit;
    }

    .@{image-prefix-cls}-caption {
      &-title {
        color: @image-color-title_footer_inner-text;
      }

      &-description {
        color: @image-color-description_footer_inner-text;
      }
    }

    .@{image-prefix-cls}-actions {
      &-item {
        &:hover {
          background: @image-color-actions-item_footer_inner_hover-bg;
        }
      }
    }
  }

  &-with-footer-outer {
    .@{image-prefix-cls}-footer {
      color: @image-color-footer_outer-text;
      margin-top: @image-spacing-footer-top;
    }

    .@{image-prefix-cls}-caption {
      &-title {
        color: @image-color-title_footer_outer-text;
      }

      &-description {
        color: @image-color-description_footer_outer-text;
      }
    }

    .@{image-prefix-cls}-actions {
      &-item {
        &:hover {
          background: @image-color-actions-item_footer_outer_hover-bg;
        }
      }
    }
  }

  &-with-preview:hover {
    cursor: zoom-in;
  }

  &-error {
    width: 100%;
    height: 100%;
    background-color: @image-color-error-bg;
    color: @image-color-error-text;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &-icon {
      width: @image-font-size-error-icon;
      height: @image-font-size-error-icon;
      max-width: 100%;
      max-height: 100%;

      > svg {
        width: 100%;
        height: 100%;
      }
    }

    &-alt {
      font-size: @image-font-size-error-text;
      line-height: @image-line-height-error-text;
      text-align: center;
      padding: (@image-spacing-error-padding / 2) @image-spacing-error-padding;
    }
  }

  &-loader {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: @image-color-loader-bg;

    &-spin {
      font-size: @image-font-size-loader-spin;
      transform: translate(-50%, -50%);
      position: absolute;
      color: @image-color-loader-spin-text;
      left: 50%;
      top: 50%;
      text-align: center;

      &-text {
        color: @image-color-loader-spin-text-text;
        font-size: @image-font-size-loader-spin-text;
      }
    }
  }

  &-simple {
    &.@{image-prefix-cls}-with-footer-inner {
      .@{image-prefix-cls}-footer {
        padding: @image-spacing-footer_inner_simple-vertical
          @image-spacing-footer_inner_simple-horizontal;
      }
    }
  }

  &-before-load,
  &-loading,
  &-loading-error {
    .@{image-prefix-cls}-img {
      visibility: hidden;
    }
  }

  &-trigger {
    .@{image-prefix-cls}-actions {
      &-list {
        flex-direction: column;
      }

      &-item {
        color: @image-color-actions-item_trigger-text;
        margin-left: 0;

        &:hover {
          background: @image-color-actions-item_trigger_hover-bg;
        }
      }
    }
  }
}

@preview-prefix-cls: ~'@{prefix}-image-preview';

.center() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.@{preview-prefix-cls} {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: @z-index-image-preview;

  &-hide {
    display: none;
  }

  &-mask,
  &-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  &-mask {
    background-color: @image-preview-color-mask-bg;
  }

  &-img-container {
    width: 100%;
    height: 100%;
    text-align: center;

    &::before {
      content: '';
      width: 0;
      height: 100%;
      vertical-align: middle;
      display: inline-block;
    }

    .@{preview-prefix-cls}-img {
      max-width: 100%;
      max-height: 100%;
      display: inline-block;
      vertical-align: middle;
      user-select: none;
      cursor: grab;

      &.@{image-prefix-cls}-preview-img-moving {
        cursor: grabbing;
      }
    }
  }

  &-scale-value {
    padding: @image-preview-spacing-scale-value-vertical
      @image-preview-spacing-scale-value-horizontal;
    box-sizing: border-box;
    font-size: @image-preview-font-size-scale-value;
    color: @image-preview-color-scale-value-text;
    background-color: @image-preview-color-scale-value-bg;
    line-height: initial;
    .center();
  }

  &-toolbar {
    background-color: @image-preview-color-toolbar-bg;
    border-radius: @image-preview-radius-toolbar;
    display: flex;
    align-items: flex-start;
    padding: @image-preview-spacing-toolbar-vertical @image-preview-spacing-toolbar-horizontal;
    position: absolute;
    bottom: @image-preview-position-toolbar-bottom;
    left: 50%;
    transform: translateX(-50%);

    &-action {
      font-size: @image-preview-font-size-action;
      color: @image-preview-color-action-text;
      border-radius: @image-preview-radius-action;
      background-color: @image-preview-color-action-bg;
      cursor: pointer;
      display: flex;
      align-items: center;

      &:not(:last-of-type) {
        margin-right: @image-preview-margin-action-right;
      }

      &:hover {
        background-color: @image-preview-color-action_hover-bg;
        color: @image-preview-color-action_hover-text;
      }

      &-disabled,
      &-disabled:hover {
        color: @image-preview-color-action_disabled-text;
        background-color: @image-preview-color-action_disabled-bg;
        cursor: not-allowed;
      }

      &-name {
        font-size: @image-preview-font-size-action-name;
        padding-right: @image-preview-spacing-action-name-right;
      }

      &-content {
        padding: @image-preview-padding-action-content;
        line-height: 1;
      }
    }

    &-simple {
      padding: @image-preview-spacing-toolbar-vertical_simple
        @image-preview-spacing-toolbar-horizontal_simple;
    }

    &-simple &-action {
      margin-right: 0;
    }
  }

  &-trigger.@{image-prefix-cls}-trigger {
    padding: @image-preview-spacing-trigger-padding-vertical
      @image-preview-spacing-trigger-padding-horizontal;

    .@{preview-prefix-cls}-toolbar {
      &-action {
        text-align: left;
        margin-right: 0;

        &:not(:last-of-type) {
          margin-bottom: @image-preview-margin-action-bottom;
        }
      }
    }
  }

  &-loading {
    color: @image-preview-color-loading-text;
    background-color: @image-preview-color-loading-bg;
    font-size: @image-preview-font-size-loading;
    padding: @image-preview-spacing-loading-padding;
    width: @image-preview-size-loading-width;
    height: @image-preview-size-loading-height;
    border-radius: @image-preview-radius-loading;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    .center();
  }

  &-close-btn {
    width: @image-preview-size-close-btn-width;
    height: @image-preview-size-close-btn-width;
    line-height: @image-preview-size-close-btn-width;
    background: @image-preview-color-close-btn-bg;
    color: @image-preview-color-close-btn-text;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    right: @image-preview-position-close-btn-right;
    top: @image-preview-position-close-btn-top;
    cursor: pointer;
    font-size: @image-preview-size-close-icon;
  }

  &-arrow {
    &-left,
    &-right {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: @image-preview-arrow-size;
      height: @image-preview-arrow-size;
      border-radius: 50%;
      color: @image-preview-arrow-color-icon;
      background-color: @image-preview-arrow-color-bg;
      cursor: pointer;
      z-index: 2;

      > svg {
        color: @image-preview-arrow-color-icon;
        font-size: @image-preview-arrow-font-size;
      }

      &:hover {
        background-color: @image-preview-arrow-color-bg_hover;
      }
    }

    &-left {
      left: @image-preview-arrow-position;
      top: 50%;
      transform: translateY(-50%);
    }

    &-right {
      top: 50%;
      transform: translateY(-50%);
      right: @image-preview-arrow-position;
    }

    &-disabled {
      cursor: not-allowed;
      background-color: @image-preview-arrow-color-bg_disabled;
      color: @image-preview-arrow-color-icon_disabled;

      > svg {
        color: @image-preview-arrow-color-icon_disabled;
      }

      &:hover {
        background-color: @image-preview-arrow-color-bg_disabled;
      }
    }
  }
}

/** mask 动效 */
.fadeImage-enter,
.fadeImage-appear {
  opacity: 0;
}

.fadeImage-enter-active,
.fadeImage-appear-active {
  opacity: 1;
  transition: opacity @transition-duration-4 @transition-timing-function-overshoot;
}

.fadeImage-exit {
  opacity: 1;
}

.fadeImage-exit-active {
  opacity: 0;
  transition: opacity @transition-duration-4 @transition-timing-function-overshoot;
}

.@{image-prefix-cls}-rtl {
  direction: rtl;

  .@{image-prefix-cls} {
    &-actions {
      &-item {
        margin-left: 0;
        margin-right: @image-spacing-actions-item-left;

        &:first-child {
          margin-right: 0;
        }
      }
    }
  }
}



/********** Image end ***************/