
  .getColorRgbStr(@color) {
    @str: red(@color), green(@color), blue(@color);
    @result: @str;
  }

  @gray-10: #1d2129;
@gray-9: #272e3b;
@gray-8: #4e5969;
@gray-7: #6b7785;
@gray-6: #86909c;
@gray-5: #a9aeb8;
@gray-4: #c9cdd4;
@gray-3: #e5e6eb;
@gray-2: #f2f3f5;
@gray-1: #f7f8fa;
@gold-6: #f7ba1e;
@gold-5: #F9CC45;
@gold-7: #CC9213;
@gold-4: #FADC6D;
@gold-3: #FCE996;
@gold-2: #FDF4BF;
@gold-1: #FFFCE8;
@yellow-6: #fadc19;
@yellow-7: #CFAF0F;
@yellow-5: #FBE842;
@yellow-4: #FCF26B;
@yellow-3: #FDFA94;
@yellow-2: #FEFEBE;
@yellow-1: #FEFFE8;
@lime-6: #9fdb1d;
@lime-7: #7EB712;
@lime-5: #B5E241;
@lime-4: #C9E968;
@lime-3: #DCF190;
@lime-2: #EDF8BB;
@lime-1: #FCFFE8;
@cyan-6: #14c9c9;
@cyan-7: #0DA5AA;
@cyan-5: #37D4CF;
@cyan-4: #5EDFD6;
@cyan-3: #89E9E0;
@cyan-2: #B7F4EC;
@cyan-1: #E8FFFB;
@blue-6: #3491fa;
@blue-5: #57A9FB;
@blue-4: #7BC0FC;
@blue-3: #9FD4FD;
@blue-2: #C3E7FE;
@blue-1: #E8F7FF;
@purple-6: #722ed1;
@purple-7: #551DB0;
@purple-5: #8D4EDA;
@purple-4: #A871E3;
@purple-3: #C396ED;
@purple-2: #DDBEF6;
@purple-1: #F5E8FF;
@pinkpurple-6: #d91ad9;
@pinkpurple-7: #B010B6;
@pinkpurple-5: #E13EDB;
@pinkpurple-4: #E865DF;
@pinkpurple-3: #F08EE6;
@pinkpurple-2: #F7BAEF;
@pinkpurple-1: #FFE8FB;
@magenta-6: #f5319d;
@magenta-7: #CB1E83;
@magenta-5: #F754A8;
@magenta-4: #F979B7;
@magenta-3: #FB9DC7;
@magenta-2: #FDC2DB;
@magenta-1: #FFE8F1;
@border-radius-none: 0;
@border-radius-small: 2px;
@border-radius-medium: 4px;
@border-radius-large: 8px;
@border-radius-circle: 50%;
@border-none: 0;
@border-1: 1px;
@border-2: 2px;
@border-3: 3px;
@border-solid: solid;
@border-dashed: dashed;
@border-dotted: dotted;
@color-menu-light-bg: #ffffff;
@color-menu-dark-bg: #232324;
@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);
@shadow-distance-none: 0;
@shadow-distance-1: 1px;
@shadow-distance-2: 2px;
@shadow-distance-3: 3px;
@shadow-distance-4: 4px;
@font-family: -apple-system,BlinkMacSystemFont,PingFang SC,Source Han Sans SC,Helvetica Neue,Helvetica,Roboto,Arial,Hiragino Sans GB,Segoe UI,Microsoft YaHei,sans-serif;
@font-size-display-3: 48px;
@font-size-display-2: 36px;
@font-size-display-1: 24px;
@font-size-title-3: 20px;
@font-size-title-2: 18px;
@font-size-title-1: 16px;
@font-size-body-3: 14px;
@font-size-body-2: 12px;
@font-size-body-1: 12px;
@font-size-caption: 12px;
@font-weight-900: 900;
@font-weight-800: 800;
@font-weight-700: 700;
@font-weight-600: 600;
@font-weight-500: 500;
@font-weight-400: 400;
@font-weight-300: 300;
@font-weight-200: 200;
@font-weight-100: 100;
@size-1: 4px;
@size-2: 8px;
@size-3: 12px;
@size-4: 16px;
@size-5: 20px;
@size-6: 24px;
@size-7: 28px;
@size-8: 32px;
@size-9: 36px;
@size-10: 40px;
@size-11: 44px;
@size-12: 48px;
@size-13: 52px;
@size-14: 56px;
@size-15: 60px;
@size-16: 64px;
@size-17: 68px;
@size-18: 72px;
@size-19: 76px;
@size-20: 80px;
@size-21: 84px;
@size-22: 88px;
@size-23: 92px;
@size-24: 96px;
@size-25: 100px;
@size-26: 104px;
@size-27: 108px;
@size-28: 112px;
@size-29: 116px;
@size-30: 120px;
@size-31: 124px;
@size-32: 128px;
@size-33: 132px;
@size-34: 136px;
@size-35: 140px;
@size-36: 144px;
@size-37: 148px;
@size-38: 152px;
@size-39: 156px;
@size-40: 160px;
@size-41: 164px;
@size-42: 168px;
@size-43: 172px;
@size-44: 176px;
@size-45: 180px;
@size-46: 184px;
@size-47: 188px;
@size-48: 192px;
@size-49: 196px;
@size-50: 200px;
@spacing-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;
@size-mini: @size-6;
@size-small: @size-7;
@size-default: @size-8;
@size-large: @size-9;
@upload-prefix-cls: ~'@{prefix}-upload';
@steps-prefix-cls: ~'@{prefix}-steps';
@image-prefix-cls: ~'@{prefix}-image';
@resizebox-prefix-cls: ~'@{prefix}-resizebox';
@card-prefix-cls: ~'@{prefix}-card';
@breadcrumb-prefix-cls: ~'@{prefix}-breadcrumb';
@avatar-prefix-cls: ~'@{prefix}-avatar';
@dropdown-prefix-cls: ~'@{prefix}-dropdown';
@list-prefix-cls: ~'@{prefix}-list';
@page-header-prefix-cls: ~'@{prefix}-page-header';
@table-prefix-cls: ~'@{prefix}-table';
@spin-prefix-cls: ~'@{prefix}-spin';
@statistic-prefix-cls: ~'@{prefix}-statistic';
@descriptions-prefix-cls: ~'@{prefix}-descriptions';
@timeline-prefix-cls: ~'@{prefix}-timeline';
@tag-prefix-cls: ~'@{prefix}-tag';
@switch-prefix-cls: ~'@{prefix}-switch';
@collapse-prefix-cls: ~'@{prefix}-collapse';
@input-tag-prefix-cls: ~'@{prefix}-input-tag';
@comment-prefix-cls: ~'@{prefix}-comment';
@input-prefix-cls: ~'@{prefix}-input';
@result-prefix-cls: ~'@{prefix}-result';
@input-number-prefix-cls: ~'@{prefix}-input-number';
@tree-select-prefix-cls: ~'@{prefix}-tree-select';
@btn-prefix-cls: ~'@{prefix}-btn';
@cascader-prefix-cls: ~'@{prefix}-cascader';
@select-prefix-cls: ~'@{prefix}-select';
@menu-prefix-cls: ~'@{prefix}-menu';
@transfer-prefix-cls: ~'@{prefix}-transfer';
@anchor-prefix-cls: ~'@{prefix}-anchor';
@picker-prefix-cls: ~'@{prefix}-picker';
@date-panel-prefix-cls: ~'@{prefix}-panel-date';
@time-picker-prefix-cls: ~'@{prefix}-timepicker';
@quarter-panel-prefix-cls: ~'@{prefix}-panel-quarter';
@year-panel-prefix-cls: ~'@{prefix}-panel-year';
@week-panel-prefix-cls: ~'@{prefix}-panel-week';
@range-picker-prefix-cls: ~'@{prefix}-picker-range';
@date-picker-prefix-cls: ~'@{prefix}-datepicker';
@modal-prefix-cls: ~'@{prefix}-modal';
@drawer-prefix-cls: ~'@{prefix}-drawer';
@auto-complete-prefix-cls: ~'@{prefix}-autocomplete';
@tabs-prefix-cls: ~'@{prefix}-tabs';
@checkbox-prefix-cls: ~'@{prefix}-checkbox';
@form-prefix-cls: ~'@{prefix}-form';
@radio-prefix-cls: ~'@{prefix}-radio';
@link-prefix-cls: ~'@{prefix}-link';
@divider-prefix-cls: ~'@{prefix}-divider';
@tooltip-prefix-cls: ~'@{prefix}-tooltip';
@popover-prefix-cls: ~'@{prefix}-popover';
@popconfirm-prefix-cls: ~'@{prefix}-popconfirm';
@message-prefix-cls: ~'@{prefix}-message';
@notification-prefix-cls: ~'@{prefix}-notification';
@tree-prefix-cls: ~'@{prefix}-tree';
@alert-prefix-cls: ~'@{prefix}-alert';
@pagination-prefix-cls: ~'@{prefix}-pagination';
@progress-prefix-cls: ~'@{prefix}-progress';
@empty-prefix-cls: ~'@{prefix}-empty';
@slider-prefix: ~'@{prefix}-slider';
@typography-prefix-cls: ~'@{prefix}-typography';
@month-panel-prefix-cls: ~'@{prefix}-panel-month';
@red-4: #F98981;
@red-1: #FFECE8;
@orange-2: #FFE4BA;
@orangered-10: #4D0E00;
@red-2: #FDCDC5;
@orange-8: #A64500;
@orange-9: #792E00;
@orange-7: #D25F00;
@red-9: #770813;
@orange-6: #ff7d00;
@orangered-6: #f77234;
@orangered-7: #CC5120;
@orangered-2: #FDDDC3;
@orange-3: #FFCF8B;
@red-3: #FBACA3;
@orange-10: #4D1B00;
@orangered-4: #FAAC7B;
@red-7: #CB272D;
@red-10: #4D000A;
@red-5: #F76560;
@gold-10: #4D2D00;
@yellow-10: #4D3800;
@red-6: #f53f3f;
@orangered-3: #FCC59F;
@orange-1: #FFF7E8;
@orange-5: #FF9A2E;
@orangered-1: #FFF3E8;
@orangered-8: #A23511;
@red-8: #A1151E;
@yellow-8: #A38408;
@orangered-9: #771F06;
@gold-9: #774B04;
@gold-8: #A26D0A;
@lime-8: #5F940A;
@green-6: #00b42a;
@yellow-9: #785D03;
@lime-9: #437004;
@cyan-8: #07828B;
@green-4: #4CD263;
@green-9: #006622;
@cyan-9: #03616C;
@orangered-5: #F99057;
@green-3: #7BE188;
@lime-10: #2A4D00;
@green-10: #004D1C;
@green-7: #009A29;
@green-5: #23C343;
@green-1: #E8FFEA;
@green-8: #008026;
@cyan-10: #00424D;
@green-2: #AFF0B5;
@arcoblue-1: #E8F3FF;
@arcoblue-6: #165dff;
@blue-9: #063078;
@arcoblue-2: #BEDAFF;
@arcoblue-4: #6AA1FF;
@arcoblue-3: #94BFFF;
@blue-8: #114BA3;
@blue-10: #001A4D;
@blue-7: #206CCF;
@arcoblue-8: #072CA6;
@purple-10: #16004D;
@arcoblue-9: #031A79;
@pinkpurple-8: #8A0993;
@pinkpurple-10: #42004D;
@purple-8: #3C108F;
@magenta-9: #77064F;
@magenta-8: #A11069;
@arcoblue-5: #4080FF;
@arcoblue-7: #0E42D2;
@arcoblue-10: #000D4D;
@purple-9: #27066E;
@pinkpurple-9: #650370;
@dark-red-10: #FFF0EC;
@dark-orangered-9: #FDDEC5;
@dark-orange-4: #D26913;
@dark-green-1: #004D1C;
@dark-blue-9: #C6E8FE;
@dark-purple-6: #8E51DA;
@dark-pinkpurple-5: #D92ED9;
@dark-green-4: #129A37;
@magenta-10: #4D0034;
@dark-lime-7: #CBE970;
@dark-yellow-3: #A38614;
@dark-orangered-1: #4D0E00;
@dark-gold-3: #A26F0F;
@dark-orange-7: #FFB357;
@dark-cyan-4: #1FA6AA;
@dark-yellow-6: #FBE94B;
@dark-red-5: #F54E4E;
@dark-purple-9: #DFC2F6;
@dark-magenta-10: #FFE8F1;
@dark-orangered-8: #FCC6A1;
@dark-red-2: #770611;
@dark-gold-2: #774B04;
@dark-orangered-7: #FAAD7D;
@dark-arcoblue-9: #BEDAFF;
@dark-gold-7: #FADC6C;
@dark-lime-2: #447006;
@dark-gold-1: #4D2D00;
@dark-orangered-3: #A23714;
@dark-cyan-5: #30C9C9;
@dark-red-3: #A1161F;
@dark-orange-1: #4D1B00;
@dark-red-7: #F98D86;
@dark-lime-9: #EEF8C2;
@dark-cyan-2: #06616C;
@dark-purple-2: #27066E;
@dark-pinkpurple-9: #F7C1F0;
@dark-arcoblue-7: #689FFF;
@dark-red-6: #F76965;
@dark-arcoblue-4: #1D4DD2;
@dark-yellow-7: #FCF374;
@dark-red-9: #FDD1CA;
@dark-yellow-9: #FEFEC6;
@dark-magenta-1: #4D0034;
@dark-gray-4: #5f5f60;
@dark-yellow-2: #785E07;
@dark-pinkpurple-3: #8A0D93;
@dark-gold-5: #F7C034;
@dark-primary-6: rgb(58, 130, 247);
@dark-arcoblue-8: #93BEFF;
@dark-green-8: #7EE18B;
@dark-arcoblue-3: #0E32A6;
@success-6: rgb(16, 185, 129);
@dark-gray-1: #17171a;
@dark-yellow-4: #CFB325;
@dark-primary-8: rgb(148, 192, 255);
@dark-purple-10: #F7EDFF;
@success-10: rgb(var(~'@{arco-cssvars-prefix}-green-10'));
@dark-orange-3: #A64B0A;
@dark-gray-6: #929293;
@dark-yellow-1: #4D3800;
@dark-orange-2: #793004;
@dark-orange-10: #FFF7E8;
@dark-pinkpurple-7: #E866DF;
@dark-gold-9: #FDF4BE;
@dark-orange-5: #FF8D1F;
@dark-blue-8: #A1D5FD;
@dark-orangered-10: #FFF4EB;
@primary-1: rgb(238, 246, 255);
@dark-red-8: #FBB0A7;
@success-9: rgb(var(~'@{arco-cssvars-prefix}-green-9'));
@primary-4: rgb(143, 188, 255);
@dark-lime-10: #FDFFEE;
@dark-gray-5: #78787a;
@dark-yellow-5: #FAE13C;
@dark-magenta-3: #A1176C;
@dark-arcoblue-5: #306FFF;
@success-5: rgb(52, 211, 153);
@dark-lime-4: #84B723;
@dark-magenta-7: #F97AB8;
@dark-yellow-8: #FDFA9D;
@dark-magenta-2: #770850;
@dark-green-7: #50D266;
@dark-success-1: rgb(39, 56, 61);
@dark-blue-3: #134CA3;
@dark-blue-1: #001A4D;
@dark-pinkpurple-1: #42004D;
@dark-primary-2: rgb(49, 60, 77);
@dark-pinkpurple-2: #650370;
@dark-green-5: #1DB440;
@dark-purple-1: #16004D;
@dark-magenta-6: #F756A9;
@dark-pinkpurple-8: #F092E6;
@dark-red-1: #4D000A;
@dark-purple-4: #5A25B0;
@dark-green-9: #B2F0B7;
@primary-6: rgb(0, 125, 250);
@dark-pinkpurple-6: #E13DDB;
@dark-cyan-6: #3FD4CF;
@dark-primary-10: rgb(179, 211, 255);
@dark-primary-1: rgb(46, 55, 71);
@dark-cyan-8: #90E9E1;
@dark-cyan-3: #11838B;
@danger-6: rgb(239, 68, 68);
@dark-lime-1: #2A4D00;
@dark-primary-4: rgb(35, 78, 148);
@dark-success-3: rgb(51, 102, 95);
@dark-orange-8: #FFCD87;
@success-4: rgb(110, 231, 183);
@dark-cyan-7: #66DFD7;
@success-2: rgb(209, 250, 229);
@success-1: rgb(236, 253, 245);
@success-8: rgb(var(~'@{arco-cssvars-prefix}-green-8'));
@dark-cyan-1: #00424D;
@dark-gray-2: #2e2e30;
@dark-lime-3: #629412;
@success-3: rgb(167, 243, 208);
@dark-primary-3: rgb(40, 71, 121);
@dark-gold-8: #FCE995;
@dark-arcoblue-1: #000D4D;
@dark-blue-6: #5AAAFB;
@dark-orangered-5: #F77E45;
@dark-red-4: #CB2E34;
@dark-purple-7: #A974E3;
@dark-primary-9: rgb(163, 202, 255);
@warning-4: rgb(253, 190, 124);
@dark-success-2: rgb(48, 68, 74);
@dark-lime-5: #A8DB39;
@danger-1: rgb(254, 242, 242);
@dark-primary-7: rgb(102, 166, 255);
@dark-success-5: rgb(43, 166, 136);
@dark-blue-5: #469AFA;
@dark-purple-8: #C59AED;
@dark-arcoblue-6: #3C7EFF;
@dark-gold-6: #F9CC44;
@dark-gray-9: #dfdfdf;
@dark-warning-7: rgb(255, 155, 105);
@dark-pinkpurple-10: #FFF2FD;
@dark-yellow-10: #FEFFF0;
@dark-green-10: #EBFFEC;
@dark-green-3: #0A802D;
@dark-orangered-2: #771E05;
@warning-5: rgb(255, 173, 87);
@primary-7: rgb(37, 99, 235);
@primary-9: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-9'));
@dark-cyan-9: #BEF4ED;
@link-3: rgb(191, 220, 255);
@dark-magenta-4: #CB2B88;
@warning-1: rgb(255, 247, 237);
@dark-success-10: rgb(209, 250, 229);
@success-7: rgb(5, 150, 105);
@dark-warning-4: rgb(178, 109, 71);
@dark-primary-5: rgb(46, 104, 198);
@dark-gold-10: #FFFCE8;
@dark-danger-2: rgb(85, 51, 62);
@warning-9: rgb(194, 65, 12);
@dark-magenta-9: #FDC3DB;
@danger-5: rgb(248, 113, 113);
@dark-danger-6: rgb(229, 92, 108);
@link-8: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-8'));
@primary-2: rgb(217, 234, 255);
@dark-cyan-10: #F0FFFC;
@dark-gray-10: #f6f6f6;
@dark-warning-3: rgb(115, 78, 60);
@link-2: rgb(217, 234, 255);
@dark-green-2: #046625;
@dark-danger-5: rgb(178, 72, 89);
@link-10: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-10'));
@dark-danger-9: rgb(242, 193, 193);
@dark-gray-8: #c5c5c5;
@dark-magenta-8: #FB9EC8;
@dark-success-4: rgb(36, 128, 109);
@dark-danger-7: rgb(248, 113, 129);
@dark-lime-8: #DEF198;
@dark-arcoblue-10: #EAF4FF;
@link-9: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-9'));
@danger-9: rgb(var(~'@{arco-cssvars-prefix}-red-9'));
@dark-link-8: rgb(148, 192, 255);
@link-5: rgb(67, 141, 251);
@dark-gray-7: #ababac;
@dark-danger-8: rgb(240, 157, 157);
@link-4: rgb(143, 188, 255);
@dark-warning-5: rgb(205, 121, 80);
@dark-magenta-5: #F545A6;
@dark-success-6: rgb(61, 204, 157);
@dark-lime-6: #B8E24B;
@warning-6: rgb(251, 146, 60);
@link-6: rgb(0, 125, 250);
@dark-danger-3: rgb(107, 59, 71);
@primary-5: rgb(67, 141, 251);
@dark-orange-9: #FFE3B8;
@dark-warning-9: rgb(242, 189, 162);
@primary-3: rgb(191, 220, 255);
@warning-3: rgb(254, 215, 170);
@dark-orange-6: #FF9626;
@dark-purple-5: #7B3DD1;
@dark-orangered-4: #CC5729;
@dark-link-2: rgb(40, 54, 77);
@primary-10: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-10'));
@dark-blue-2: #052F78;
@dark-success-7: rgb(67, 224, 172);
@warning-8: rgb(234, 88, 12);
@danger-3: rgb(254, 202, 202);
@dark-link-4: rgb(35, 78, 148);
@dark-link-7: rgb(102, 166, 255);
@warning-7: rgb(249, 115, 22);
@dark-blue-4: #2971CF;
@dark-gray-3: #484849;
@dark-warning-6: rgb(255, 146, 92);
@dark-warning-10: rgb(255, 227, 213);
@dark-pinkpurple-4: #B01BB6;
@warning-2: rgb(255, 237, 213);
@danger-7: rgb(220, 38, 38);
@dark-warning-2: rgb(82, 56, 55);
@dark-purple-3: #3E138F;
@dark-link-1: rgb(37, 49, 71);
@dark-green-6: #27C346;
@dark-danger-4: rgb(128, 64, 75);
@dark-link-3: rgb(40, 71, 121);
@dark-warning-1: rgb(64, 48, 47);
@primary-8: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-8'));
@dark-arcoblue-2: #041B79;
@danger-4: rgb(252, 165, 165);
@link-7: rgb(37, 99, 235);
@link-1: rgb(238, 246, 255);
@dark-blue-7: #7DC1FC;
@dark-orangered-6: #F9925A;
@danger-8: rgb(var(~'@{arco-cssvars-prefix}-red-8'));
@danger-10: rgb(var(~'@{arco-cssvars-prefix}-red-10'));
@dark-link-6: rgb(58, 130, 247);
@dark-danger-10: rgb(254, 226, 226);
@warning-10: rgb(154, 52, 18);
@dark-link-10: rgb(179, 211, 255);
@dark-blue-10: #EAF8FF;
@dark-warning-8: rgb(253, 162, 116);
@dark-gold-4: #CC961F;
@dark-success-9: rgb(167, 243, 208);
@dark-link-9: rgb(163, 202, 255);
@dark-success-8: rgb(114, 240, 190);
@danger-2: rgb(254, 226, 226);
@dark-link-5: rgb(46, 104, 198);
@dark-danger-1: rgb(71, 45, 56);
@orange-4: #FFB65D;
@dark-color-text-1: rgb(255, 255, 255);
@color-text-1: rgb(15, 23, 42);
@color-bg-white: rgb(255, 255, 255);
@color-white: #ffffff;
@dark-color-text-2: rgb(210, 216, 223);
@dark-color-white: rgb(255, 255, 255);
@color-text-3: rgb(51, 65, 85);
@color-text-2: rgb(30, 41, 59);
@color-text-4: rgb(110, 123, 141);
@dark-color-text-3: rgb(165, 177, 192);
@color-border-2: rgb(226, 232, 240);
@color-fill-4: rgb(255, 255, 255);
@color-fill-2: rgb(226, 232, 240);
@color-fill-3: rgb(231, 236, 240);
@dark-color-bg-1: rgb(29, 36, 50);
@dark-color-fill-4: rgb(29, 36, 50);
@dark-color-bg-white: rgb(34, 42, 56);
@dark-color-border-1: rgb(77, 86, 102);
@color-bg-1: rgb(255, 255, 255);
@color-border-1: rgb(203, 213, 225);
@dark-color-border-2: rgb(55, 62, 73);
@color-fill-1: rgb(203, 213, 225);
@dark-color-border-4: @dark-gray-6;
@dark-color-fill-1: rgb(52, 63, 82);
@color-border-4: var(~'@{arco-cssvars-prefix}-color-neutral-6');
@dark-color-fill-2: rgb(45, 53, 65);
@dark-color-border-3: rgb(82, 92, 109);
@dark-color-fill-3: rgb(57, 66, 82);
@color-bg-3: rgb(245, 249, 255);
@dark-color-bg-2: rgb(25, 31, 43);
@dark-color-bg-4: rgb(18, 24, 36);
@dark-color-bg-5: rgb(29, 36, 50);
@color-bg-5: rgb(245, 249, 255);
@color-bg-4: rgb(240, 246, 254);
@dark-color-bg-3: rgb(20, 27, 41);
@color-bg-2: rgb(248, 250, 253);
@color-border-3: rgb(255, 255, 255);
@textarea-prefix-cls: ~'@{prefix}-textarea';
@color-primary-1: rgb(var(~'@{arco-cssvars-prefix}-primary-1'));
@color-primary-5: rgb(var(~'@{arco-cssvars-prefix}-primary-5'));
@color-link-10: rgb(var(~'@{arco-cssvars-prefix}-link-10'));
@color-primary-3: rgb(var(~'@{arco-cssvars-prefix}-primary-3'));
@color-primary-4: rgb(var(~'@{arco-cssvars-prefix}-primary-4'));
@color-link-5: rgb(var(~'@{arco-cssvars-prefix}-link-5'));
@color-danger-2: rgb(var(~'@{arco-cssvars-prefix}-danger-2'));
@color-link-4: rgb(var(~'@{arco-cssvars-prefix}-link-4'));
@color-link-8: rgb(var(~'@{arco-cssvars-prefix}-link-8'));
@color-warning-3: rgb(var(~'@{arco-cssvars-prefix}-warning-3'));
@color-warning-7: rgb(var(~'@{arco-cssvars-prefix}-warning-7'));
@color-link-9: rgb(var(~'@{arco-cssvars-prefix}-link-9'));
@color-primary-2: rgb(var(~'@{arco-cssvars-prefix}-primary-2'));
@color-danger-10: rgb(var(~'@{arco-cssvars-prefix}-danger-10'));
@color-success-9: rgb(var(~'@{arco-cssvars-prefix}-success-9'));
@color-success-8: rgb(var(~'@{arco-cssvars-prefix}-success-8'));
@color-danger-8: rgb(var(~'@{arco-cssvars-prefix}-danger-8'));
@color-success-5: rgb(var(~'@{arco-cssvars-prefix}-success-5'));
@color-warning-8: rgb(var(~'@{arco-cssvars-prefix}-warning-8'));
@color-success-3: rgb(var(~'@{arco-cssvars-prefix}-success-3'));
@color-link-6: rgb(var(~'@{arco-cssvars-prefix}-link-6'));
@color-warning-9: rgb(var(~'@{arco-cssvars-prefix}-warning-9'));
@color-danger-1: rgb(var(~'@{arco-cssvars-prefix}-danger-1'));
@color-primary-6: rgb(var(~'@{arco-cssvars-prefix}-primary-6'));
@color-warning-2: rgb(var(~'@{arco-cssvars-prefix}-warning-2'));
@color-primary-7: rgb(var(~'@{arco-cssvars-prefix}-primary-7'));
@color-warning-4: rgb(var(~'@{arco-cssvars-prefix}-warning-4'));
@color-danger-5: rgb(var(~'@{arco-cssvars-prefix}-danger-5'));
@color-primary-8: rgb(var(~'@{arco-cssvars-prefix}-primary-8'));
@color-warning-6: rgb(var(~'@{arco-cssvars-prefix}-warning-6'));
@color-danger-9: rgb(var(~'@{arco-cssvars-prefix}-danger-9'));
@color-success-4: rgb(var(~'@{arco-cssvars-prefix}-success-4'));
@color-success-2: rgb(var(~'@{arco-cssvars-prefix}-success-2'));
@color-danger-7: rgb(var(~'@{arco-cssvars-prefix}-danger-7'));
@color-warning-1: rgb(var(~'@{arco-cssvars-prefix}-warning-1'));
@color-warning-5: rgb(var(~'@{arco-cssvars-prefix}-warning-5'));
@color-link-3: rgb(var(~'@{arco-cssvars-prefix}-link-3'));
@color-danger-3: rgb(var(~'@{arco-cssvars-prefix}-danger-3'));
@color-link-7: rgb(var(~'@{arco-cssvars-prefix}-link-7'));
@color-primary-9: rgb(var(~'@{arco-cssvars-prefix}-primary-9'));
@color-link-2: rgb(var(~'@{arco-cssvars-prefix}-link-2'));
@color-warning-10: rgb(var(~'@{arco-cssvars-prefix}-warning-10'));
@color-success-7: rgb(var(~'@{arco-cssvars-prefix}-success-7'));
@color-primary-10: rgb(var(~'@{arco-cssvars-prefix}-primary-10'));
@color-danger-4: rgb(var(~'@{arco-cssvars-prefix}-danger-4'));
@color-success-10: rgb(var(~'@{arco-cssvars-prefix}-success-10'));
@color-link-1: rgb(var(~'@{arco-cssvars-prefix}-link-1'));
@color-success-1: rgb(var(~'@{arco-cssvars-prefix}-success-1'));
@color-danger-6: rgb(var(~'@{arco-cssvars-prefix}-danger-6'));
@color-success-6: rgb(var(~'@{arco-cssvars-prefix}-success-6'));
@dark-color-menu-dark-hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
@color-black: #000000;
@color-primary-light-2: rgb(var(~'@{arco-cssvars-prefix}-primary-2'));
@color-spin-layer-bg: rgba(255, 255, 255, 0.6);
@color-tooltip-bg: rgb(var(~'@{arco-cssvars-prefix}-gray-10'));
@color-primary-light-3: rgb(var(~'@{arco-cssvars-prefix}-primary-3'));
@dark-color-tooltip-bg: #373739;
@color-bg-popup: var(~'@{arco-cssvars-prefix}-color-bg-5');
@color-secondary: var(~'@{arco-cssvars-prefix}-color-neutral-2');
@dark-mask-color-bg: rgba(23, 23, 26, 0.6);
@color-primary-light-1: rgb(var(~'@{arco-cssvars-prefix}-primary-1'));
@dark-color-spin-layer-bg: rgba(51, 51, 51, 0.6);
@dark-color-black: #000000;
@color-secondary-hover: var(~'@{arco-cssvars-prefix}-color-neutral-3');
@color-primary-light-4: rgb(var(~'@{arco-cssvars-prefix}-primary-4'));
@color-border: rgb(var(~'@{arco-cssvars-prefix}-gray-3'));
@color-menu-dark-hover: rgba(255, 255, 255, 0.04);
@mask-color-bg: rgba(29, 33, 41, 0.6);
@color-secondary-active: var(~'@{arco-cssvars-prefix}-color-neutral-4');
@color-danger-light-3: rgb(var(~'@{arco-cssvars-prefix}-danger-3'));
@color-danger-light-1: rgb(var(~'@{arco-cssvars-prefix}-danger-1'));
@color-secondary-disabled: var(~'@{arco-cssvars-prefix}-color-neutral-1');
@color-danger-light-2: rgb(var(~'@{arco-cssvars-prefix}-danger-2'));
@color-success-light-1: rgb(var(~'@{arco-cssvars-prefix}-success-1'));
@color-danger-light-4: rgb(var(~'@{arco-cssvars-prefix}-danger-4'));
@color-success-light-2: rgb(var(~'@{arco-cssvars-prefix}-success-2'));
@color-success-light-4: rgb(var(~'@{arco-cssvars-prefix}-success-4'));
@color-success-light-3: rgb(var(~'@{arco-cssvars-prefix}-success-3'));
@color-warning-light-1: rgb(var(~'@{arco-cssvars-prefix}-warning-1'));
@color-warning-light-3: rgb(var(~'@{arco-cssvars-prefix}-warning-3'));
@color-warning-light-2: rgb(var(~'@{arco-cssvars-prefix}-warning-2'));
@dark-color-border: #333335;
@color-warning-light-4: rgb(var(~'@{arco-cssvars-prefix}-warning-4'));
@dark-color-primary-light-1: rgba(var(~'@{arco-cssvars-prefix}-primary-6'), 0.2);
@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-primary-light-2: rgba(var(~'@{arco-cssvars-prefix}-primary-6'), 0.35);
@dark-color-secondary-disabled: rgba(var(~'@{arco-cssvars-prefix}-gray-9'), 0.08);
@dark-color-secondary-active: rgba(var(~'@{arco-cssvars-prefix}-gray-7'), 0.24);
@dark-color-secondary-hover: rgba(var(~'@{arco-cssvars-prefix}-gray-8'), 0.16);
@dark-color-text-4: rgb(138, 154, 173);
@dark-color-primary-light-3: rgba(var(~'@{arco-cssvars-prefix}-primary-6'), 0.5);
@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: rgb(var(~'@{arco-cssvars-prefix}-success-6'), 0.2);
@dark-color-success-light-2: rgb(var(~'@{arco-cssvars-prefix}-success-6'), 0.35);
@dark-color-success-light-3: rgb(var(~'@{arco-cssvars-prefix}-success-6'), 0.5);
@dark-color-success-light-4: rgb(var(~'@{arco-cssvars-prefix}-success-6'), 0.65);
@dark-color-warning-light-1: rgb(var(~'@{arco-cssvars-prefix}-warning-6'), 0.2);
@dark-color-warning-light-2: rgb(var(~'@{arco-cssvars-prefix}-warning-6'), 0.35);
@dark-color-warning-light-3: rgb(var(~'@{arco-cssvars-prefix}-warning-6'), 0.5);
@dark-color-warning-light-4: rgb(var(~'@{arco-cssvars-prefix}-warning-6'), 0.65);
@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'));
@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);
@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%;
@mask-bg-opacity: 60%;
@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);
@icon-hover-border-radius: var(~'@{arco-cssvars-prefix}-border-radius-circle');
@icon-hover-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
@icon-hover-size-default-height: 20px;
@icon-hover-size-small-height: 20px;
@icon-hover-size-mini-height: 20px;
@icon-hover-size-large-height: 24px;
@icon-hover-size-huge-height: 24px;
@icon-hover-size-small-icon: 12px;
@icon-hover-size-mini-icon: 12px;
@icon-hover-size-default-icon: 12px;
@icon-hover-size-large-icon: 12px;
@icon-hover-size-huge-icon: 12px;
@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');
@code-family: Consolas, Menlo;
@z-index-popup-base: 1000;
@z-index-affix: 999;
@z-index-popup: 1000;
@z-index-drawer: 1001;
@z-index-modal: 1001;
@z-index-message: 1003;
@z-index-notification: 1003;
@z-index-image-preview: 1001;
@line-height-base: 1.5715;
@popup-box-shadow-base: 0 2px 5px rgba(0, 0, 0, 0.1);
@color-transparent: transparent;
@prefix: arco;
@badge-prefix-cls: ~'@{prefix}-badge';
@calendar-prefix-cls: ~'@{prefix}-calendar';
@rate-prefix-cls: ~'@{prefix}-rate';
@font-size-body: @font-size-body-3;
@size-none: 0;
@border-4: 4px;
@border-5: 5px;
@arco-theme-tag: body;
@skeleton-prefix-cls: ~'@{prefix}-skeleton';
@arco-vars-prefix: ~'';
@arco-cssvars-prefix: if(@arco-vars-prefix = ~'', -, ~'--@{arco-vars-prefix}');
@watermark-prefix-cls: ~'@{prefix}-watermark';
@verification-code-prefix-cls: ~'@{prefix}-verification-code';
@color-prefix-cls: ~'@{prefix}-color';
@dark-tip-10: rgb(255, 238, 204);
@dark-tip-5: rgb(214, 167, 72);
@dark-tip-7: rgb(255, 212, 128);
@tip-10: rgb(146, 64, 14);
@tip-8: rgb(217, 119, 6);
@dark-tip-6: rgb(255, 205, 102);
@dark-tip-1: rgb(59, 55, 50);
@dark-tip-8: rgb(255, 221, 153);
@dark-tip-3: rgb(128, 106, 70);
@dark-tip-2: rgb(77, 66, 50);
@dark-tip-4: rgb(178, 140, 62);
@dark-tip-9: rgb(255, 230, 178);
@tip-9: rgb(180, 83, 9);
@color-text-5: rgb(127, 140, 159);
@dark-color-text-5: rgb(119, 136, 158);
@dark-color-bg-6: #d9dde3;
@color-bg-6: #d9dde3;
@tip-6: rgb(251, 191, 36);
@color-tip-3: rgb(var(~'@{arco-cssvars-prefix}-tip-3'));
@color-tip-1: rgb(var(~'@{arco-cssvars-prefix}-tip-1'));
@tip-7: rgb(233, 161, 59);
@tip-2: rgb(254, 243, 199);
@color-tip-2: rgb(var(~'@{arco-cssvars-prefix}-tip-2'));
@tip-4: rgb(255, 230, 125);
@tip-1: rgb(254, 251, 235);
@tip-5: rgb(252, 211, 77);
@color-tip-4: rgb(var(~'@{arco-cssvars-prefix}-tip-4'));
@tip-3: rgb(255, 237, 166);
@color-tip-5: rgb(var(~'@{arco-cssvars-prefix}-tip-5'));
@color-tip-6: rgb(var(~'@{arco-cssvars-prefix}-tip-6'));
@color-tip-7: rgb(var(~'@{arco-cssvars-prefix}-tip-7'));
@color-tip-9: rgb(var(~'@{arco-cssvars-prefix}-tip-9'));
@color-tip-10: rgb(var(~'@{arco-cssvars-prefix}-tip-10'));
@color-tip-8: rgb(var(~'@{arco-cssvars-prefix}-tip-8'));
@dark-color-text-6: rgb(102, 117, 135);
@color-text-6: rgb(148, 163, 184);
@color-fill-5: #ffffff;
@dark-color-fill-5: rgb(41, 49, 64);
@color-data-vis-7: rgb(var(~'@{arco-cssvars-prefix}-data-vis-7'));
@data-vis-10: rgb(232, 149, 143);
@dark-data-vis-10: rgb(232, 149, 143);
@dark-data-vis-9: rgb(114, 160, 176);
@data-vis-8: rgb(202, 228, 124);
@color-data-vis-4: rgb(var(~'@{arco-cssvars-prefix}-data-vis-4'));
@color-data-vis-3: rgb(var(~'@{arco-cssvars-prefix}-data-vis-3'));
@dark-data-vis-8: rgb(202, 228, 124);
@dark-data-vis-1: rgb(98, 144, 255);
@data-vis-1: rgb(98, 144, 255);
@data-vis-9: rgb(114, 160, 176);
@data-vis-7: rgb(187, 148, 255);
@data-vis-3: rgb(255, 181, 134);
@data-vis-5: rgb(161, 163, 255);
@dark-data-vis-6: rgb(130, 201, 205);
@color-data-vis-2: rgb(var(~'@{arco-cssvars-prefix}-data-vis-2'));
@dark-data-vis-4: rgb(255, 225, 144);
@color-data-vis-8: rgb(var(~'@{arco-cssvars-prefix}-data-vis-8'));
@dark-data-vis-2: rgb(98, 205, 255);
@dark-data-vis-5: rgb(161, 163, 255);
@data-vis-4: rgb(255, 225, 144);
@data-vis-6: rgb(130, 201, 205);
@color-data-vis-9: rgb(var(~'@{arco-cssvars-prefix}-data-vis-9'));
@dark-data-vis-3: rgb(255, 181, 134);
@dark-data-vis-7: rgb(187, 148, 255);
@color-data-vis-6: rgb(var(~'@{arco-cssvars-prefix}-data-vis-6'));
@color-data-vis-1: rgb(var(~'@{arco-cssvars-prefix}-data-vis-1'));
@color-data-vis-10: rgb(var(~'@{arco-cssvars-prefix}-data-vis-10'));
@color-data-vis-5: rgb(var(~'@{arco-cssvars-prefix}-data-vis-5'));
@data-vis-2: rgb(98, 205, 255);
@color-data-vis-guide-3: rgb(var(~'@{arco-cssvars-prefix}-data-vis-guide-3'));
@data-vis-guide-5: #4080FF;
@dark-data-vis-guide-5: #306FFF;
@color-data-vis-guide-5: rgb(var(~'@{arco-cssvars-prefix}-data-vis-guide-5'));
@dark-data-vis-guide-9: #BEDAFF;
@color-data-vis-guide-1: rgb(var(~'@{arco-cssvars-prefix}-data-vis-guide-1'));
@data-vis-guide-3: #94BFFF;
@data-vis-guide-2: #BEDAFF;
@dark-data-vis-guide-6: #3C7EFF;
@color-data-vis-guide-4: rgb(var(~'@{arco-cssvars-prefix}-data-vis-guide-4'));
@data-vis-guide-1: rgb(236, 237, 239);
@dark-data-vis-guide-8: #93BEFF;
@color-data-vis-guide-6: rgb(var(~'@{arco-cssvars-prefix}-data-vis-guide-6'));
@dark-data-vis-guide-3: #0E32A6;
@dark-data-vis-guide-1: rgb(55, 62, 73);
@data-vis-guide-6: #165DFF;
@data-vis-guide-9: #031A79;
@dark-data-vis-guide-10: #EAF4FF;
@color-data-vis-guide-2: rgb(var(~'@{arco-cssvars-prefix}-data-vis-guide-2'));
@color-data-vis-guide-7: rgb(var(~'@{arco-cssvars-prefix}-data-vis-guide-7'));
@dark-data-vis-guide-7: #689FFF;
@data-vis-guide-4: #6AA1FF;
@data-vis-guide-7: #0E42D2;
@color-data-vis-guide-8: rgb(var(~'@{arco-cssvars-prefix}-data-vis-guide-8'));
@data-vis-guide-10: #000D4D;
@dark-data-vis-guide-4: #1D4DD2;
@color-data-vis-guide-10: rgb(var(~'@{arco-cssvars-prefix}-data-vis-guide-10'));
@dark-data-vis-guide-2: #041B79;
@color-data-vis-guide-9: rgb(var(~'@{arco-cssvars-prefix}-data-vis-guide-9'));
@data-vis-guide-8: #072CA6;
@dark-data-vis-axis-10: #EAF4FF;
@color-data-vis-axis-2: rgb(var(~'@{arco-cssvars-prefix}-data-vis-axis-2'));
@color-data-vis-axis-1: rgb(var(~'@{arco-cssvars-prefix}-data-vis-axis-1'));
@color-data-vis-axis-3: rgb(var(~'@{arco-cssvars-prefix}-data-vis-axis-3'));
@dark-data-vis-axis-6: #3C7EFF;
@dark-data-vis-axis-9: #BEDAFF;
@color-data-vis-axis-8: rgb(var(~'@{arco-cssvars-prefix}-data-vis-axis-8'));
@color-data-vis-axis-6: rgb(var(~'@{arco-cssvars-prefix}-data-vis-axis-6'));
@data-vis-axis-7: #0E42D2;
@data-vis-axis-8: #072CA6;
@dark-data-vis-axis-3: #0E32A6;
@data-vis-axis-1: rgb(218, 219, 231);
@dark-data-vis-axis-1: rgb(77, 86, 102);
@color-data-vis-axis-9: rgb(var(~'@{arco-cssvars-prefix}-data-vis-axis-9'));
@data-vis-axis-5: #4080FF;
@color-data-vis-axis-5: rgb(var(~'@{arco-cssvars-prefix}-data-vis-axis-5'));
@color-data-vis-axis-7: rgb(var(~'@{arco-cssvars-prefix}-data-vis-axis-7'));
@data-vis-axis-4: #6AA1FF;
@dark-data-vis-axis-5: #306FFF;
@data-vis-axis-6: #165DFF;
@data-vis-axis-3: #94BFFF;
@dark-data-vis-axis-2: #041B79;
@dark-data-vis-axis-7: #689FFF;
@color-data-vis-axis-4: rgb(var(~'@{arco-cssvars-prefix}-data-vis-axis-4'));
@data-vis-axis-9: #031A79;
@data-vis-axis-10: #000D4D;
@data-vis-axis-2: #BEDAFF;
@dark-data-vis-axis-8: #93BEFF;
@dark-data-vis-axis-4: #1D4DD2;
@color-data-vis-axis-10: rgb(var(~'@{arco-cssvars-prefix}-data-vis-axis-10'));
@color-data-vis-bg-3: rgb(var(~'@{arco-cssvars-prefix}-data-vis-bg-3'));
@dark-data-vis-bg-4: #1D4DD2;
@color-data-vis-bg-9: rgb(var(~'@{arco-cssvars-prefix}-data-vis-bg-9'));
@data-vis-bg-8: #072CA6;
@color-data-vis-bg-2: rgb(var(~'@{arco-cssvars-prefix}-data-vis-bg-2'));
@data-vis-bg-6: #165DFF;
@data-vis-bg-7: #0E42D2;
@data-vis-bg-1: rgb(208, 222, 255);
@dark-data-vis-bg-2: rgb(45, 55, 65);
@data-vis-bg-5: #4080FF;
@data-vis-bg-3: rgb(160, 190, 219);
@dark-data-vis-bg-6: #3C7EFF;
@color-data-vis-bg-8: rgb(var(~'@{arco-cssvars-prefix}-data-vis-bg-8'));
@color-data-vis-bg-5: rgb(var(~'@{arco-cssvars-prefix}-data-vis-bg-5'));
@color-data-vis-bg-6: rgb(var(~'@{arco-cssvars-prefix}-data-vis-bg-6'));
@dark-data-vis-bg-3: rgb(114, 136, 157);
@color-data-vis-bg-4: rgb(var(~'@{arco-cssvars-prefix}-data-vis-bg-4'));
@dark-data-vis-bg-8: #93BEFF;
@dark-data-vis-bg-9: #BEDAFF;
@color-data-vis-bg-7: rgb(var(~'@{arco-cssvars-prefix}-data-vis-bg-7'));
@dark-data-vis-bg-7: #689FFF;
@dark-data-vis-bg-10: #EAF4FF;
@dark-data-vis-bg-1: rgb(55, 71, 108);
@data-vis-bg-9: #031A79;
@data-vis-bg-10: #000D4D;
@data-vis-bg-4: #6AA1FF;
@color-data-vis-bg-1: rgb(var(~'@{arco-cssvars-prefix}-data-vis-bg-1'));
@data-vis-bg-2: rgb(233, 238, 246);
@dark-data-vis-bg-5: #306FFF;
@color-data-vis-bg-10: rgb(var(~'@{arco-cssvars-prefix}-data-vis-bg-10'));
@color-data-vis2-10: rgb(var(~'@{arco-cssvars-prefix}-data-vis2-10'));
@color-data-vis2-6: rgb(var(~'@{arco-cssvars-prefix}-data-vis2-6'));
@color-data-vis2-8: rgb(var(~'@{arco-cssvars-prefix}-data-vis2-8'));
@data-vis2-1: rgb(255, 100, 100);
@color-data-vis2-5: rgb(var(~'@{arco-cssvars-prefix}-data-vis2-5'));
@data-vis2-2: #BEDAFF;
@color-data-vis2-4: rgb(var(~'@{arco-cssvars-prefix}-data-vis2-4'));
@dark-data-vis2-5: #306FFF;
@data-vis2-6: #165DFF;
@color-data-vis2-2: rgb(var(~'@{arco-cssvars-prefix}-data-vis2-2'));
@color-data-vis2-3: rgb(var(~'@{arco-cssvars-prefix}-data-vis2-3'));
@data-vis2-3: #94BFFF;
@dark-data-vis2-6: #3C7EFF;
@dark-data-vis2-2: #041B79;
@color-data-vis2-7: rgb(var(~'@{arco-cssvars-prefix}-data-vis2-7'));
@dark-data-vis2-1: #000D4D;
@data-vis2-7: #0E42D2;
@dark-data-vis2-8: #93BEFF;
@color-data-vis2-1: rgb(var(~'@{arco-cssvars-prefix}-data-vis2-1'));
@dark-data-vis2-3: #0E32A6;
@dark-data-vis2-10: #EAF4FF;
@dark-data-vis2-7: #689FFF;
@data-vis2-8: #072CA6;
@dark-data-vis2-4: #1D4DD2;
@data-vis2-10: #000D4D;
@data-vis2-5: #4080FF;
@dark-data-vis2-9: #BEDAFF;
@data-vis2-4: #6AA1FF;
@color-data-vis2-9: rgb(var(~'@{arco-cssvars-prefix}-data-vis2-9'));
@data-vis2-9: #031A79;


  @arco-theme-tag: body;
  @arco-vars-prefix: ~'';
  @arco-cssvars-prefix: if(@arco-vars-prefix = ~'', -, ~'--@{arco-vars-prefix}');

  @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: @color-primary-1;
  @color-primary-light-2: @color-primary-2;
  @color-primary-light-3: @color-primary-3;
  @color-primary-light-4: @color-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: @color-danger-1;
  @color-danger-light-2: @color-danger-2;
  @color-danger-light-3: @color-danger-3;
  @color-danger-light-4: @color-danger-4;
  @color-success-light-1: @color-success-1;
  @color-success-light-2: @color-success-2;
  @color-success-light-3: @color-success-3;
  @color-success-light-4: @color-success-4;
  @color-warning-light-1: @color-warning-1;
  @color-warning-light-2: @color-warning-2;
  @color-warning-light-3: @color-warning-3;
  @color-warning-light-4: @color-warning-4;
  @color-link-light-1: @color-link-1;
  @color-link-light-2: @color-link-2;
  @color-link-light-3: @color-link-3;
  @color-link-light-4: @color-link-4;

  @dark-color-border: #333335;
  @dark-color-bg-1: #17171a;
  @dark-color-bg-2: #232324;
  @dark-color-bg-3: #2a2a2b;
  @dark-color-bg-4: #313132;
  @dark-color-bg-5: #373739;
  @dark-color-bg-white: #f6f6f6;
  @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-border-1: var(~'@{arco-cssvars-prefix}-color-neutral-2');
  @dark-color-border-2: var(~'@{arco-cssvars-prefix}-color-neutral-3');
  @dark-color-border-3: var(~'@{arco-cssvars-prefix}-color-neutral-4');
  @dark-color-border-4: var(~'@{arco-cssvars-prefix}-color-neutral-6');
  @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-primary-light-1: replace(~'@{color-primary-6}', 'rgb\((.*)\)$', 'rgba($1, 0.2)');
  @dark-color-primary-light-2: replace(~'@{color-primary-6}', 'rgb\((.*)\)$', 'rgba($1, 0.35)');
  @dark-color-primary-light-3: replace(~'@{color-primary-6}', 'rgb\((.*)\)$', 'rgba($1, 0.5)');
  @dark-color-primary-light-4: replace(~'@{color-primary-6}', 'rgb\((.*)\)$', 'rgba($1, 0.65)');
  @dark-color-danger-light-1: replace(~'@{color-danger-6}', 'rgb\((.*)\)$', 'rgba($1, 0.2)');
  @dark-color-danger-light-2: replace(~'@{color-danger-6}', 'rgb\((.*)\)$', 'rgba($1, 0.35)');
  @dark-color-danger-light-3: replace(~'@{color-danger-6}', 'rgb\((.*)\)$', 'rgba($1, 0.5)');
  @dark-color-danger-light-4: replace(~'@{color-danger-6}', 'rgb\((.*)\)$', 'rgba($1, 0.65)');
  @dark-color-success-light-1: replace(~'@{color-success-6}', 'rgb\((.*)\)$', 'rgba($1, 0.2)');
  @dark-color-success-light-2: replace(~'@{color-success-6}', 'rgb\((.*)\)$', 'rgba($1, 0.35)');
  @dark-color-success-light-3: replace(~'@{color-success-6}', 'rgb\((.*)\)$', 'rgba($1, 0.5)');
  @dark-color-success-light-4: replace(~'@{color-success-6}', 'rgb\((.*)\)$', 'rgba($1, 0.65)');
  @dark-color-warning-light-1: replace(~'@{color-warning-6}', 'rgb\((.*)\)$', 'rgba($1, 0.2)');
  @dark-color-warning-light-2: replace(~'@{color-warning-6}', 'rgb\((.*)\)$', 'rgba($1, 0.35)');
  @dark-color-warning-light-3: replace(~'@{color-warning-6}', 'rgb\((.*)\)$', 'rgba($1, 0.5)');
  @dark-color-warning-light-4: replace(~'@{color-warning-6}', 'rgb\((.*)\)$', 'rgba($1, 0.65)');
  @dark-color-link-light-1: replace(~'@{color-link-6}', 'rgb\((.*)\)$', 'rgba($1, 0.2)');
  @dark-color-link-light-2: replace(~'@{color-link-6}', 'rgb\((.*)\)$', 'rgba($1, 0.35)');
  @dark-color-link-light-3: replace(~'@{color-link-6}', 'rgb\((.*)\)$', 'rgba($1, 0.5)');
  @dark-color-link-light-4: replace(~'@{color-link-6}', 'rgb\((.*)\)$', 'rgba($1, 0.65)');

  @color-white: #ffffff;
  @dark-color-white: fade(@color-white, 90%);

  @{arco-theme-tag} {
    font-family: @font-family;
  }

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

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

  }

  @{arco-theme-tag}[arco-theme='dark'] {
    @{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;
    @{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;
    @{arco-cssvars-prefix}-color-bg-white: @dark-color-bg-white;
    @{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-border-1: @dark-color-border-1;
    @{arco-cssvars-prefix}-color-border-2: @dark-color-border-2;
    @{arco-cssvars-prefix}-color-border-3: @dark-color-border-3;
    @{arco-cssvars-prefix}-color-border-4: @dark-color-border-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;

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

  @{arco-theme-tag} {
    @{arco-cssvars-prefix}-red-1: .getColorRgbStr(@red-1)[];
    @{arco-cssvars-prefix}-red-2: .getColorRgbStr(@red-2)[];
    @{arco-cssvars-prefix}-red-3: .getColorRgbStr(@red-3)[];
    @{arco-cssvars-prefix}-red-4: .getColorRgbStr(@red-4)[];
    @{arco-cssvars-prefix}-red-5: .getColorRgbStr(@red-5)[];
    @{arco-cssvars-prefix}-red-6: .getColorRgbStr(@red-6)[];
    @{arco-cssvars-prefix}-red-7: .getColorRgbStr(@red-7)[];
    @{arco-cssvars-prefix}-red-8: .getColorRgbStr(@red-8)[];
    @{arco-cssvars-prefix}-red-9: .getColorRgbStr(@red-9)[];
    @{arco-cssvars-prefix}-red-10: .getColorRgbStr(@red-10)[];
    @{arco-cssvars-prefix}-orangered-1: .getColorRgbStr(@orangered-1)[];
    @{arco-cssvars-prefix}-orangered-2: .getColorRgbStr(@orangered-2)[];
    @{arco-cssvars-prefix}-orangered-3: .getColorRgbStr(@orangered-3)[];
    @{arco-cssvars-prefix}-orangered-4: .getColorRgbStr(@orangered-4)[];
    @{arco-cssvars-prefix}-orangered-5: .getColorRgbStr(@orangered-5)[];
    @{arco-cssvars-prefix}-orangered-6: .getColorRgbStr(@orangered-6)[];
    @{arco-cssvars-prefix}-orangered-7: .getColorRgbStr(@orangered-7)[];
    @{arco-cssvars-prefix}-orangered-8: .getColorRgbStr(@orangered-8)[];
    @{arco-cssvars-prefix}-orangered-9: .getColorRgbStr(@orangered-9)[];
    @{arco-cssvars-prefix}-orangered-10: .getColorRgbStr(@orangered-10)[];
    @{arco-cssvars-prefix}-orange-1: .getColorRgbStr(@orange-1)[];
    @{arco-cssvars-prefix}-orange-2: .getColorRgbStr(@orange-2)[];
    @{arco-cssvars-prefix}-orange-3: .getColorRgbStr(@orange-3)[];
    @{arco-cssvars-prefix}-orange-4: .getColorRgbStr(@orange-4)[];
    @{arco-cssvars-prefix}-orange-5: .getColorRgbStr(@orange-5)[];
    @{arco-cssvars-prefix}-orange-6: .getColorRgbStr(@orange-6)[];
    @{arco-cssvars-prefix}-orange-7: .getColorRgbStr(@orange-7)[];
    @{arco-cssvars-prefix}-orange-8: .getColorRgbStr(@orange-8)[];
    @{arco-cssvars-prefix}-orange-9: .getColorRgbStr(@orange-9)[];
    @{arco-cssvars-prefix}-orange-10: .getColorRgbStr(@orange-10)[];
    @{arco-cssvars-prefix}-gold-1: .getColorRgbStr(@gold-1)[];
    @{arco-cssvars-prefix}-gold-2: .getColorRgbStr(@gold-2)[];
    @{arco-cssvars-prefix}-gold-3: .getColorRgbStr(@gold-3)[];
    @{arco-cssvars-prefix}-gold-4: .getColorRgbStr(@gold-4)[];
    @{arco-cssvars-prefix}-gold-5: .getColorRgbStr(@gold-5)[];
    @{arco-cssvars-prefix}-gold-6: .getColorRgbStr(@gold-6)[];
    @{arco-cssvars-prefix}-gold-7: .getColorRgbStr(@gold-7)[];
    @{arco-cssvars-prefix}-gold-8: .getColorRgbStr(@gold-8)[];
    @{arco-cssvars-prefix}-gold-9: .getColorRgbStr(@gold-9)[];
    @{arco-cssvars-prefix}-gold-10: .getColorRgbStr(@gold-10)[];
    @{arco-cssvars-prefix}-yellow-1: .getColorRgbStr(@yellow-1)[];
    @{arco-cssvars-prefix}-yellow-2: .getColorRgbStr(@yellow-2)[];
    @{arco-cssvars-prefix}-yellow-3: .getColorRgbStr(@yellow-3)[];
    @{arco-cssvars-prefix}-yellow-4: .getColorRgbStr(@yellow-4)[];
    @{arco-cssvars-prefix}-yellow-5: .getColorRgbStr(@yellow-5)[];
    @{arco-cssvars-prefix}-yellow-6: .getColorRgbStr(@yellow-6)[];
    @{arco-cssvars-prefix}-yellow-7: .getColorRgbStr(@yellow-7)[];
    @{arco-cssvars-prefix}-yellow-8: .getColorRgbStr(@yellow-8)[];
    @{arco-cssvars-prefix}-yellow-9: .getColorRgbStr(@yellow-9)[];
    @{arco-cssvars-prefix}-yellow-10: .getColorRgbStr(@yellow-10)[];
    @{arco-cssvars-prefix}-lime-1: .getColorRgbStr(@lime-1)[];
    @{arco-cssvars-prefix}-lime-2: .getColorRgbStr(@lime-2)[];
    @{arco-cssvars-prefix}-lime-3: .getColorRgbStr(@lime-3)[];
    @{arco-cssvars-prefix}-lime-4: .getColorRgbStr(@lime-4)[];
    @{arco-cssvars-prefix}-lime-5: .getColorRgbStr(@lime-5)[];
    @{arco-cssvars-prefix}-lime-6: .getColorRgbStr(@lime-6)[];
    @{arco-cssvars-prefix}-lime-7: .getColorRgbStr(@lime-7)[];
    @{arco-cssvars-prefix}-lime-8: .getColorRgbStr(@lime-8)[];
    @{arco-cssvars-prefix}-lime-9: .getColorRgbStr(@lime-9)[];
    @{arco-cssvars-prefix}-lime-10: .getColorRgbStr(@lime-10)[];
    @{arco-cssvars-prefix}-green-1: .getColorRgbStr(@green-1)[];
    @{arco-cssvars-prefix}-green-2: .getColorRgbStr(@green-2)[];
    @{arco-cssvars-prefix}-green-3: .getColorRgbStr(@green-3)[];
    @{arco-cssvars-prefix}-green-4: .getColorRgbStr(@green-4)[];
    @{arco-cssvars-prefix}-green-5: .getColorRgbStr(@green-5)[];
    @{arco-cssvars-prefix}-green-6: .getColorRgbStr(@green-6)[];
    @{arco-cssvars-prefix}-green-7: .getColorRgbStr(@green-7)[];
    @{arco-cssvars-prefix}-green-8: .getColorRgbStr(@green-8)[];
    @{arco-cssvars-prefix}-green-9: .getColorRgbStr(@green-9)[];
    @{arco-cssvars-prefix}-green-10: .getColorRgbStr(@green-10)[];
    @{arco-cssvars-prefix}-cyan-1: .getColorRgbStr(@cyan-1)[];
    @{arco-cssvars-prefix}-cyan-2: .getColorRgbStr(@cyan-2)[];
    @{arco-cssvars-prefix}-cyan-3: .getColorRgbStr(@cyan-3)[];
    @{arco-cssvars-prefix}-cyan-4: .getColorRgbStr(@cyan-4)[];
    @{arco-cssvars-prefix}-cyan-5: .getColorRgbStr(@cyan-5)[];
    @{arco-cssvars-prefix}-cyan-6: .getColorRgbStr(@cyan-6)[];
    @{arco-cssvars-prefix}-cyan-7: .getColorRgbStr(@cyan-7)[];
    @{arco-cssvars-prefix}-cyan-8: .getColorRgbStr(@cyan-8)[];
    @{arco-cssvars-prefix}-cyan-9: .getColorRgbStr(@cyan-9)[];
    @{arco-cssvars-prefix}-cyan-10: .getColorRgbStr(@cyan-10)[];
    @{arco-cssvars-prefix}-blue-1: .getColorRgbStr(@blue-1)[];
    @{arco-cssvars-prefix}-blue-2: .getColorRgbStr(@blue-2)[];
    @{arco-cssvars-prefix}-blue-3: .getColorRgbStr(@blue-3)[];
    @{arco-cssvars-prefix}-blue-4: .getColorRgbStr(@blue-4)[];
    @{arco-cssvars-prefix}-blue-5: .getColorRgbStr(@blue-5)[];
    @{arco-cssvars-prefix}-blue-6: .getColorRgbStr(@blue-6)[];
    @{arco-cssvars-prefix}-blue-7: .getColorRgbStr(@blue-7)[];
    @{arco-cssvars-prefix}-blue-8: .getColorRgbStr(@blue-8)[];
    @{arco-cssvars-prefix}-blue-9: .getColorRgbStr(@blue-9)[];
    @{arco-cssvars-prefix}-blue-10: .getColorRgbStr(@blue-10)[];
    @{arco-cssvars-prefix}-arcoblue-1: .getColorRgbStr(@arcoblue-1)[];
    @{arco-cssvars-prefix}-arcoblue-2: .getColorRgbStr(@arcoblue-2)[];
    @{arco-cssvars-prefix}-arcoblue-3: .getColorRgbStr(@arcoblue-3)[];
    @{arco-cssvars-prefix}-arcoblue-4: .getColorRgbStr(@arcoblue-4)[];
    @{arco-cssvars-prefix}-arcoblue-5: .getColorRgbStr(@arcoblue-5)[];
    @{arco-cssvars-prefix}-arcoblue-6: .getColorRgbStr(@arcoblue-6)[];
    @{arco-cssvars-prefix}-arcoblue-7: .getColorRgbStr(@arcoblue-7)[];
    @{arco-cssvars-prefix}-arcoblue-8: .getColorRgbStr(@arcoblue-8)[];
    @{arco-cssvars-prefix}-arcoblue-9: .getColorRgbStr(@arcoblue-9)[];
    @{arco-cssvars-prefix}-arcoblue-10: .getColorRgbStr(@arcoblue-10)[];
    @{arco-cssvars-prefix}-purple-1: .getColorRgbStr(@purple-1)[];
    @{arco-cssvars-prefix}-purple-2: .getColorRgbStr(@purple-2)[];
    @{arco-cssvars-prefix}-purple-3: .getColorRgbStr(@purple-3)[];
    @{arco-cssvars-prefix}-purple-4: .getColorRgbStr(@purple-4)[];
    @{arco-cssvars-prefix}-purple-5: .getColorRgbStr(@purple-5)[];
    @{arco-cssvars-prefix}-purple-6: .getColorRgbStr(@purple-6)[];
    @{arco-cssvars-prefix}-purple-7: .getColorRgbStr(@purple-7)[];
    @{arco-cssvars-prefix}-purple-8: .getColorRgbStr(@purple-8)[];
    @{arco-cssvars-prefix}-purple-9: .getColorRgbStr(@purple-9)[];
    @{arco-cssvars-prefix}-purple-10: .getColorRgbStr(@purple-10)[];
    @{arco-cssvars-prefix}-pinkpurple-1: .getColorRgbStr(@pinkpurple-1)[];
    @{arco-cssvars-prefix}-pinkpurple-2: .getColorRgbStr(@pinkpurple-2)[];
    @{arco-cssvars-prefix}-pinkpurple-3: .getColorRgbStr(@pinkpurple-3)[];
    @{arco-cssvars-prefix}-pinkpurple-4: .getColorRgbStr(@pinkpurple-4)[];
    @{arco-cssvars-prefix}-pinkpurple-5: .getColorRgbStr(@pinkpurple-5)[];
    @{arco-cssvars-prefix}-pinkpurple-6: .getColorRgbStr(@pinkpurple-6)[];
    @{arco-cssvars-prefix}-pinkpurple-7: .getColorRgbStr(@pinkpurple-7)[];
    @{arco-cssvars-prefix}-pinkpurple-8: .getColorRgbStr(@pinkpurple-8)[];
    @{arco-cssvars-prefix}-pinkpurple-9: .getColorRgbStr(@pinkpurple-9)[];
    @{arco-cssvars-prefix}-pinkpurple-10: .getColorRgbStr(@pinkpurple-10)[];
    @{arco-cssvars-prefix}-magenta-1: .getColorRgbStr(@magenta-1)[];
    @{arco-cssvars-prefix}-magenta-2: .getColorRgbStr(@magenta-2)[];
    @{arco-cssvars-prefix}-magenta-3: .getColorRgbStr(@magenta-3)[];
    @{arco-cssvars-prefix}-magenta-4: .getColorRgbStr(@magenta-4)[];
    @{arco-cssvars-prefix}-magenta-5: .getColorRgbStr(@magenta-5)[];
    @{arco-cssvars-prefix}-magenta-6: .getColorRgbStr(@magenta-6)[];
    @{arco-cssvars-prefix}-magenta-7: .getColorRgbStr(@magenta-7)[];
    @{arco-cssvars-prefix}-magenta-8: .getColorRgbStr(@magenta-8)[];
    @{arco-cssvars-prefix}-magenta-9: .getColorRgbStr(@magenta-9)[];
    @{arco-cssvars-prefix}-magenta-10: .getColorRgbStr(@magenta-10)[];
    @{arco-cssvars-prefix}-gray-1: .getColorRgbStr(@gray-1)[];
    @{arco-cssvars-prefix}-gray-2: .getColorRgbStr(@gray-2)[];
    @{arco-cssvars-prefix}-gray-3: .getColorRgbStr(@gray-3)[];
    @{arco-cssvars-prefix}-gray-4: .getColorRgbStr(@gray-4)[];
    @{arco-cssvars-prefix}-gray-5: .getColorRgbStr(@gray-5)[];
    @{arco-cssvars-prefix}-gray-6: .getColorRgbStr(@gray-6)[];
    @{arco-cssvars-prefix}-gray-7: .getColorRgbStr(@gray-7)[];
    @{arco-cssvars-prefix}-gray-8: .getColorRgbStr(@gray-8)[];
    @{arco-cssvars-prefix}-gray-9: .getColorRgbStr(@gray-9)[];
    @{arco-cssvars-prefix}-gray-10: .getColorRgbStr(@gray-10)[];

  @{arco-cssvars-prefix}-primary-1: if(iscolor(@primary-1), .getColorRgbStr(@primary-1)[], replace(~'@{primary-1}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-primary-2: if(iscolor(@primary-2), .getColorRgbStr(@primary-2)[], replace(~'@{primary-2}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-primary-3: if(iscolor(@primary-3), .getColorRgbStr(@primary-3)[], replace(~'@{primary-3}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-primary-4: if(iscolor(@primary-4), .getColorRgbStr(@primary-4)[], replace(~'@{primary-4}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-primary-5: if(iscolor(@primary-5), .getColorRgbStr(@primary-5)[], replace(~'@{primary-5}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-primary-6: if(iscolor(@primary-6), .getColorRgbStr(@primary-6)[], replace(~'@{primary-6}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-primary-7: if(iscolor(@primary-7), .getColorRgbStr(@primary-7)[], replace(~'@{primary-7}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-primary-8: if(iscolor(@primary-8), .getColorRgbStr(@primary-8)[], replace(~'@{primary-8}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-primary-9: if(iscolor(@primary-9), .getColorRgbStr(@primary-9)[], replace(~'@{primary-9}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-primary-10: if(iscolor(@primary-10), .getColorRgbStr(@primary-10)[],  replace(~'@{primary-10}', 'rgb\((.*)\)$', '$1'));

  @{arco-cssvars-prefix}-link-1: if(iscolor(@link-1), .getColorRgbStr(@link-1)[], replace(~'@{link-1}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-link-2: if(iscolor(@link-2), .getColorRgbStr(@link-2)[], replace(~'@{link-2}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-link-3: if(iscolor(@link-3), .getColorRgbStr(@link-3)[], replace(~'@{link-3}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-link-4: if(iscolor(@link-4), .getColorRgbStr(@link-4)[], replace(~'@{link-4}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-link-5: if(iscolor(@link-5), .getColorRgbStr(@link-5)[], replace(~'@{link-5}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-link-6: if(iscolor(@link-6), .getColorRgbStr(@link-6)[], replace(~'@{link-6}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-link-7: if(iscolor(@link-7), .getColorRgbStr(@link-7)[], replace(~'@{link-7}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-link-8: if(iscolor(@link-8), .getColorRgbStr(@link-8)[], replace(~'@{link-8}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-link-9: if(iscolor(@link-9), .getColorRgbStr(@link-9)[], replace(~'@{link-9}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-link-10: if(iscolor(@link-10), .getColorRgbStr(@link-10)[],  replace(~'@{link-10}', 'rgb\((.*)\)$', '$1'));

  @{arco-cssvars-prefix}-success-1: if(iscolor(@success-1), .getColorRgbStr(@success-1)[], replace(~'@{success-1}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-success-2: if(iscolor(@success-2), .getColorRgbStr(@success-2)[], replace(~'@{success-2}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-success-3: if(iscolor(@success-3), .getColorRgbStr(@success-3)[], replace(~'@{success-3}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-success-4: if(iscolor(@success-4), .getColorRgbStr(@success-4)[], replace(~'@{success-4}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-success-5: if(iscolor(@success-5), .getColorRgbStr(@success-5)[], replace(~'@{success-5}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-success-6: if(iscolor(@success-6), .getColorRgbStr(@success-6)[], replace(~'@{success-6}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-success-7: if(iscolor(@success-7), .getColorRgbStr(@success-7)[], replace(~'@{success-7}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-success-8: if(iscolor(@success-8), .getColorRgbStr(@success-8)[], replace(~'@{success-8}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-success-9: if(iscolor(@success-9), .getColorRgbStr(@success-9)[], replace(~'@{success-9}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-success-10: if(iscolor(@success-10), .getColorRgbStr(@success-10)[], replace(~'@{success-10}', 'rgb\((.*)\)$', '$1'));
  // 错误色
  @{arco-cssvars-prefix}-danger-1: if(iscolor(@danger-1), .getColorRgbStr(@danger-1)[], replace(~'@{danger-1}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-danger-2: if(iscolor(@danger-2), .getColorRgbStr(@danger-2)[], replace(~'@{danger-2}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-danger-3: if(iscolor(@danger-3), .getColorRgbStr(@danger-3)[], replace(~'@{danger-3}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-danger-4: if(iscolor(@danger-4), .getColorRgbStr(@danger-4)[], replace(~'@{danger-4}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-danger-5: if(iscolor(@danger-5), .getColorRgbStr(@danger-5)[], replace(~'@{danger-5}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-danger-6: if(iscolor(@danger-6), .getColorRgbStr(@danger-6)[], replace(~'@{danger-6}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-danger-7: if(iscolor(@danger-7), .getColorRgbStr(@danger-7)[], replace(~'@{danger-7}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-danger-8: if(iscolor(@danger-8), .getColorRgbStr(@danger-8)[], replace(~'@{danger-8}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-danger-9: if(iscolor(@danger-9), .getColorRgbStr(@danger-9)[], replace(~'@{danger-9}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-danger-10: if(iscolor(@danger-10), .getColorRgbStr(@danger-10)[], replace(~'@{danger-10}', 'rgb\((.*)\)$', '$1'));
  // 警示色
  @{arco-cssvars-prefix}-warning-1: if(iscolor(@warning-1), .getColorRgbStr(@warning-1)[], replace(~'@{warning-1}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-warning-2: if(iscolor(@warning-2), .getColorRgbStr(@warning-2)[], replace(~'@{warning-2}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-warning-3: if(iscolor(@warning-3), .getColorRgbStr(@warning-3)[], replace(~'@{warning-3}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-warning-4: if(iscolor(@warning-4), .getColorRgbStr(@warning-4)[], replace(~'@{warning-4}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-warning-5: if(iscolor(@warning-5), .getColorRgbStr(@warning-5)[], replace(~'@{warning-5}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-warning-6: if(iscolor(@warning-6), .getColorRgbStr(@warning-6)[], replace(~'@{warning-6}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-warning-7: if(iscolor(@warning-7), .getColorRgbStr(@warning-7)[], replace(~'@{warning-7}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-warning-8: if(iscolor(@warning-8), .getColorRgbStr(@warning-8)[], replace(~'@{warning-8}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-warning-9: if(iscolor(@warning-9), .getColorRgbStr(@warning-9)[], replace(~'@{warning-9}', 'rgb\((.*)\)$', '$1'));
  @{arco-cssvars-prefix}-warning-10: if(iscolor(@warning-10), .getColorRgbStr(@warning-10)[], replace(~'@{warning-10}', 'rgb\((.*)\)$', '$1'));

    @{arco-cssvars-prefix}-color-text-5: @color-text-5;
@{arco-cssvars-prefix}-color-text-6: @color-text-6;
@{arco-cssvars-prefix}-color-fill-5: @color-fill-5;
@{arco-cssvars-prefix}-color-bg-6: @color-bg-6;
@{arco-cssvars-prefix}-tip-1: if(iscolor(@tip-1), .getColorRgbStr(@tip-1)[], replace(~'@{tip-1}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-2: if(iscolor(@tip-2), .getColorRgbStr(@tip-2)[], replace(~'@{tip-2}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-3: if(iscolor(@tip-3), .getColorRgbStr(@tip-3)[], replace(~'@{tip-3}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-4: if(iscolor(@tip-4), .getColorRgbStr(@tip-4)[], replace(~'@{tip-4}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-5: if(iscolor(@tip-5), .getColorRgbStr(@tip-5)[], replace(~'@{tip-5}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-6: if(iscolor(@tip-6), .getColorRgbStr(@tip-6)[], replace(~'@{tip-6}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-7: if(iscolor(@tip-7), .getColorRgbStr(@tip-7)[], replace(~'@{tip-7}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-8: if(iscolor(@tip-8), .getColorRgbStr(@tip-8)[], replace(~'@{tip-8}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-9: if(iscolor(@tip-9), .getColorRgbStr(@tip-9)[], replace(~'@{tip-9}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-10: if(iscolor(@tip-10), .getColorRgbStr(@tip-10)[], replace(~'@{tip-10}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-1: if(iscolor(@data-vis-1), .getColorRgbStr(@data-vis-1)[], replace(~'@{data-vis-1}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-2: if(iscolor(@data-vis-2), .getColorRgbStr(@data-vis-2)[], replace(~'@{data-vis-2}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-3: if(iscolor(@data-vis-3), .getColorRgbStr(@data-vis-3)[], replace(~'@{data-vis-3}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-4: if(iscolor(@data-vis-4), .getColorRgbStr(@data-vis-4)[], replace(~'@{data-vis-4}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-5: if(iscolor(@data-vis-5), .getColorRgbStr(@data-vis-5)[], replace(~'@{data-vis-5}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-6: if(iscolor(@data-vis-6), .getColorRgbStr(@data-vis-6)[], replace(~'@{data-vis-6}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-7: if(iscolor(@data-vis-7), .getColorRgbStr(@data-vis-7)[], replace(~'@{data-vis-7}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-8: if(iscolor(@data-vis-8), .getColorRgbStr(@data-vis-8)[], replace(~'@{data-vis-8}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-9: if(iscolor(@data-vis-9), .getColorRgbStr(@data-vis-9)[], replace(~'@{data-vis-9}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-10: if(iscolor(@data-vis-10), .getColorRgbStr(@data-vis-10)[], replace(~'@{data-vis-10}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-1: if(iscolor(@data-vis-guide-1), .getColorRgbStr(@data-vis-guide-1)[], replace(~'@{data-vis-guide-1}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-2: if(iscolor(@data-vis-guide-2), .getColorRgbStr(@data-vis-guide-2)[], replace(~'@{data-vis-guide-2}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-3: if(iscolor(@data-vis-guide-3), .getColorRgbStr(@data-vis-guide-3)[], replace(~'@{data-vis-guide-3}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-4: if(iscolor(@data-vis-guide-4), .getColorRgbStr(@data-vis-guide-4)[], replace(~'@{data-vis-guide-4}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-5: if(iscolor(@data-vis-guide-5), .getColorRgbStr(@data-vis-guide-5)[], replace(~'@{data-vis-guide-5}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-6: if(iscolor(@data-vis-guide-6), .getColorRgbStr(@data-vis-guide-6)[], replace(~'@{data-vis-guide-6}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-7: if(iscolor(@data-vis-guide-7), .getColorRgbStr(@data-vis-guide-7)[], replace(~'@{data-vis-guide-7}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-8: if(iscolor(@data-vis-guide-8), .getColorRgbStr(@data-vis-guide-8)[], replace(~'@{data-vis-guide-8}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-9: if(iscolor(@data-vis-guide-9), .getColorRgbStr(@data-vis-guide-9)[], replace(~'@{data-vis-guide-9}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-10: if(iscolor(@data-vis-guide-10), .getColorRgbStr(@data-vis-guide-10)[], replace(~'@{data-vis-guide-10}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-1: if(iscolor(@data-vis-axis-1), .getColorRgbStr(@data-vis-axis-1)[], replace(~'@{data-vis-axis-1}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-2: if(iscolor(@data-vis-axis-2), .getColorRgbStr(@data-vis-axis-2)[], replace(~'@{data-vis-axis-2}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-3: if(iscolor(@data-vis-axis-3), .getColorRgbStr(@data-vis-axis-3)[], replace(~'@{data-vis-axis-3}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-4: if(iscolor(@data-vis-axis-4), .getColorRgbStr(@data-vis-axis-4)[], replace(~'@{data-vis-axis-4}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-5: if(iscolor(@data-vis-axis-5), .getColorRgbStr(@data-vis-axis-5)[], replace(~'@{data-vis-axis-5}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-6: if(iscolor(@data-vis-axis-6), .getColorRgbStr(@data-vis-axis-6)[], replace(~'@{data-vis-axis-6}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-7: if(iscolor(@data-vis-axis-7), .getColorRgbStr(@data-vis-axis-7)[], replace(~'@{data-vis-axis-7}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-8: if(iscolor(@data-vis-axis-8), .getColorRgbStr(@data-vis-axis-8)[], replace(~'@{data-vis-axis-8}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-9: if(iscolor(@data-vis-axis-9), .getColorRgbStr(@data-vis-axis-9)[], replace(~'@{data-vis-axis-9}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-10: if(iscolor(@data-vis-axis-10), .getColorRgbStr(@data-vis-axis-10)[], replace(~'@{data-vis-axis-10}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-1: if(iscolor(@data-vis-bg-1), .getColorRgbStr(@data-vis-bg-1)[], replace(~'@{data-vis-bg-1}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-2: if(iscolor(@data-vis-bg-2), .getColorRgbStr(@data-vis-bg-2)[], replace(~'@{data-vis-bg-2}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-3: if(iscolor(@data-vis-bg-3), .getColorRgbStr(@data-vis-bg-3)[], replace(~'@{data-vis-bg-3}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-4: if(iscolor(@data-vis-bg-4), .getColorRgbStr(@data-vis-bg-4)[], replace(~'@{data-vis-bg-4}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-5: if(iscolor(@data-vis-bg-5), .getColorRgbStr(@data-vis-bg-5)[], replace(~'@{data-vis-bg-5}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-6: if(iscolor(@data-vis-bg-6), .getColorRgbStr(@data-vis-bg-6)[], replace(~'@{data-vis-bg-6}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-7: if(iscolor(@data-vis-bg-7), .getColorRgbStr(@data-vis-bg-7)[], replace(~'@{data-vis-bg-7}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-8: if(iscolor(@data-vis-bg-8), .getColorRgbStr(@data-vis-bg-8)[], replace(~'@{data-vis-bg-8}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-9: if(iscolor(@data-vis-bg-9), .getColorRgbStr(@data-vis-bg-9)[], replace(~'@{data-vis-bg-9}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-10: if(iscolor(@data-vis-bg-10), .getColorRgbStr(@data-vis-bg-10)[], replace(~'@{data-vis-bg-10}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-1: if(iscolor(@data-vis2-1), .getColorRgbStr(@data-vis2-1)[], replace(~'@{data-vis2-1}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-2: if(iscolor(@data-vis2-2), .getColorRgbStr(@data-vis2-2)[], replace(~'@{data-vis2-2}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-3: if(iscolor(@data-vis2-3), .getColorRgbStr(@data-vis2-3)[], replace(~'@{data-vis2-3}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-4: if(iscolor(@data-vis2-4), .getColorRgbStr(@data-vis2-4)[], replace(~'@{data-vis2-4}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-5: if(iscolor(@data-vis2-5), .getColorRgbStr(@data-vis2-5)[], replace(~'@{data-vis2-5}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-6: if(iscolor(@data-vis2-6), .getColorRgbStr(@data-vis2-6)[], replace(~'@{data-vis2-6}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-7: if(iscolor(@data-vis2-7), .getColorRgbStr(@data-vis2-7)[], replace(~'@{data-vis2-7}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-8: if(iscolor(@data-vis2-8), .getColorRgbStr(@data-vis2-8)[], replace(~'@{data-vis2-8}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-9: if(iscolor(@data-vis2-9), .getColorRgbStr(@data-vis2-9)[], replace(~'@{data-vis2-9}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-10: if(iscolor(@data-vis2-10), .getColorRgbStr(@data-vis2-10)[], replace(~'@{data-vis2-10}', 'rgb\((.*)\)$', '$1'));

  }

  @{arco-theme-tag}[arco-theme='dark'] {
    @{arco-cssvars-prefix}-red-1: .getColorRgbStr(@dark-red-1)[];
    @{arco-cssvars-prefix}-red-2: .getColorRgbStr(@dark-red-2)[];
    @{arco-cssvars-prefix}-red-3: .getColorRgbStr(@dark-red-3)[];
    @{arco-cssvars-prefix}-red-4: .getColorRgbStr(@dark-red-4)[];
    @{arco-cssvars-prefix}-red-5: .getColorRgbStr(@dark-red-5)[];
    @{arco-cssvars-prefix}-red-6: .getColorRgbStr(@dark-red-6)[];
    @{arco-cssvars-prefix}-red-7: .getColorRgbStr(@dark-red-7)[];
    @{arco-cssvars-prefix}-red-8: .getColorRgbStr(@dark-red-8)[];
    @{arco-cssvars-prefix}-red-9: .getColorRgbStr(@dark-red-9)[];
    @{arco-cssvars-prefix}-red-10: .getColorRgbStr(@dark-red-10)[];
    @{arco-cssvars-prefix}-orangered-1: .getColorRgbStr(@dark-orangered-1)[];
    @{arco-cssvars-prefix}-orangered-2: .getColorRgbStr(@dark-orangered-2)[];
    @{arco-cssvars-prefix}-orangered-3: .getColorRgbStr(@dark-orangered-3)[];
    @{arco-cssvars-prefix}-orangered-4: .getColorRgbStr(@dark-orangered-4)[];
    @{arco-cssvars-prefix}-orangered-5: .getColorRgbStr(@dark-orangered-5)[];
    @{arco-cssvars-prefix}-orangered-6: .getColorRgbStr(@dark-orangered-6)[];
    @{arco-cssvars-prefix}-orangered-7: .getColorRgbStr(@dark-orangered-7)[];
    @{arco-cssvars-prefix}-orangered-8: .getColorRgbStr(@dark-orangered-8)[];
    @{arco-cssvars-prefix}-orangered-9: .getColorRgbStr(@dark-orangered-9)[];
    @{arco-cssvars-prefix}-orangered-10: .getColorRgbStr(@dark-orangered-10)[];
    @{arco-cssvars-prefix}-orange-1: .getColorRgbStr(@dark-orange-1)[];
    @{arco-cssvars-prefix}-orange-2: .getColorRgbStr(@dark-orange-2)[];
    @{arco-cssvars-prefix}-orange-3: .getColorRgbStr(@dark-orange-3)[];
    @{arco-cssvars-prefix}-orange-4: .getColorRgbStr(@dark-orange-4)[];
    @{arco-cssvars-prefix}-orange-5: .getColorRgbStr(@dark-orange-5)[];
    @{arco-cssvars-prefix}-orange-6: .getColorRgbStr(@dark-orange-6)[];
    @{arco-cssvars-prefix}-orange-7: .getColorRgbStr(@dark-orange-7)[];
    @{arco-cssvars-prefix}-orange-8: .getColorRgbStr(@dark-orange-8)[];
    @{arco-cssvars-prefix}-orange-9: .getColorRgbStr(@dark-orange-9)[];
    @{arco-cssvars-prefix}-orange-10: .getColorRgbStr(@dark-orange-10)[];
    @{arco-cssvars-prefix}-gold-1: .getColorRgbStr(@dark-gold-1)[];
    @{arco-cssvars-prefix}-gold-2: .getColorRgbStr(@dark-gold-2)[];
    @{arco-cssvars-prefix}-gold-3: .getColorRgbStr(@dark-gold-3)[];
    @{arco-cssvars-prefix}-gold-4: .getColorRgbStr(@dark-gold-4)[];
    @{arco-cssvars-prefix}-gold-5: .getColorRgbStr(@dark-gold-5)[];
    @{arco-cssvars-prefix}-gold-6: .getColorRgbStr(@dark-gold-6)[];
    @{arco-cssvars-prefix}-gold-7: .getColorRgbStr(@dark-gold-7)[];
    @{arco-cssvars-prefix}-gold-8: .getColorRgbStr(@dark-gold-8)[];
    @{arco-cssvars-prefix}-gold-9: .getColorRgbStr(@dark-gold-9)[];
    @{arco-cssvars-prefix}-gold-10: .getColorRgbStr(@dark-gold-10)[];
    @{arco-cssvars-prefix}-yellow-1: .getColorRgbStr(@dark-yellow-1)[];
    @{arco-cssvars-prefix}-yellow-2: .getColorRgbStr(@dark-yellow-2)[];
    @{arco-cssvars-prefix}-yellow-3: .getColorRgbStr(@dark-yellow-3)[];
    @{arco-cssvars-prefix}-yellow-4: .getColorRgbStr(@dark-yellow-4)[];
    @{arco-cssvars-prefix}-yellow-5: .getColorRgbStr(@dark-yellow-5)[];
    @{arco-cssvars-prefix}-yellow-6: .getColorRgbStr(@dark-yellow-6)[];
    @{arco-cssvars-prefix}-yellow-7: .getColorRgbStr(@dark-yellow-7)[];
    @{arco-cssvars-prefix}-yellow-8: .getColorRgbStr(@dark-yellow-8)[];
    @{arco-cssvars-prefix}-yellow-9: .getColorRgbStr(@dark-yellow-9)[];
    @{arco-cssvars-prefix}-yellow-10: .getColorRgbStr(@dark-yellow-10)[];
    @{arco-cssvars-prefix}-lime-1: .getColorRgbStr(@dark-lime-1)[];
    @{arco-cssvars-prefix}-lime-2: .getColorRgbStr(@dark-lime-2)[];
    @{arco-cssvars-prefix}-lime-3: .getColorRgbStr(@dark-lime-3)[];
    @{arco-cssvars-prefix}-lime-4: .getColorRgbStr(@dark-lime-4)[];
    @{arco-cssvars-prefix}-lime-5: .getColorRgbStr(@dark-lime-5)[];
    @{arco-cssvars-prefix}-lime-6: .getColorRgbStr(@dark-lime-6)[];
    @{arco-cssvars-prefix}-lime-7: .getColorRgbStr(@dark-lime-7)[];
    @{arco-cssvars-prefix}-lime-8: .getColorRgbStr(@dark-lime-8)[];
    @{arco-cssvars-prefix}-lime-9: .getColorRgbStr(@dark-lime-9)[];
    @{arco-cssvars-prefix}-lime-10: .getColorRgbStr(@dark-lime-10)[];
    @{arco-cssvars-prefix}-green-1: .getColorRgbStr(@dark-green-1)[];
    @{arco-cssvars-prefix}-green-2: .getColorRgbStr(@dark-green-2)[];
    @{arco-cssvars-prefix}-green-3: .getColorRgbStr(@dark-green-3)[];
    @{arco-cssvars-prefix}-green-4: .getColorRgbStr(@dark-green-4)[];
    @{arco-cssvars-prefix}-green-5: .getColorRgbStr(@dark-green-5)[];
    @{arco-cssvars-prefix}-green-6: .getColorRgbStr(@dark-green-6)[];
    @{arco-cssvars-prefix}-green-7: .getColorRgbStr(@dark-green-7)[];
    @{arco-cssvars-prefix}-green-8: .getColorRgbStr(@dark-green-8)[];
    @{arco-cssvars-prefix}-green-9: .getColorRgbStr(@dark-green-9)[];
    @{arco-cssvars-prefix}-green-10: .getColorRgbStr(@dark-green-10)[];
    @{arco-cssvars-prefix}-cyan-1: .getColorRgbStr(@dark-cyan-1)[];
    @{arco-cssvars-prefix}-cyan-2: .getColorRgbStr(@dark-cyan-2)[];
    @{arco-cssvars-prefix}-cyan-3: .getColorRgbStr(@dark-cyan-3)[];
    @{arco-cssvars-prefix}-cyan-4: .getColorRgbStr(@dark-cyan-4)[];
    @{arco-cssvars-prefix}-cyan-5: .getColorRgbStr(@dark-cyan-5)[];
    @{arco-cssvars-prefix}-cyan-6: .getColorRgbStr(@dark-cyan-6)[];
    @{arco-cssvars-prefix}-cyan-7: .getColorRgbStr(@dark-cyan-7)[];
    @{arco-cssvars-prefix}-cyan-8: .getColorRgbStr(@dark-cyan-8)[];
    @{arco-cssvars-prefix}-cyan-9: .getColorRgbStr(@dark-cyan-9)[];
    @{arco-cssvars-prefix}-cyan-10: .getColorRgbStr(@dark-cyan-10)[];
    @{arco-cssvars-prefix}-blue-1: .getColorRgbStr(@dark-blue-1)[];
    @{arco-cssvars-prefix}-blue-2: .getColorRgbStr(@dark-blue-2)[];
    @{arco-cssvars-prefix}-blue-3: .getColorRgbStr(@dark-blue-3)[];
    @{arco-cssvars-prefix}-blue-4: .getColorRgbStr(@dark-blue-4)[];
    @{arco-cssvars-prefix}-blue-5: .getColorRgbStr(@dark-blue-5)[];
    @{arco-cssvars-prefix}-blue-6: .getColorRgbStr(@dark-blue-6)[];
    @{arco-cssvars-prefix}-blue-7: .getColorRgbStr(@dark-blue-7)[];
    @{arco-cssvars-prefix}-blue-8: .getColorRgbStr(@dark-blue-8)[];
    @{arco-cssvars-prefix}-blue-9: .getColorRgbStr(@dark-blue-9)[];
    @{arco-cssvars-prefix}-blue-10: .getColorRgbStr(@dark-blue-10)[];
    @{arco-cssvars-prefix}-arcoblue-1: .getColorRgbStr(@dark-arcoblue-1)[];
    @{arco-cssvars-prefix}-arcoblue-2: .getColorRgbStr(@dark-arcoblue-2)[];
    @{arco-cssvars-prefix}-arcoblue-3: .getColorRgbStr(@dark-arcoblue-3)[];
    @{arco-cssvars-prefix}-arcoblue-4: .getColorRgbStr(@dark-arcoblue-4)[];
    @{arco-cssvars-prefix}-arcoblue-5: .getColorRgbStr(@dark-arcoblue-5)[];
    @{arco-cssvars-prefix}-arcoblue-6: .getColorRgbStr(@dark-arcoblue-6)[];
    @{arco-cssvars-prefix}-arcoblue-7: .getColorRgbStr(@dark-arcoblue-7)[];
    @{arco-cssvars-prefix}-arcoblue-8: .getColorRgbStr(@dark-arcoblue-8)[];
    @{arco-cssvars-prefix}-arcoblue-9: .getColorRgbStr(@dark-arcoblue-9)[];
    @{arco-cssvars-prefix}-arcoblue-10: .getColorRgbStr(@dark-arcoblue-10)[];
    @{arco-cssvars-prefix}-purple-1: .getColorRgbStr(@dark-purple-1)[];
    @{arco-cssvars-prefix}-purple-2: .getColorRgbStr(@dark-purple-2)[];
    @{arco-cssvars-prefix}-purple-3: .getColorRgbStr(@dark-purple-3)[];
    @{arco-cssvars-prefix}-purple-4: .getColorRgbStr(@dark-purple-4)[];
    @{arco-cssvars-prefix}-purple-5: .getColorRgbStr(@dark-purple-5)[];
    @{arco-cssvars-prefix}-purple-6: .getColorRgbStr(@dark-purple-6)[];
    @{arco-cssvars-prefix}-purple-7: .getColorRgbStr(@dark-purple-7)[];
    @{arco-cssvars-prefix}-purple-8: .getColorRgbStr(@dark-purple-8)[];
    @{arco-cssvars-prefix}-purple-9: .getColorRgbStr(@dark-purple-9)[];
    @{arco-cssvars-prefix}-purple-10: .getColorRgbStr(@dark-purple-10)[];
    @{arco-cssvars-prefix}-pinkpurple-1: .getColorRgbStr(@dark-pinkpurple-1)[];
    @{arco-cssvars-prefix}-pinkpurple-2: .getColorRgbStr(@dark-pinkpurple-2)[];
    @{arco-cssvars-prefix}-pinkpurple-3: .getColorRgbStr(@dark-pinkpurple-3)[];
    @{arco-cssvars-prefix}-pinkpurple-4: .getColorRgbStr(@dark-pinkpurple-4)[];
    @{arco-cssvars-prefix}-pinkpurple-5: .getColorRgbStr(@dark-pinkpurple-5)[];
    @{arco-cssvars-prefix}-pinkpurple-6: .getColorRgbStr(@dark-pinkpurple-6)[];
    @{arco-cssvars-prefix}-pinkpurple-7: .getColorRgbStr(@dark-pinkpurple-7)[];
    @{arco-cssvars-prefix}-pinkpurple-8: .getColorRgbStr(@dark-pinkpurple-8)[];
    @{arco-cssvars-prefix}-pinkpurple-9: .getColorRgbStr(@dark-pinkpurple-9)[];
    @{arco-cssvars-prefix}-pinkpurple-10: .getColorRgbStr(@dark-pinkpurple-10)[];
    @{arco-cssvars-prefix}-magenta-1: .getColorRgbStr(@dark-magenta-1)[];
    @{arco-cssvars-prefix}-magenta-2: .getColorRgbStr(@dark-magenta-2)[];
    @{arco-cssvars-prefix}-magenta-3: .getColorRgbStr(@dark-magenta-3)[];
    @{arco-cssvars-prefix}-magenta-4: .getColorRgbStr(@dark-magenta-4)[];
    @{arco-cssvars-prefix}-magenta-5: .getColorRgbStr(@dark-magenta-5)[];
    @{arco-cssvars-prefix}-magenta-6: .getColorRgbStr(@dark-magenta-6)[];
    @{arco-cssvars-prefix}-magenta-7: .getColorRgbStr(@dark-magenta-7)[];
    @{arco-cssvars-prefix}-magenta-8: .getColorRgbStr(@dark-magenta-8)[];
    @{arco-cssvars-prefix}-magenta-9: .getColorRgbStr(@dark-magenta-9)[];
    @{arco-cssvars-prefix}-magenta-10: .getColorRgbStr(@dark-magenta-10)[];
    @{arco-cssvars-prefix}-gray-1: .getColorRgbStr(@dark-gray-1)[];
    @{arco-cssvars-prefix}-gray-2: .getColorRgbStr(@dark-gray-2)[];
    @{arco-cssvars-prefix}-gray-3: .getColorRgbStr(@dark-gray-3)[];
    @{arco-cssvars-prefix}-gray-4: .getColorRgbStr(@dark-gray-4)[];
    @{arco-cssvars-prefix}-gray-5: .getColorRgbStr(@dark-gray-5)[];
    @{arco-cssvars-prefix}-gray-6: .getColorRgbStr(@dark-gray-6)[];
    @{arco-cssvars-prefix}-gray-7: .getColorRgbStr(@dark-gray-7)[];
    @{arco-cssvars-prefix}-gray-8: .getColorRgbStr(@dark-gray-8)[];
    @{arco-cssvars-prefix}-gray-9: .getColorRgbStr(@dark-gray-9)[];
    @{arco-cssvars-prefix}-gray-10: .getColorRgbStr(@dark-gray-10)[];
    @{arco-cssvars-prefix}-primary-1: if(iscolor(@dark-primary-1), .getColorRgbStr(@dark-primary-1)[], replace(~'@{dark-primary-1}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-primary-2: if(iscolor(@dark-primary-2), .getColorRgbStr(@dark-primary-2)[], replace(~'@{dark-primary-2}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-primary-3: if(iscolor(@dark-primary-3), .getColorRgbStr(@dark-primary-3)[], replace(~'@{dark-primary-3}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-primary-4: if(iscolor(@dark-primary-4), .getColorRgbStr(@dark-primary-4)[], replace(~'@{dark-primary-4}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-primary-5: if(iscolor(@dark-primary-5), .getColorRgbStr(@dark-primary-5)[], replace(~'@{dark-primary-5}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-primary-6: if(iscolor(@dark-primary-6), .getColorRgbStr(@dark-primary-6)[], replace(~'@{dark-primary-6}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-primary-7: if(iscolor(@dark-primary-7), .getColorRgbStr(@dark-primary-7)[], replace(~'@{dark-primary-7}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-primary-8: if(iscolor(@dark-primary-8), .getColorRgbStr(@dark-primary-8)[], replace(~'@{dark-primary-8}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-primary-9: if(iscolor(@dark-primary-9), .getColorRgbStr(@dark-primary-9)[], replace(~'@{dark-primary-9}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-primary-10: if(iscolor(@dark-primary-10), .getColorRgbStr(@dark-primary-10)[],  replace(~'@{dark-primary-10}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-link-1: if(iscolor(@dark-link-1), .getColorRgbStr(@dark-link-1)[], replace(~'@{dark-link-1}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-link-2: if(iscolor(@dark-link-2), .getColorRgbStr(@dark-link-2)[], replace(~'@{dark-link-2}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-link-3: if(iscolor(@dark-link-3), .getColorRgbStr(@dark-link-3)[], replace(~'@{dark-link-3}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-link-4: if(iscolor(@dark-link-4), .getColorRgbStr(@dark-link-4)[], replace(~'@{dark-link-4}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-link-5: if(iscolor(@dark-link-5), .getColorRgbStr(@dark-link-5)[], replace(~'@{dark-link-5}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-link-6: if(iscolor(@dark-link-6), .getColorRgbStr(@dark-link-6)[], replace(~'@{dark-link-6}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-link-7: if(iscolor(@dark-link-7), .getColorRgbStr(@dark-link-7)[], replace(~'@{dark-link-7}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-link-8: if(iscolor(@dark-link-8), .getColorRgbStr(@dark-link-8)[], replace(~'@{dark-link-8}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-link-9: if(iscolor(@dark-link-9), .getColorRgbStr(@dark-link-9)[], replace(~'@{dark-link-9}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-link-10: if(iscolor(@dark-link-10), .getColorRgbStr(@dark-link-10)[],  replace(~'@{dark-link-10}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-success-1: if(iscolor(@dark-success-1), .getColorRgbStr(@dark-success-1)[], replace(~'@{dark-success-1}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-success-2: if(iscolor(@dark-success-2), .getColorRgbStr(@dark-success-2)[], replace(~'@{dark-success-2}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-success-3: if(iscolor(@dark-success-3), .getColorRgbStr(@dark-success-3)[], replace(~'@{dark-success-3}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-success-4: if(iscolor(@dark-success-4), .getColorRgbStr(@dark-success-4)[], replace(~'@{dark-success-4}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-success-5: if(iscolor(@dark-success-5), .getColorRgbStr(@dark-success-5)[], replace(~'@{dark-success-5}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-success-6: if(iscolor(@dark-success-6), .getColorRgbStr(@dark-success-6)[], replace(~'@{dark-success-6}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-success-7: if(iscolor(@dark-success-7), .getColorRgbStr(@dark-success-7)[], replace(~'@{dark-success-7}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-success-8: if(iscolor(@dark-success-8), .getColorRgbStr(@dark-success-8)[], replace(~'@{dark-success-8}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-success-9: if(iscolor(@dark-success-9), .getColorRgbStr(@dark-success-9)[], replace(~'@{dark-success-9}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-success-10: if(iscolor(@dark-success-10), .getColorRgbStr(@dark-success-10)[], replace(~'@{dark-success-10}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-danger-1: if(iscolor(@dark-danger-1), .getColorRgbStr(@dark-danger-1)[], replace(~'@{dark-danger-1}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-danger-2: if(iscolor(@dark-danger-2), .getColorRgbStr(@dark-danger-2)[], replace(~'@{dark-danger-2}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-danger-3: if(iscolor(@dark-danger-3), .getColorRgbStr(@dark-danger-3)[], replace(~'@{dark-danger-3}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-danger-4: if(iscolor(@dark-danger-4), .getColorRgbStr(@dark-danger-4)[], replace(~'@{dark-danger-4}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-danger-5: if(iscolor(@dark-danger-5), .getColorRgbStr(@dark-danger-5)[], replace(~'@{dark-danger-5}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-danger-6: if(iscolor(@dark-danger-6), .getColorRgbStr(@dark-danger-6)[], replace(~'@{dark-danger-6}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-danger-7: if(iscolor(@dark-danger-7), .getColorRgbStr(@dark-danger-7)[], replace(~'@{dark-danger-7}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-danger-8: if(iscolor(@dark-danger-8), .getColorRgbStr(@dark-danger-8)[], replace(~'@{dark-danger-8}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-danger-9: if(iscolor(@dark-danger-9), .getColorRgbStr(@dark-danger-9)[], replace(~'@{dark-danger-9}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-danger-10: if(iscolor(@dark-danger-10), .getColorRgbStr(@dark-danger-10)[], replace(~'@{dark-danger-10}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-warning-1: if(iscolor(@dark-warning-1), .getColorRgbStr(@dark-warning-1)[], replace(~'@{dark-warning-1}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-warning-2: if(iscolor(@dark-warning-2), .getColorRgbStr(@dark-warning-2)[], replace(~'@{dark-warning-2}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-warning-3: if(iscolor(@dark-warning-3), .getColorRgbStr(@dark-warning-3)[], replace(~'@{dark-warning-3}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-warning-4: if(iscolor(@dark-warning-4), .getColorRgbStr(@dark-warning-4)[], replace(~'@{dark-warning-4}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-warning-5: if(iscolor(@dark-warning-5), .getColorRgbStr(@dark-warning-5)[], replace(~'@{dark-warning-5}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-warning-6: if(iscolor(@dark-warning-6), .getColorRgbStr(@dark-warning-6)[], replace(~'@{dark-warning-6}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-warning-7: if(iscolor(@dark-warning-7), .getColorRgbStr(@dark-warning-7)[], replace(~'@{dark-warning-7}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-warning-8: if(iscolor(@dark-warning-8), .getColorRgbStr(@dark-warning-8)[], replace(~'@{dark-warning-8}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-warning-9: if(iscolor(@dark-warning-9), .getColorRgbStr(@dark-warning-9)[], replace(~'@{dark-warning-9}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-warning-10: if(iscolor(@dark-warning-10), .getColorRgbStr(@dark-warning-10)[], replace(~'@{dark-warning-10}', 'rgb\((.*)\)$', '$1'));
    @{arco-cssvars-prefix}-color-text-5: @dark-color-text-5;
@{arco-cssvars-prefix}-color-text-6: @dark-color-text-6;
@{arco-cssvars-prefix}-color-fill-5: @dark-color-fill-5;
@{arco-cssvars-prefix}-color-bg-6: @dark-color-bg-6;
@{arco-cssvars-prefix}-tip-1: if(iscolor(@dark-tip-1), .getColorRgbStr(@dark-tip-1)[], replace(~'@{dark-tip-1}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-2: if(iscolor(@dark-tip-2), .getColorRgbStr(@dark-tip-2)[], replace(~'@{dark-tip-2}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-3: if(iscolor(@dark-tip-3), .getColorRgbStr(@dark-tip-3)[], replace(~'@{dark-tip-3}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-4: if(iscolor(@dark-tip-4), .getColorRgbStr(@dark-tip-4)[], replace(~'@{dark-tip-4}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-5: if(iscolor(@dark-tip-5), .getColorRgbStr(@dark-tip-5)[], replace(~'@{dark-tip-5}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-6: if(iscolor(@dark-tip-6), .getColorRgbStr(@dark-tip-6)[], replace(~'@{dark-tip-6}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-7: if(iscolor(@dark-tip-7), .getColorRgbStr(@dark-tip-7)[], replace(~'@{dark-tip-7}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-8: if(iscolor(@dark-tip-8), .getColorRgbStr(@dark-tip-8)[], replace(~'@{dark-tip-8}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-9: if(iscolor(@dark-tip-9), .getColorRgbStr(@dark-tip-9)[], replace(~'@{dark-tip-9}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-tip-10: if(iscolor(@dark-tip-10), .getColorRgbStr(@dark-tip-10)[], replace(~'@{dark-tip-10}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-1: if(iscolor(@dark-data-vis-1), .getColorRgbStr(@dark-data-vis-1)[], replace(~'@{dark-data-vis-1}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-2: if(iscolor(@dark-data-vis-2), .getColorRgbStr(@dark-data-vis-2)[], replace(~'@{dark-data-vis-2}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-3: if(iscolor(@dark-data-vis-3), .getColorRgbStr(@dark-data-vis-3)[], replace(~'@{dark-data-vis-3}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-4: if(iscolor(@dark-data-vis-4), .getColorRgbStr(@dark-data-vis-4)[], replace(~'@{dark-data-vis-4}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-5: if(iscolor(@dark-data-vis-5), .getColorRgbStr(@dark-data-vis-5)[], replace(~'@{dark-data-vis-5}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-6: if(iscolor(@dark-data-vis-6), .getColorRgbStr(@dark-data-vis-6)[], replace(~'@{dark-data-vis-6}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-7: if(iscolor(@dark-data-vis-7), .getColorRgbStr(@dark-data-vis-7)[], replace(~'@{dark-data-vis-7}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-8: if(iscolor(@dark-data-vis-8), .getColorRgbStr(@dark-data-vis-8)[], replace(~'@{dark-data-vis-8}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-9: if(iscolor(@dark-data-vis-9), .getColorRgbStr(@dark-data-vis-9)[], replace(~'@{dark-data-vis-9}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-10: if(iscolor(@dark-data-vis-10), .getColorRgbStr(@dark-data-vis-10)[], replace(~'@{dark-data-vis-10}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-1: if(iscolor(@dark-data-vis-guide-1), .getColorRgbStr(@dark-data-vis-guide-1)[], replace(~'@{dark-data-vis-guide-1}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-2: if(iscolor(@dark-data-vis-guide-2), .getColorRgbStr(@dark-data-vis-guide-2)[], replace(~'@{dark-data-vis-guide-2}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-3: if(iscolor(@dark-data-vis-guide-3), .getColorRgbStr(@dark-data-vis-guide-3)[], replace(~'@{dark-data-vis-guide-3}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-4: if(iscolor(@dark-data-vis-guide-4), .getColorRgbStr(@dark-data-vis-guide-4)[], replace(~'@{dark-data-vis-guide-4}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-5: if(iscolor(@dark-data-vis-guide-5), .getColorRgbStr(@dark-data-vis-guide-5)[], replace(~'@{dark-data-vis-guide-5}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-6: if(iscolor(@dark-data-vis-guide-6), .getColorRgbStr(@dark-data-vis-guide-6)[], replace(~'@{dark-data-vis-guide-6}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-7: if(iscolor(@dark-data-vis-guide-7), .getColorRgbStr(@dark-data-vis-guide-7)[], replace(~'@{dark-data-vis-guide-7}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-8: if(iscolor(@dark-data-vis-guide-8), .getColorRgbStr(@dark-data-vis-guide-8)[], replace(~'@{dark-data-vis-guide-8}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-9: if(iscolor(@dark-data-vis-guide-9), .getColorRgbStr(@dark-data-vis-guide-9)[], replace(~'@{dark-data-vis-guide-9}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-guide-10: if(iscolor(@dark-data-vis-guide-10), .getColorRgbStr(@dark-data-vis-guide-10)[], replace(~'@{dark-data-vis-guide-10}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-1: if(iscolor(@dark-data-vis-axis-1), .getColorRgbStr(@dark-data-vis-axis-1)[], replace(~'@{dark-data-vis-axis-1}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-2: if(iscolor(@dark-data-vis-axis-2), .getColorRgbStr(@dark-data-vis-axis-2)[], replace(~'@{dark-data-vis-axis-2}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-3: if(iscolor(@dark-data-vis-axis-3), .getColorRgbStr(@dark-data-vis-axis-3)[], replace(~'@{dark-data-vis-axis-3}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-4: if(iscolor(@dark-data-vis-axis-4), .getColorRgbStr(@dark-data-vis-axis-4)[], replace(~'@{dark-data-vis-axis-4}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-5: if(iscolor(@dark-data-vis-axis-5), .getColorRgbStr(@dark-data-vis-axis-5)[], replace(~'@{dark-data-vis-axis-5}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-6: if(iscolor(@dark-data-vis-axis-6), .getColorRgbStr(@dark-data-vis-axis-6)[], replace(~'@{dark-data-vis-axis-6}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-7: if(iscolor(@dark-data-vis-axis-7), .getColorRgbStr(@dark-data-vis-axis-7)[], replace(~'@{dark-data-vis-axis-7}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-8: if(iscolor(@dark-data-vis-axis-8), .getColorRgbStr(@dark-data-vis-axis-8)[], replace(~'@{dark-data-vis-axis-8}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-9: if(iscolor(@dark-data-vis-axis-9), .getColorRgbStr(@dark-data-vis-axis-9)[], replace(~'@{dark-data-vis-axis-9}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-axis-10: if(iscolor(@dark-data-vis-axis-10), .getColorRgbStr(@dark-data-vis-axis-10)[], replace(~'@{dark-data-vis-axis-10}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-1: if(iscolor(@dark-data-vis-bg-1), .getColorRgbStr(@dark-data-vis-bg-1)[], replace(~'@{dark-data-vis-bg-1}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-2: if(iscolor(@dark-data-vis-bg-2), .getColorRgbStr(@dark-data-vis-bg-2)[], replace(~'@{dark-data-vis-bg-2}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-3: if(iscolor(@dark-data-vis-bg-3), .getColorRgbStr(@dark-data-vis-bg-3)[], replace(~'@{dark-data-vis-bg-3}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-4: if(iscolor(@dark-data-vis-bg-4), .getColorRgbStr(@dark-data-vis-bg-4)[], replace(~'@{dark-data-vis-bg-4}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-5: if(iscolor(@dark-data-vis-bg-5), .getColorRgbStr(@dark-data-vis-bg-5)[], replace(~'@{dark-data-vis-bg-5}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-6: if(iscolor(@dark-data-vis-bg-6), .getColorRgbStr(@dark-data-vis-bg-6)[], replace(~'@{dark-data-vis-bg-6}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-7: if(iscolor(@dark-data-vis-bg-7), .getColorRgbStr(@dark-data-vis-bg-7)[], replace(~'@{dark-data-vis-bg-7}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-8: if(iscolor(@dark-data-vis-bg-8), .getColorRgbStr(@dark-data-vis-bg-8)[], replace(~'@{dark-data-vis-bg-8}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-9: if(iscolor(@dark-data-vis-bg-9), .getColorRgbStr(@dark-data-vis-bg-9)[], replace(~'@{dark-data-vis-bg-9}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis-bg-10: if(iscolor(@dark-data-vis-bg-10), .getColorRgbStr(@dark-data-vis-bg-10)[], replace(~'@{dark-data-vis-bg-10}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-1: if(iscolor(@dark-data-vis2-1), .getColorRgbStr(@dark-data-vis2-1)[], replace(~'@{dark-data-vis2-1}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-2: if(iscolor(@dark-data-vis2-2), .getColorRgbStr(@dark-data-vis2-2)[], replace(~'@{dark-data-vis2-2}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-3: if(iscolor(@dark-data-vis2-3), .getColorRgbStr(@dark-data-vis2-3)[], replace(~'@{dark-data-vis2-3}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-4: if(iscolor(@dark-data-vis2-4), .getColorRgbStr(@dark-data-vis2-4)[], replace(~'@{dark-data-vis2-4}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-5: if(iscolor(@dark-data-vis2-5), .getColorRgbStr(@dark-data-vis2-5)[], replace(~'@{dark-data-vis2-5}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-6: if(iscolor(@dark-data-vis2-6), .getColorRgbStr(@dark-data-vis2-6)[], replace(~'@{dark-data-vis2-6}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-7: if(iscolor(@dark-data-vis2-7), .getColorRgbStr(@dark-data-vis2-7)[], replace(~'@{dark-data-vis2-7}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-8: if(iscolor(@dark-data-vis2-8), .getColorRgbStr(@dark-data-vis2-8)[], replace(~'@{dark-data-vis2-8}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-9: if(iscolor(@dark-data-vis2-9), .getColorRgbStr(@dark-data-vis2-9)[], replace(~'@{dark-data-vis2-9}', 'rgb\((.*)\)$', '$1'));
@{arco-cssvars-prefix}-data-vis2-10: if(iscolor(@dark-data-vis2-10), .getColorRgbStr(@dark-data-vis2-10)[], replace(~'@{dark-data-vis2-10}', 'rgb\((.*)\)$', '$1'));

  }
// 版本tag：方便查看环境主题包信息，每次发包需要更新
body .react-cecloud-design-version-1.0.60{
    width: auto;
}

// 树选择器icon去除背景色，添加hover色
.arco-tree-node .arco-icon-hover{
    &:hover::before{
        background-color: transparent;
    }
    &:hover{
        color: rgb(var(--primary-6));
    }
}

// 触发器trigger增加默认阴影样式，方便业务使用
.demo-cecloud-trigger-popup {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

// material-table也带上颜色
.arco-material-table .arco-table-th{
    background-color: var(--color-bg-5);
}

// arco-m表格中的empty样式调整
// 增加cecloud-small-empty类名
.arco-material-table .arco-table-no-data .arco-empty, .cecloud-small-empty .arco-empty {
  padding: 0;
  min-height: 60px;
  align-content: center;
}
.arco-material-table .arco-table-no-data .arco-empty .arco-empty-description, .cecloud-small-empty .arco-empty .arco-empty-description {
  margin: 0;
  line-height: 18px;
}
.arco-material-table .arco-table-no-data .arco-empty .arco-empty-image, .cecloud-small-empty .arco-empty .arco-empty-image {
  height: 38px;
}

.cecloud-small-empty{
    display: flex;
    padding: 20px;
}

.arco-input-group.arco-input-group-compact > .arco-select:first-child .arco-select-view{
  border-radius: 4px 0 0 4px;
}

.arco-input-group.arco-input-group-compact > .arco-select:last-child .arco-select-view{
  border-radius: 0 4px 4px 0;
}

.arco-input-group.arco-input-group-compact{
    div.arco-select, .arco-select-view{
      border-right-width: 0px;
    }
}

.arco-input-group-wrapper .arco-input-inner-wrapper-default,
.arco-input-inner-wrapper.arco-input-inner-wrapper-default {
    height: 32px;
}

body,
.arco-dropdown-menu-item,
.arco-dropdown-menu-pop-header{
  font-size: 12px;
}


// ---------------------------------------------
// 颜色用变量覆盖，后续配置平台的颜色修改需要这里同步修改
.arco-icon-hover:hover::before {
    background-color: var(--color-fill-2)
}

.arco-draggable-item-dragover.arco-draggable-item-gap-left {
    box-shadow: -1px 0 rgb(var(--primary-6))
}

.arco-draggable-item-dragover.arco-draggable-item-gap-right {
    box-shadow: 1px 0 rgb(var(--primary-6))
}

.arco-draggable-item-dragover.arco-draggable-item-gap-top {
    box-shadow: 0 -1px rgb(var(--primary-6))
}

.arco-draggable-item-dragover.arco-draggable-item-gap-bottom {
    box-shadow: 0 1px rgb(var(--primary-6))
}

.arco-picker {
    background-color: var(--color-fill-4);
    border: 1px solid var(--color-border-1)
}

.arco-picker input {
    color: var(--color-text-2)
}

.arco-picker input::placeholder {
    color: var(--color-text-5)
}

.arco-picker-input-placeholder input {
    color: var(--color-text-3)
}

.arco-picker-prefix {
    color: var(--color-text-2)
}

.arco-picker-suffix-icon {
    color: var(--color-text-3)
}

.arco-picker .arco-picker-clear-icon {
    color: var(--color-text-2)
}

.arco-picker:hover {
    background-color: var(--color-fill-4);
    border-color: rgb(var(--primary-6))
}

.arco-picker-focused {
    box-shadow: 0 0 0 0 var(--color-primary-light-2)
}

.arco-picker-focused,
.arco-picker-focused:hover {
    background-color: var(--color-fill-4);
    border-color: rgb(var(--primary-6))
}

.arco-picker-error:not(.arco-picker-disabled) {
    background-color: var(--color-danger-light-1)
}

.arco-picker-error:not(.arco-picker-disabled):hover {
    background-color: var(--color-danger-light-2)
}

.arco-picker-error.arco-picker-focused:not(.arco-picker-disabled),
.arco-picker-error.arco-picker-focused:not(.arco-picker-disabled):hover {
    background-color: var(--color-bg-2);
    box-shadow: 0 0 0 0 var(--color-danger-light-2)
}

.arco-picker-warning:not(.arco-picker-disabled) {
    background-color: var(--color-warning-light-1)
}

.arco-picker-warning:not(.arco-picker-disabled):hover {
    background-color: var(--color-warning-light-2)
}

.arco-picker-warning.arco-picker-focused:not(.arco-picker-disabled),
.arco-picker-warning.arco-picker-focused:not(.arco-picker-disabled):hover {
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 var(--color-warning-light-2)
}

.arco-picker input[disabled] {
    color: var(--color-text-6);
    -webkit-text-fill-color: var(--color-text-6)
}

.arco-picker input[disabled]::placeholder {
    color: var(--color-text-6)
}

.arco-picker-disabled,
.arco-picker-disabled:hover {
    color: var(--color-text-6);
    border-color: var(--color-border-2);
    background-color: var(--color-fill-2)
}

.arco-picker-disabled input[disabled],
.arco-picker-disabled:hover input[disabled] {
    color: var(--color-text-6);
    -webkit-text-fill-color: var(--color-text-6)
}

.arco-picker-disabled input[disabled]::placeholder,
.arco-picker-disabled:hover input[disabled]::placeholder {
    color: var(--color-text-6)
}

.arco-picker-separator {
    color: var(--color-text-3)
}

.arco-picker-disabled .arco-picker-separator {
    color: var(--color-text-4)
}

.arco-picker-disabled .arco-picker-suffix-icon {
    color: var(--color-text-5)
}

.arco-alert-info {
    background-color: rgb(var(--primary-1))
}

.arco-alert-info .arco-alert-title {
    color: var(--color-text-2)
}

.arco-alert-info .arco-alert-content {
    color: var(--color-text-2)
}

.arco-alert-info.arco-alert-with-title .arco-alert-content {
    color: var(--color-text-2)
}

.arco-alert-success .arco-alert-title {
    color: var(--color-text-2)
}

.arco-alert-success .arco-alert-content {
    color: var(--color-text-2)
}

.arco-alert-success.arco-alert-with-title .arco-alert-content {
    color: var(--color-text-2)
}

.arco-alert-warning .arco-alert-title {
    color: var(--color-text-2)
}

.arco-alert-warning .arco-alert-content {
    color: var(--color-text-2)
}

.arco-alert-warning.arco-alert-with-title .arco-alert-content {
    color: var(--color-text-2)
}

.arco-alert-error .arco-alert-title {
    color: var(--color-text-2)
}

.arco-alert-error .arco-alert-content {
    color: var(--color-text-2)
}

.arco-alert-error.arco-alert-with-title .arco-alert-content {
    color: var(--color-text-2)
}

.arco-alert-info .arco-alert-icon-wrapper svg {
    color: rgb(var(--primary-6))
}

.arco-alert-close-btn {
    color: var(--color-text-2)
}

.arco-alert-close-btn:hover {
    color: var(--color-text-1)
}

.arco-anchor-line-slider {
    background-color: rgb(var(--primary-6))
}

.arco-anchor-list::before {
    background-color: var(--color-border-2)
}

.arco-anchor-link-title {
    color: var(--color-text-2)
}

.arco-anchor-link-title:hover {
    background-color: rgb(var(--primary-1));
    color: rgb(var(--primary-6))
}

.arco-anchor-link-title:focus-visible {
    box-shadow: inset 0 0 0 2px rgb(var(--primary-6))
}

.arco-anchor-link-active>.arco-anchor-link-title {
    color: rgb(var(--primary-6))
}

.arco-anchor-lineless .arco-anchor-link-active>.arco-anchor-link-title {
    background-color: rgb(var(--primary-1));
    color: rgb(var(--primary-6))
}

.arco-autocomplete-popup .arco-select-popup {
    background-color: var(--color-fill-5);
}

.arco-autocomplete-popup .arco-select-popup .arco-select-option {
    color: var(--color-text-2)
}

.arco-autocomplete-popup .arco-select-popup .arco-select-option-selected {
    color: var(--color-text-2);
    background-color: rgb(var(--primary-2))
}

.arco-autocomplete-popup .arco-select-popup .arco-select-option-hover {
    color: var(--color-text-2);
    background-color: rgb(var(--primary-2))
}

.arco-autocomplete-popup .arco-select-popup .arco-select-option-disabled {
    color: var(--color-text-5);
    background-color: var(--color-fill-2)
}

.arco-avatar {
    background-color: var(--color-fill-1);
    color: var(--color-white)
}

.arco-avatar-trigger-icon-button {
    color: var(--color-text-3);
    background-color: var(--color-fill-2)
}

.arco-avatar-trigger-icon-mask {
    color: var(--color-white)
}

.arco-avatar-with-trigger-icon:hover .arco-avatar-trigger-icon-button {
    background-color: var(--color-neutral-3)
}

.arco-avatar-group-max-count-avatar {
    color: var(--color-white)
}

.arco-avatar-group .arco-avatar {
    border: 2px solid var(--color-bg-1)
}

.arco-backtop-button {
    background-color: rgb(var(--primary-6));
    color: var(--color-white)
}

.arco-backtop-button:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-backtop-button:hover {
    background-color: rgb(var(--primary-5))
}

.arco-badge-custom-dot {
    background-color: var(--color-bg-2)
}

.arco-badge-number,
.arco-badge-text {
    color: var(--color-white);
    box-shadow: 0 0 0 2px var(--color-bg-2)
}

.arco-badge-dot {
    box-shadow: 0 0 0 2px var(--color-bg-2)
}

.arco-badge-status-default {
    background-color: var(--color-fill-4)
}

.arco-badge-status-processing {
    background-color: rgb(var(--primary-6))
}

.arco-badge-color-arcoblue {
    background-color: rgb(var(--primary-6))
}

.arco-badge-status-text {
    color: var(--color-text-1)
}

.arco-breadcrumb {
    color: var(--color-text-2)
}

.arco-breadcrumb-icon {
    color: var(--color-text-2)
}

.arco-breadcrumb-item {
    color: var(--color-text-5)
}

.arco-breadcrumb-item>.arco-icon {
    color: var(--color-text-4)
}

.arco-breadcrumb-item a,
.arco-breadcrumb-item[href] {
    color: var(--color-text-4)
}

.arco-breadcrumb-item a:hover,
.arco-breadcrumb-item[href]:hover {
    color: var(--color-text-2)
}

.arco-breadcrumb-item a:focus-visible,
.arco-breadcrumb-item[href]:focus-visible {
    box-shadow: 0 0 0 2px rgb(var(--primary-6))
}

.arco-breadcrumb-item:last-child {
    color: var(--color-text-2)
}

.arco-breadcrumb-item-ellipses {
    color: var(--color-text-2)
}

.arco-breadcrumb-item-separator {
    color: var(--color-text-4)
}

.arco-breadcrumb-item-dropdown-icon {
    color: var(--color-text-4)
}

.arco-btn-link:not([href]) {
    color: var(--color-text-4)
}

.arco-btn-loading::before {
    background: var(--color-bg-1)
}

.arco-btn-outline:not(.arco-btn-disabled) {
    color: var(--color-text-3);
    border: 1px solid var(--color-border-1);
}

.arco-btn-outline:not(.arco-btn-disabled):not(.arco-btn-loading):hover {
    color: var(--color-text-3);
    border-color: var(--color-text-5);
}

.arco-btn-outline:not(.arco-btn-disabled):not(.arco-btn-loading):active {
    border-color: var(--color-text-5);
    color: var(--color-text-3);
    background-color: var(--color-fill-3);
}

.arco-btn-outline:not(.arco-btn-disabled):focus-visible {
    box-shadow: 0 0 0 2px rgb(var(--primary-3))
}

.arco-btn-outline.arco-btn-disabled {
    color: var(--color-text-6);
    border: 1px solid var(--color-border-1)
}

.arco-btn-primary:not(.arco-btn-disabled) {
    background-color: rgb(var(--primary-6));
    color: var(--color-white)
}

.arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-loading):hover {
    color: var(--color-white);
    background-color: rgb(var(--primary-5))
}

.arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-loading):active {
    color: var(--color-white);
    background-color: rgb(var(--primary-7))
}

.arco-btn-primary:not(.arco-btn-disabled):focus-visible {
    box-shadow: 0 0 0 2px rgb(var(--primary-3))
}

.arco-btn-primary.arco-btn-disabled {
    background-color: var(--color-fill-2);
    color: var(--color-text-6)
}

.arco-btn-primary.arco-btn-status-warning:not(.arco-btn-disabled) {
    color: var(--color-white)
}

.arco-btn-primary.arco-btn-status-warning:not(.arco-btn-disabled):not(.arco-btn-loading):hover {
    color: var(--color-white)
}

.arco-btn-primary.arco-btn-status-warning:not(.arco-btn-disabled):not(.arco-btn-loading):active {
    color: var(--color-white)
}

.arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled) {
    color: var(--color-white)
}

.arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):hover {
    color: var(--color-white)
}

.arco-btn-primary.arco-btn-status-danger:not(.arco-btn-disabled):not(.arco-btn-loading):active {
    color: var(--color-bg-1)
}

.arco-btn-primary.arco-btn-status-success:not(.arco-btn-disabled) {
    color: var(--color-white)
}

.arco-btn-primary.arco-btn-status-success:not(.arco-btn-disabled):not(.arco-btn-loading):hover {
    color: var(--color-white)
}

.arco-btn-primary.arco-btn-status-success:not(.arco-btn-disabled):not(.arco-btn-loading):active {
    color: var(--color-white)
}

// .arco-btn-secondary:not(.arco-btn-disabled) {
//     color: rgb(var(--primary-6));
//     border: 1px solid rgb(var(--primary-4))
// }

// .arco-btn-secondary:not(.arco-btn-disabled):not(.arco-btn-loading):hover {
//     color: rgb(var(--primary-6));
//     background-color: rgb(var(--primary-1))
// }

// .arco-btn-secondary:not(.arco-btn-disabled):not(.arco-btn-loading):active {
//     color: rgb(var(--primary-6));
//     background-color: rgb(var(--primary-2))
// }

.arco-btn-secondary:not(.arco-btn-disabled):focus-visible {
    box-shadow: 0 0 0 2px var(--color-neutral-4)
}

.arco-btn-secondary.arco-btn-disabled {
    color: var(--color-text-6);
    border: 1px solid var(--color-border-2)
}

.arco-btn-dashed:not(.arco-btn-disabled) {
    color: rgb(var(--primary-6));
    border: 1px dashed rgb(var(--primary-4))
}

.arco-btn-dashed:not(.arco-btn-disabled):not(.arco-btn-loading):hover {
    color: rgb(var(--primary-7));
    background-color: rgb(var(--primary-1))
}

.arco-btn-dashed:not(.arco-btn-disabled):not(.arco-btn-loading):active {
    color: rgb(var(--primary-7));
    background-color: rgb(var(--primary-2))
}

.arco-btn-dashed:not(.arco-btn-disabled):focus-visible {
    box-shadow: 0 0 0 2px var(--color-neutral-4)
}

.arco-btn-dashed.arco-btn-disabled {
    color: var(--color-text-6);
    border: 1px dashed var(--color-border-2)
}

.arco-btn-text:not(.arco-btn-disabled) {
    color: rgb(var(--primary-6))
}

.arco-btn-text:not(.arco-btn-disabled):not(.arco-btn-loading):hover {
    color: rgb(var(--primary-5))
}

.arco-btn-text:not(.arco-btn-disabled):not(.arco-btn-loading):active {
    color: rgb(var(--primary-7))
}

.arco-btn-text:not(.arco-btn-disabled):focus-visible {
    box-shadow: 0 0 0 2px var(--color-neutral-4)
}

.arco-btn-text.arco-btn-disabled {
    color: var(--color-text-6)
}

.arco-btn-group .arco-btn-primary:not(:last-child) {
    border-right: 1px solid rgb(var(--primary-5))
}

.arco-btn-group .arco-btn-secondary:not(:last-child) {
    border-right: 1px solid rgb(var(--primary-1))
}

.arco-btn-group .arco-btn-rtl.arco-btn-primary:not(:last-child) {
    border-left: 1px solid rgb(var(--primary-5))
}

.arco-btn-group .arco-btn-rtl.arco-btn-secondary:not(:last-child) {
    border-left: 1px solid rgb(var(--primary-1))
}

.arco-calendar {
    border: 1px solid var(--color-border-1)
}

.arco-calendar-header-value {
    color: var(--color-text-1)
}

.arco-calendar-header-icon {
    color: var(--color-text-3)
}

.arco-calendar-header-icon:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-calendar-header-icon:not(.arco-calendar-header-icon-hidden):hover {
    background-color: rgb(var(--primary-1))
}

.arco-calendar-month-row .arco-calendar-cell {
    border-bottom: 1px solid var(--color-border-1)
}

.arco-calendar-mode-month:not(.arco-calendar-panel) .arco-calendar-cell:not(:last-child) {
    border-right: 1px solid var(--color-border-1)
}

.arco-calendar-week-list {
    border-bottom: 1px solid var(--color-border-1)
}

.arco-calendar-cell-today .arco-calendar-date-circle {
    border: 1px solid rgb(var(--primary-6))
}

.arco-calendar-date-value {
    color: var(--color-text-4)
}

.arco-calendar-cell-in-view .arco-calendar-date-value {
    color: var(--color-text-1)
}

.arco-calendar-mode-month .arco-calendar-cell-selected .arco-calendar-date-circle {
    border: 1px solid rgb(var(--primary-6));
    background-color: rgb(var(--primary-6));
    color: var(--color-white);
}

.arco-calendar-mode-year .arco-calendar-cell-selected .arco-calendar-cell-selected .arco-calendar-date-circle {
    border: 1px solid rgb(var(--primary-6));
    background-color: rgb(var(--primary-6));
    color: var(--color-white);
}

.arco-calendar-mode-year .arco-calendar-header {
    border-bottom: 1px solid var(--color-border-1)
}

.arco-calendar-year-row>.arco-calendar-cell:not(:last-child) {
    border-right: 1px solid var(--color-border-1)
}

.arco-calendar-year-row:not(:last-child)>.arco-calendar-cell {
    border-bottom: 1px solid var(--color-border-1)
}

.arco-calendar-month-with-days .arco-calendar-month-title {
    color: var(--color-text-1)
}

.arco-calendar-panel {
    border: 1px solid var(--color-border-1);
    background-color: var(--color-bg-5)
}

.arco-calendar-panel .arco-calendar-header {
    border-bottom: 1px solid var(--color-border-1)
}

.arco-calendar-panel .arco-calendar-cell-selected .arco-calendar-date-value {
    color: var(--color-white);
    background-color: rgb(var(--primary-6))
}

.arco-calendar-panel .arco-calendar-cell:not(.arco-calendar-cell-selected):not(.arco-calendar-cell-range-start):not(.arco-calendar-cell-range-end):not(.arco-calendar-cell-hover-range-start):not(.arco-calendar-cell-hover-range-end):not(.arco-calendar-cell-disabled):not(.arco-calendar-cell-week) .arco-calendar-date-value:hover {
    background-color: var(--color-primary-light-1);
    color: rgb(var(--primary-6))
}

.arco-calendar-panel .arco-calendar-cell-today::after {
    background-color: rgb(var(--primary-6))
}

.arco-calendar-cell-in-range .arco-calendar-date {
    background-color: var(--color-primary-light-1)
}

.arco-calendar-cell-range-start .arco-calendar-date-value,
.arco-calendar-cell-range-end .arco-calendar-date-value {
    background-color: rgb(var(--primary-6));
    color: var(--color-white)
}

.arco-calendar-cell-hover-in-range .arco-calendar-date {
    background-color: var(--color-primary-light-1)
}

.arco-calendar-cell-hover-range-start .arco-calendar-date-value,
.arco-calendar-cell-hover-range-end .arco-calendar-date-value {
    background-color: var(--color-primary-light-2);
    color: var(--color-text-1)
}

.arco-calendar-panel .arco-calendar-cell-disabled>.arco-calendar-date {
    background-color: var(--color-fill-2)
}

.arco-calendar-panel .arco-calendar-cell-disabled>.arco-calendar-date>.arco-calendar-date-value {
    color: var(--color-text-4);
    background-color: var(--color-fill-2)
}

.arco-calendar-panel .arco-calendar-footer-btn-wrapper {
    border-top: 1px solid var(--color-border-1);
    color: var(--color-text-1)
}

.arco-calendar-rtl.arco-calendar-mode-month:not(.arco-calendar-panel) .arco-calendar-cell:not(:last-child) {
    border-left: 1px solid var(--color-border-1)
}

.arco-card {
    background: var(--color-fill-4)
}

.arco-card-header {
    border-bottom: 1px solid var(--color-border-1)
}

.arco-card-header-title {
    color: var(--color-text-1)
}

.arco-card-header-extra {
    color: rgb(var(--primary-6))
}

.arco-card-body {
    color: var(--color-text-2)
}

.arco-card-actions-item {
    color: var(--color-text-2)
}

.arco-card-actions-item:hover {
    color: rgb(var(--primary-6))
}

.arco-card-meta-title {
    color: var(--color-text-1)
}

.arco-card-grid {
    box-shadow: 1px 0 0 0 var(--color-border-1), 0 1px 0 0 var(--color-border-1), 1px 1px 0 0 var(--color-border-1), 1px 0 0 0 var(--color-border-1) inset, 0 1px 0 0 var(--color-border-1) inset
}

.arco-card-grid-hoverable:hover::before {
    box-shadow: 0 4px 10px var(--color-fill-1)
}

.arco-card-hoverable:hover {
    box-shadow: 0 4px 10px var(--color-fill-1)
}

.arco-card-bordered {
    border: 1px solid var(--color-border-1)
}

.arco-carousel-indicator-outer .arco-carousel-indicator-item:hover,
.arco-carousel-indicator-outer .arco-carousel-indicator-item-active {
    background-color: var(--color-fill-4)
}

.arco-carousel-indicator-item:hover,
.arco-carousel-indicator-item-active {
    background-color: var(--color-white)
}

.arco-carousel-arrow>div {
    color: var(--color-white)
}

.arco-carousel-arrow>div:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-carousel-arrow>div>svg {
    color: var(--color-white)
}

body[arco-theme='dark'] .arco-carousel-indicator-item-active,
body[arco-theme='dark'] .arco-carousel-indicator-item:hover {
    background-color: var(--color-white)
}

body[arco-theme='dark'] .arco-carousel-indicator-outer .arco-carousel-indicator-item:hover,
body[arco-theme='dark'] .arco-carousel-indicator-outer .arco-carousel-indicator-item-active {
    background-color: var(--color-fill-4)
}

.arco-cascader .arco-cascader-view {
    color: var(--color-text-1);
    background-color: var(--color-fill-4);
    border: 1px solid var(--color-border-1)
}

.arco-cascader:hover .arco-cascader-view {
    background-color: var(--color-fill-4);
    border-color: rgb(var(--primary-6))
}

.arco-cascader.arco-cascader-focused .arco-cascader-view {
    color: var(--color-text-1);
    background-color: var(--color-fill-4);
    border-color: var(--color-border-1);
    box-shadow: 0 0 0 0 rgb(var(--primary-2))
}

.arco-cascader .arco-cascader-suffix-icon,
.arco-cascader .arco-cascader-loading-icon,
.arco-cascader .arco-cascader-search-icon,
.arco-cascader .arco-cascader-clear-icon,
.arco-cascader .arco-cascader-arrow-icon,
.arco-cascader .arco-cascader-expand-icon {
    color: var(--color-text-3)
}

.arco-cascader-error.arco-cascader-focused .arco-cascader-view {
    color: var(--color-text-1)
}

.arco-cascader-warning .arco-cascader-view {
    background-color: var(--color-warning-light-1)
}

.arco-cascader-warning:hover .arco-cascader-view {
    background-color: var(--color-warning-light-2)
}

.arco-cascader-warning.arco-cascader-focused .arco-cascader-view {
    color: var(--color-text-1);
    background-color: var(--color-bg-white);
    box-shadow: 0 0 0 0 var(--color-warning-light-2)
}

.arco-cascader-disabled .arco-cascader-view {
    color: var(--color-text-6);
    background-color: var(--color-fill-2);
    border: 1px solid var(--color-border-1)
}

.arco-cascader-disabled:hover .arco-cascader-view {
    background-color: var(--color-fill-2);
    border-color: var(--color-border-1)
}

.arco-cascader-disabled .arco-cascader-suffix-icon,
.arco-cascader-disabled .arco-cascader-loading-icon,
.arco-cascader-disabled .arco-cascader-search-icon,
.arco-cascader-disabled .arco-cascader-clear-icon,
.arco-cascader-disabled .arco-cascader-arrow-icon,
.arco-cascader-disabled .arco-cascader-expand-icon {
    color: var(--color-text-6)
}

.arco-cascader-view input::placeholder {
    color: var(--color-text-5)
}

.arco-cascader-disabled .arco-cascader-view input::placeholder {
    color: var(--color-text-6)
}

.arco-cascader-prefix {
    color: var(--color-text-3)
}

.arco-cascader-addbefore {
    color: var(--color-text-2);
    background-color: var(--color-border-2)
}

.arco-cascader-addbefore {
    border-right: 1px solid var(--color-border-2)
}

.arco-cascader-wrapper-rtl .arco-cascader-addbefore {
    border-left: 1px solid var(--color-border-2)
}

.arco-cascader-popup {
    background-color: var(--color-fill-5)
}

.arco-cascader-list-column {
    background-color: var(--color-fill-5)
}

.arco-cascader-list-item,
.arco-cascader-list-search-item {
    color: var(--color-text-2)
}

.arco-cascader-list-item .arco-icon-right,
.arco-cascader-list-search-item .arco-icon-right,
.arco-cascader-list-item .arco-icon-check,
.arco-cascader-list-search-item .arco-icon-check {
    color: var(--color-text-2)
}

.arco-cascader-list-item .arco-icon-check,
.arco-cascader-list-search-item .arco-icon-check {
    color: rgb(var(--primary-6))
}

.arco-cascader-list-item .arco-icon-loading,
.arco-cascader-list-search-item .arco-icon-loading {
    color: rgb(var(--primary-6))
}

.arco-cascader-list-item:hover,
.arco-cascader-list-search-item-hover {
    color: var(--color-text-2);
    background-color: rgb(var(--primary-2))
}

.arco-cascader-list-item-disabled,
.arco-cascader-list-search-item-disabled,
.arco-cascader-list-item-disabled:hover,
.arco-cascader-list-search-item-disabled:hover {
    color: var(--color-text-6)
}

.arco-cascader-list-item-disabled .arco-icon-check,
.arco-cascader-list-search-item-disabled .arco-icon-check,
.arco-cascader-list-item-disabled:hover .arco-icon-check,
.arco-cascader-list-search-item-disabled:hover .arco-icon-check {
    color: var(--color-primary-light-3)
}

.arco-cascader-list-item-active {
    background-color: rgb(var(--primary-2));
    color: var(--color-text-2)
}

.arco-cascader-list-item-active:hover {
    background-color: rgb(var(--primary-2));
    color: var(--color-text-2)
}

.arco-cascader-list-item-active.arco-cascader-list-item-disabled,
.arco-cascader-list-item-active.arco-cascader-list-item-disabled:hover {
    background-color: var(--color-fill-2);
    color: var(--color-text-6)
}

.arco-cascader-list-rtl .arco-cascader-list-item .arco-icon-left,
.arco-cascader-list-rtl .arco-cascader-list-search-item .arco-icon-left,
.arco-cascader-list-rtl .arco-cascader-list-item .arco-icon-check,
.arco-cascader-list-rtl .arco-cascader-list-search-item .arco-icon-check {
    color: var(--color-text-2)
}

.arco-checkbox-text {
    color: var(--color-text-2)
}

.arco-checkbox-mask {
    border: 1px solid var(--color-border-1);
    background-color: var(--color-bg-1)
}

.arco-checkbox-mask::after {
    background: var(--color-white)
}

.arco-checkbox-mask-icon {
    color: var(--color-bg-white)
}

.arco-checkbox:hover .arco-checkbox-mask {
    border-color: rgb(var(--primary-6))
}

.arco-checkbox-checked .arco-checkbox-mask {
    background-color: rgb(var(--primary-6))
}

.arco-checkbox-indeterminate .arco-checkbox-mask {
    background-color: rgb(var(--primary-6))
}

.arco-checkbox.arco-checkbox-disabled:hover .arco-checkbox-mask {
    border-color: var(--color-border-1)
}

.arco-checkbox-disabled .arco-checkbox-mask {
    border-color: var(--color-border-1);
    background-color: var(--color-fill-2)
}

.arco-checkbox-disabled.arco-checkbox-checked .arco-checkbox-mask,
.arco-checkbox-disabled.arco-checkbox-checked:hover .arco-checkbox-mask,
.arco-checkbox-disabled.arco-checkbox-indeterminate .arco-checkbox-mask,
.arco-checkbox-disabled.arco-checkbox-indeterminate:hover .arco-checkbox-mask {
    background-color: var(--color-fill-2);
    border-color: var(--color-border-1);
}

.arco-checkbox-disabled .arco-checkbox-text {
    color: var(--color-text-6)
}

.arco-checkbox-disabled .arco-checkbox-mask-icon {
    color: var(--color-text-6)
}

.arco-collapse {
    border: 1px solid var(--color-border-1)
}

.arco-collapse-item {
    border-bottom: 1px solid var(--color-border-1)
}

.arco-collapse-item-active>.arco-collapse-item-header {
    background-color: var(--color-fill-4);
    border-color: var(--color-border-2)
}

.arco-collapse-item-header {
    background-color: var(--color-fill-4);
    color: var(--color-text-1)
}

.arco-collapse-item-header:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-primary-light-3)
}

.arco-collapse-item-header-disabled {
    color: var(--color-text-6);
    background-color: var(--color-bg-white)
}

.arco-collapse-item-header-disabled .arco-collapse-item-header-icon {
    color: var(--color-text-6)
}

.arco-collapse-item-header-icon {
    color: var(--color-text-3)
}

.arco-collapse-item-content {
    color: var(--color-text-2);
    background-color: var(--color-fill-4)
}

.arco-collapse-item.arco-collapse-item-disabled>.arco-collapse-item-content {
    color: var(--color-text-6)
}

.arco-comment-author {
    color: var(--color-text-2)
}

.arco-comment-datetime {
    color: var(--color-text-3)
}

.arco-comment-content {
    color: var(--color-text-2)
}

.arco-comment-actions {
    color: var(--color-text-2)
}

.arco-picker-container,
.arco-picker-range-container {
    border: 1px solid var(--color-border-1);
    background-color: var(--color-fill-5)
}

.arco-picker-container-shortcuts-placement-left .arco-picker-panel-wrapper,
.arco-picker-range-container-shortcuts-placement-left .arco-picker-panel-wrapper,
.arco-picker-container-shortcuts-placement-left .arco-picker-range-panel-wrapper,
.arco-picker-range-container-shortcuts-placement-left .arco-picker-range-panel-wrapper {
    border-left: 1px solid var(--color-border-1)
}

.arco-picker-header {
    border-bottom: 1px solid var(--color-border-1)
}

.arco-picker-header-value {
    color: var(--color-text-1)
}

.arco-picker-header-icon {
    color: var(--color-text-2);
    background-color: transparent;
}

.arco-picker-header-icon:not(.arco-picker-header-icon-hidden):hover {
    background-color: rgb(var(--primary-1))
}

.arco-picker-header-label:hover {
    background-color: var(--color-fill-3)
}

.arco-picker-week-list-item {
    color: var(--color-text-2)
}

.arco-picker-date-value {
    color: var(--color-text-5)
}

.arco-picker-cell-in-view .arco-picker-date-value {
    color: var(--color-text-1)
}

.arco-picker-cell:hover .arco-picker-date-value {
    color: var(--color-text-1)
}

.arco-picker-cell-today::after {
    background-color: rgb(var(--primary-6))
}

.arco-picker-cell-disabled .arco-picker-date {
    background-color: var(--color-fill-2)
}

.arco-picker-cell-disabled .arco-picker-date-value,
.arco-picker-cell-disabled:hover .arco-picker-date-value {
    color: var(--color-text-5)
}

.arco-picker-cell-selected .arco-picker-date-value,
.arco-picker-cell-selected:hover .arco-picker-date-value {
    color: var(--color-white);
    background-color: rgb(var(--primary-6))
}

.arco-picker-footer-btn-wrapper {
    border-top: 1px solid var(--color-border-1)
}

.arco-picker-footer-extra-wrapper {
    color: var(--color-text-1);
    border-top: 1px solid var(--color-border-1)
}

.arco-picker-footer-now-wrapper {
    border-top: 1px solid var(--color-border-1)
}

.arco-panel-date-timepicker-title {
    border-bottom: 1px solid var(--color-border-1);
    color: var(--color-text-1)
}

.arco-panel-date-holder {
    border-top: 1px solid var(--color-border-1)
}

.arco-panel-date-holder-btn {
    color: var(--color-text-3)
}

.arco-panel-date-holder-btn:first-child {
    border-right: 1px solid var(--color-border-1)
}

.arco-panel-date-holder-btn:hover,
.arco-panel-date-holder-btn:active,
.arco-panel-date-holder-btn-active {
    color: var(--color-text-1)
}

.arco-panel-date:first-child .arco-panel-date-holder {
    border-right: 1px solid var(--color-border-1)
}

.arco-datepicker-shortcuts-wrapper>li:hover {
    color: rgb(var(--primary-6))
}

.arco-descriptions-title {
    color: var(--color-text-2)
}

.arco-descriptions-item-label {
    color: var(--color-text-4)
}

.arco-descriptions-item-value {
    color: var(--color-text-2)
}

.arco-descriptions-item-label-inline {
    color: var(--color-text-5)
}

.arco-descriptions-item-value-inline {
    color: var(--color-text-2)
}

.arco-descriptions-border .arco-descriptions-body {
    border: 1px solid var(--color-border-2)
}

.arco-descriptions-border .arco-descriptions-row:not(:last-child) {
    border-bottom: 1px solid var(--color-border-2)
}

.arco-descriptions-border:not(.arco-descriptions-rtl) .arco-descriptions-item,
.arco-descriptions-border:not(.arco-descriptions-rtl) .arco-descriptions-item-label,
.arco-descriptions-border:not(.arco-descriptions-rtl) .arco-descriptions-item-value {
    border-right: 1px solid var(--color-border-2)
}

.arco-descriptions-border .arco-descriptions-item-label {
    background-color: transparent;
}

.arco-descriptions-rtl.arco-descriptions-border .arco-descriptions-item,
.arco-descriptions-rtl.arco-descriptions-border .arco-descriptions-item-label,
.arco-descriptions-rtl.arco-descriptions-border .arco-descriptions-item-value {
    border-left: 1px solid var(--color-border-2)
}

.arco-divider-horizontal {
    border-bottom: 1px solid var(--color-border-2)
}

.arco-divider-vertical {
    border-left: 1px solid var(--color-border-2)
}

.arco-divider-text {
    color: var(--color-text-1)
}

.arco-drawer-mask {
    background-color: var(--color-mask-bg)
}

.arco-drawer {
    background-color: var(--color-bg-3)
}

.arco-drawer-header-title {
    color: var(--color-text-1)
}

.arco-drawer .arco-drawer-close-icon {
    color: var(--color-text-1)
}

.arco-drawer-content {
    color: var(--color-text-2)
}

.arco-dropdown-menu {
    background-color: var(--color-fill-5)
}

.arco-dropdown-menu-item,
.arco-dropdown-menu-pop-header {
    color: var(--color-text-2)
}

.arco-dropdown-menu-item.arco-dropdown-menu-selected,
.arco-dropdown-menu-pop-header.arco-dropdown-menu-selected {
    color: var(--color-text-2);
    background-color: rgb(var(--primary-2))
}

.arco-dropdown-menu-item:hover,
.arco-dropdown-menu-pop-header:hover {
    color: var(--color-text-2);
    background-color: rgb(var(--primary-2))
}

.arco-dropdown-menu-item:focus-visible,
.arco-dropdown-menu-pop-header:focus-visible {
    box-shadow: 0 0 0 2px rgb(var(--primary-6)) inset
}

.arco-dropdown-menu-item.arco-dropdown-menu-active,
.arco-dropdown-menu-pop-header.arco-dropdown-menu-active {
    box-shadow: 0 0 0 1px rgb(var(--primary-6)) inset
}

.arco-dropdown-menu-item.arco-dropdown-menu-disabled,
.arco-dropdown-menu-pop-header.arco-dropdown-menu-disabled {
    color: var(--color-text-6)
}

.arco-dropdown-menu-group-title {
    color: var(--color-text-3)
}

.arco-dropdown-menu-dark {
    border-color: var(--color-menu-dark-bg);
    background-color: var(--color-menu-dark-bg)
}

.arco-dropdown-menu-dark .arco-dropdown-menu-item,
.arco-dropdown-menu-dark .arco-dropdown-menu-pop-header {
    color: var(--color-text-4)
}

.arco-dropdown-menu-dark .arco-dropdown-menu-item.arco-dropdown-menu-selected,
.arco-dropdown-menu-dark .arco-dropdown-menu-pop-header.arco-dropdown-menu-selected {
    color: var(--color-white)
}

.arco-dropdown-menu-dark .arco-dropdown-menu-item.arco-dropdown-menu-selected:hover,
.arco-dropdown-menu-dark .arco-dropdown-menu-pop-header.arco-dropdown-menu-selected:hover {
    color: var(--color-white)
}

.arco-dropdown-menu-dark .arco-dropdown-menu-item:hover,
.arco-dropdown-menu-dark .arco-dropdown-menu-pop-header:hover {
    color: var(--color-text-4);
    background-color: var(--color-menu-dark-hover)
}

.arco-dropdown-menu-dark .arco-dropdown-menu-item.arco-dropdown-menu-disabled,
.arco-dropdown-menu-dark .arco-dropdown-menu-pop-header.arco-dropdown-menu-disabled {
    color: var(--color-text-2)
}

.arco-dropdown-menu-dark .arco-dropdown-menu-group-title {
    color: var(--color-text-3)
}

.arco-dropdown-menu+.arco-trigger-arrow {
    background-color: var(--color-bg-1)
}

.arco-empty .arco-empty-description {
    color: var(--color-text-6)
}

.arco-form-extra {
    color: var(--color-text-5)
}

.arco-form-message-help {
    color: var(--color-text-5)
}

.arco-form-label-item>label {
    color: var(--color-text-2)
}

.arco-form-label-item .arco-form-item-tooltip {
    color: var(--color-text-4)
}

.arco-form-item-status-validating .arco-input:not(.arco-input-disabled),
.arco-form-item-status-validating .arco-input-inner-wrapper:not(.arco-input-inner-wrapper-disabled),
.arco-form-item-status-validating .arco-textarea:not(.arco-textarea-disabled) {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-validating .arco-input:not(.arco-input-disabled):hover,
.arco-form-item-status-validating .arco-input-inner-wrapper:not(.arco-input-inner-wrapper-disabled):hover,
.arco-form-item-status-validating .arco-textarea:not(.arco-textarea-disabled):hover {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-validating .arco-input-inner-wrapper.arco-input-inner-wrapper-focus,
.arco-form-item-status-validating .arco-input-inner-wrapper.arco-textarea-focus,
.arco-form-item-status-validating .arco-textarea.arco-input-inner-wrapper-focus,
.arco-form-item-status-validating .arco-textarea.arco-textarea-focus,
.arco-form-item-status-validating .arco-input-inner-wrapper.arco-input-inner-wrapper-focus:hover,
.arco-form-item-status-validating .arco-input-inner-wrapper.arco-textarea-focus:hover,
.arco-form-item-status-validating .arco-textarea.arco-input-inner-wrapper-focus:hover,
.arco-form-item-status-validating .arco-textarea.arco-textarea-focus:hover {
    border-color: rgb(var(--primary-6));
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 rgb(var(--primary-2))
}

.arco-form-item-status-validating .arco-input:focus,
.arco-form-item-status-validating .arco-input:focus:hover {
    border-color: rgb(var(--primary-6));
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 rgb(var(--primary-2))
}

.arco-form-item-status-validating .arco-select:not(.arco-select-disabled) .arco-select-view {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-validating .arco-select:not(.arco-select-disabled):hover .arco-select-view {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-validating .arco-select:not(.arco-select-disabled).arco-select-focused .arco-select-view {
    background-color: var(--color-fill-4);
    border-color: rgb(var(--primary-6));
    box-shadow: 0 0 0 0 rgb(var(--primary-2))
}

.arco-form-item-status-validating .arco-cascader:not(.arco-cascader-disabled) .arco-cascader-view {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-validating .arco-cascader:not(.arco-cascader-disabled):hover .arco-cascader-view {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-validating .arco-cascader:not(.arco-cascader-disabled).arco-cascader-focused .arco-cascader-view {
    background-color: var(--color-fill-4);
    border-color: rgb(var(--primary-6));
    box-shadow: 0 0 0 0 rgb(var(--primary-2))
}

.arco-form-item-status-validating .arco-tree-select:not(.arco-tree-select-disabled) .arco-tree-select-view {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-validating .arco-tree-select:not(.arco-tree-select-disabled):hover .arco-tree-select-view {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-validating .arco-tree-select:not(.arco-tree-select-disabled).arco-tree-select-focused .arco-tree-select-view {
    background-color: var(--color-fill-4);
    border-color: rgb(var(--primary-6));
    box-shadow: 0 0 0 0 rgb(var(--primary-2))
}

.arco-form-item-status-validating .arco-picker:not(.arco-picker-disabled) {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-validating .arco-picker:not(.arco-picker-disabled):hover {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-validating .arco-picker-focused:not(.arco-picker-disabled),
.arco-form-item-status-validating .arco-picker-focused:not(.arco-picker-disabled):hover {
    border-color: rgb(var(--primary-6));
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 rgb(var(--primary-2))
}

.arco-form-item-status-validating .arco-input-tag {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-validating .arco-input-tag:hover {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-validating .arco-input-tag.arco-input-tag-focus {
    border-color: rgb(var(--primary-6));
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 rgb(var(--primary-2))
}

.arco-form-item-status-validating .arco-form-message-help {
    color: rgb(var(--primary-6))
}

.arco-form-item-status-validating .arco-form-item-feedback {
    color: rgb(var(--primary-6))
}

.arco-form-item-status-success .arco-input:not(.arco-input-disabled),
.arco-form-item-status-success .arco-input-inner-wrapper:not(.arco-input-inner-wrapper-disabled),
.arco-form-item-status-success .arco-textarea:not(.arco-textarea-disabled) {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-success .arco-input:not(.arco-input-disabled):hover,
.arco-form-item-status-success .arco-input-inner-wrapper:not(.arco-input-inner-wrapper-disabled):hover,
.arco-form-item-status-success .arco-textarea:not(.arco-textarea-disabled):hover {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-success .arco-input-inner-wrapper.arco-input-inner-wrapper-focus,
.arco-form-item-status-success .arco-input-inner-wrapper.arco-textarea-focus,
.arco-form-item-status-success .arco-textarea.arco-input-inner-wrapper-focus,
.arco-form-item-status-success .arco-textarea.arco-textarea-focus,
.arco-form-item-status-success .arco-input-inner-wrapper.arco-input-inner-wrapper-focus:hover,
.arco-form-item-status-success .arco-input-inner-wrapper.arco-textarea-focus:hover,
.arco-form-item-status-success .arco-textarea.arco-input-inner-wrapper-focus:hover,
.arco-form-item-status-success .arco-textarea.arco-textarea-focus:hover {
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 var(--color-success-light-2)
}

.arco-form-item-status-success .arco-input:focus,
.arco-form-item-status-success .arco-input:focus:hover {
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 var(--color-success-light-2)
}

.arco-form-item-status-success .arco-select:not(.arco-select-disabled) .arco-select-view {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-success .arco-select:not(.arco-select-disabled):hover .arco-select-view {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-success .arco-select:not(.arco-select-disabled).arco-select-focused .arco-select-view {
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 var(--color-success-light-2)
}

.arco-form-item-status-success .arco-cascader:not(.arco-cascader-disabled) .arco-cascader-view {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-success .arco-cascader:not(.arco-cascader-disabled):hover .arco-cascader-view {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-success .arco-cascader:not(.arco-cascader-disabled).arco-cascader-focused .arco-cascader-view {
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 var(--color-success-light-2)
}

.arco-form-item-status-success .arco-tree-select:not(.arco-tree-select-disabled) .arco-tree-select-view {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-success .arco-tree-select:not(.arco-tree-select-disabled):hover .arco-tree-select-view {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-success .arco-tree-select:not(.arco-tree-select-disabled).arco-tree-select-focused .arco-tree-select-view {
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 var(--color-success-light-2)
}

.arco-form-item-status-success .arco-picker:not(.arco-picker-disabled) {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-success .arco-picker:not(.arco-picker-disabled):hover {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-success .arco-picker-focused:not(.arco-picker-disabled),
.arco-form-item-status-success .arco-picker-focused:not(.arco-picker-disabled):hover {
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 var(--color-success-light-2)
}

.arco-form-item-status-success .arco-input-tag {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-success .arco-input-tag:hover {
    background-color: var(--color-fill-2)
}

.arco-form-item-status-success .arco-input-tag.arco-input-tag-focus {
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 var(--color-success-light-2)
}

.arco-form-item-status-warning .arco-input-inner-wrapper.arco-input-inner-wrapper-focus,
.arco-form-item-status-warning .arco-input-inner-wrapper.arco-textarea-focus,
.arco-form-item-status-warning .arco-textarea.arco-input-inner-wrapper-focus,
.arco-form-item-status-warning .arco-textarea.arco-textarea-focus,
.arco-form-item-status-warning .arco-input-inner-wrapper.arco-input-inner-wrapper-focus:hover,
.arco-form-item-status-warning .arco-input-inner-wrapper.arco-textarea-focus:hover,
.arco-form-item-status-warning .arco-textarea.arco-input-inner-wrapper-focus:hover,
.arco-form-item-status-warning .arco-textarea.arco-textarea-focus:hover {
    background-color: var(--color-bg-2)
}

.arco-form-item-status-warning .arco-input:focus,
.arco-form-item-status-warning .arco-input:focus:hover {
    background-color: var(--color-bg-2)
}

.arco-form-item-status-warning .arco-select:not(.arco-select-disabled).arco-select-focused .arco-select-view {
    background-color: var(--color-bg-2)
}

.arco-form-item-status-warning .arco-cascader:not(.arco-cascader-disabled).arco-cascader-focused .arco-cascader-view {
    background-color: var(--color-bg-2)
}

.arco-form-item-status-warning .arco-tree-select:not(.arco-tree-select-disabled).arco-tree-select-focused .arco-tree-select-view {
    background-color: var(--color-bg-2)
}

.arco-form-item-status-warning .arco-picker-focused:not(.arco-picker-disabled),
.arco-form-item-status-warning .arco-picker-focused:not(.arco-picker-disabled):hover {
    background-color: var(--color-bg-2)
}

.arco-form-item-status-warning .arco-input-tag.arco-input-tag-focus {
    background-color: var(--color-bg-2)
}

.arco-form-item-status-error .arco-input:not(.arco-input-disabled):hover,
.arco-form-item-status-error .arco-input-inner-wrapper:not(.arco-input-inner-wrapper-disabled):hover,
.arco-form-item-status-error .arco-textarea:not(.arco-textarea-disabled):hover, 
.arco-form-item-status-warning .arco-input:not(.arco-input-disabled):hover,
.arco-form-item-status-warning .arco-input-inner-wrapper:not(.arco-input-inner-wrapper-disabled):hover,
.arco-form-item-status-warning .arco-textarea:not(.arco-textarea-disabled):hover {
    background-color: transparent;
}

.arco-form-item-status-error .arco-input:not(.arco-input-disabled), 
.arco-form-item-status-error .arco-input-inner-wrapper:not(.arco-input-inner-wrapper-disabled), 
.arco-form-item-status-error .arco-textarea:not(.arco-textarea-disabled),
.arco-form-item-status-error .arco-select:not(.arco-select-disabled) .arco-select-view, 
.arco-form-item-status-error .arco-picker:not(.arco-picker-disabled),
.arco-form-item-status-warning .arco-input:not(.arco-input-disabled), 
.arco-form-item-status-warning .arco-input-inner-wrapper:not(.arco-input-inner-wrapper-disabled), 
.arco-form-item-status-warning .arco-textarea:not(.arco-textarea-disabled),
.arco-form-item-status-warning .arco-select:not(.arco-select-disabled) .arco-select-view, 
.arco-form-item-status-warning .arco-picker:not(.arco-picker-disabled) {  
    background-color: transparent;
}

.arco-form-item-status-error .arco-input-inner-wrapper.arco-input-inner-wrapper-focus,
.arco-form-item-status-error .arco-input-inner-wrapper.arco-textarea-focus,
.arco-form-item-status-error .arco-textarea.arco-input-inner-wrapper-focus,
.arco-form-item-status-error .arco-textarea.arco-textarea-focus,
.arco-form-item-status-error .arco-input-inner-wrapper.arco-input-inner-wrapper-focus:hover,
.arco-form-item-status-error .arco-input-inner-wrapper.arco-textarea-focus:hover,
.arco-form-item-status-error .arco-textarea.arco-input-inner-wrapper-focus:hover,
.arco-form-item-status-error .arco-textarea.arco-textarea-focus:hover {
    background-color: var(--color-fill-4)
}

.arco-form-item-status-error .arco-input:focus,
.arco-form-item-status-error .arco-input:focus:hover {
    background-color: var(--color-fill-4)
}

.arco-form-item-status-error .arco-select:not(.arco-select-disabled):hover .arco-select-view {
    background-color: var(--color-danger-light-2)
}

.arco-form-item-status-error .arco-select:not(.arco-select-disabled).arco-select-focused .arco-select-view {
    background-color: var(--color-fill-4)
}

.arco-form-item-status-error .arco-cascader:not(.arco-cascader-disabled):hover .arco-cascader-view {
    background-color: var(--color-danger-light-2)
}

.arco-form-item-status-error .arco-cascader:not(.arco-cascader-disabled).arco-cascader-focused .arco-cascader-view {
    background-color: var(--color-fill-4)
}

.arco-form-item-status-error .arco-tree-select:not(.arco-tree-select-disabled):hover .arco-tree-select-view {
    background-color: var(--color-danger-light-2)
}

.arco-form-item-status-error .arco-tree-select:not(.arco-tree-select-disabled).arco-tree-select-focused .arco-tree-select-view {
    background-color: var(--color-fill-4)
}

.arco-form-item-status-error .arco-picker:not(.arco-picker-disabled):hover {
    background-color: var(--color-danger-light-2)
}

.arco-form-item-status-error .arco-picker-focused:not(.arco-picker-disabled),
.arco-form-item-status-error .arco-picker-focused:not(.arco-picker-disabled):hover {
    background-color: var(--color-fill-4)
}

.arco-form-item-status-error .arco-input-tag:hover {
    background-color: var(--color-danger-light-2)
}

.arco-form-item-status-error .arco-input-tag.arco-input-tag-focus {
    background-color: var(--color-fill-4)
}

.arco-image-trigger {
    background: var(--color-bg-5);
    border: 1px solid var(--color-neutral-3)
}

.arco-image-trigger .arco-trigger-arrow {
    border: 1px solid var(--color-neutral-3);
    background-color: var(--color-bg-5)
}

.arco-image-img:focus-visible {
    box-shadow: 0 0 0 2px rgb(var(--primary-6))
}

.arco-image-with-footer-inner .arco-image-footer {
    color: var(--color-white)
}

.arco-image-with-footer-inner .arco-image-caption-title {
    color: var(--color-white)
}

.arco-image-with-footer-inner .arco-image-caption-description {
    color: var(--color-white)
}

.arco-image-with-footer-outer .arco-image-footer {
    color: var(--color-neutral-8)
}

.arco-image-with-footer-outer .arco-image-caption-title {
    color: var(--color-text-1)
}

.arco-image-with-footer-outer .arco-image-caption-description {
    color: var(--color-neutral-6)
}

.arco-image-with-footer-outer .arco-image-actions-item:hover {
    background: var(--color-neutral-2)
}

.arco-image-error {
    background-color: var(--color-neutral-1);
    color: var(--color-neutral-4)
}

.arco-image-loader {
    background-color: var(--color-neutral-1)
}

.arco-image-loader-spin {
    color: rgb(var(--primary-6))
}

.arco-image-loader-spin-text {
    color: var(--color-neutral-6)
}

.arco-image-trigger .arco-image-actions-item {
    color: var(--color-neutral-8)
}

.arco-image-trigger .arco-image-actions-item:hover {
    background: var(--color-neutral-2)
}

.arco-image-preview-mask {
    background-color: var(--color-mask-bg)
}

.arco-image-preview-scale-value {
    color: var(--color-white)
}

.arco-image-preview-toolbar {
    background-color: var(--color-bg-2)
}

.arco-image-preview-toolbar-action {
    color: var(--color-neutral-8)
}

.arco-image-preview-toolbar-action:hover {
    background-color: var(--color-neutral-2);
    color: rgb(var(--primary-6))
}

.arco-image-preview-toolbar-action-disabled,
.arco-image-preview-toolbar-action-disabled:hover {
    color: var(--color-text-4)
}

.arco-image-preview-loading {
    color: rgb(var(--primary-6))
}

.arco-image-preview-close-btn {
    color: var(--color-white)
}

.arco-image-preview-arrow-left,
.arco-image-preview-arrow-right {
    color: var(--color-white)
}

.arco-image-preview-arrow-left>svg,
.arco-image-preview-arrow-right>svg {
    color: var(--color-white)
}

.arco-input {
    color: var(--color-text-2);
    border: 1px solid var(--color-border-1);
    background-color: var(--color-fill-4);
}

.arco-input::placeholder {
    color: var(--color-text-5)
}

.arco-input:hover {
    background-color: var(--color-fill-4);
    border-color: rgb(var(--primary-6))
}

.arco-input:focus,
.arco-input.arco-input-focus {
    border-color: var(--color-border-1);
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 rgb(var(--primary-2))
}

.arco-input-error {
    background-color: var(--color-fill-4);
}

.arco-input-error.arco-input-focus,
.arco-input-error.arco-input-focus:hover {
    background-color: var(--color-fill-4)
}

.arco-input-error:focus,
.arco-input-error:focus:hover {
    background-color: var(--color-fill-4)
}

.arco-input-warning {
    background-color: var(--color-warning-light-1)
}

.arco-input-warning:hover {
    background-color: var(--color-warning-light-2)
}

.arco-input-warning.arco-input-focus,
.arco-input-warning.arco-input-focus:hover {
    background-color: var(--color-bg-white);
    box-shadow: 0 0 0 0 var(--color-warning-light-2)
}

.arco-input-warning:focus,
.arco-input-warning:focus:hover {
    background-color: var(--color-bg-white);
    box-shadow: 0 0 0 0 var(--color-warning-light-2)
}

.arco-input-disabled {
    background-color: var(--color-fill-2);
    color: var(--color-text-6);
    -webkit-text-fill-color: var(--color-text-6);
    border-color: var(--color-border-1)
}

.arco-input-disabled:hover {
    border-color: var(--color-border-1);
    background-color: var(--color-fill-2);
    color: var(--color-text-6)
}

.arco-input-disabled::placeholder {
    color: var(--color-text-6)
}

.arco-input input:disabled {
    color: var(--color-text-6);
    -webkit-text-fill-color: var(--color-text-6)
}

.arco-input-word-limit {
    color: var(--color-text-3)
}

.arco-input-clear-icon {
    color: var(--color-text-2)
}

.arco-input-clear-icon:focus-visible::before {
    box-shadow: 0 0 0 2px var(--color-border-1)
}

.arco-input-inner-wrapper {
    color: var(--color-text-2);
    border: 1px solid var(--color-border-1);
    background-color: var(--color-fill-4);
}

.arco-input-inner-wrapper::placeholder {
    color: var(--color-text-5);
}

.arco-input-inner-wrapper:hover {
    background-color: var(--color-fill-4);
    border-color: rgb(var(--primary-6));
}

.arco-input-inner-wrapper:focus,
.arco-input-inner-wrapper.arco-input-inner-wrapper-focus {
    border-color: var(--color-border-1);
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 rgb(var(--primary-2));
}

.arco-input-inner-wrapper-error {
    background-color: var(--color-fill-4);
}

.arco-input-inner-wrapper-error.arco-input-inner-wrapper-focus,
.arco-input-inner-wrapper-error.arco-input-inner-wrapper-focus:hover {
    background-color: var(--color-fill-4);
}

.arco-input-inner-wrapper-error:focus,
.arco-input-inner-wrapper-error:focus:hover {
    background-color: var(--color-fill-4);
}

.arco-input-inner-wrapper-warning {
    background-color: var(--color-warning-light-1)
}

.arco-input-inner-wrapper-warning:hover {
    background-color: var(--color-warning-light-2)
}

.arco-input-inner-wrapper-warning.arco-input-inner-wrapper-focus,
.arco-input-inner-wrapper-warning.arco-input-inner-wrapper-focus:hover {
    background-color: var(--color-bg-white);
    box-shadow: 0 0 0 0 var(--color-warning-light-2)
}

.arco-input-inner-wrapper-warning:focus,
.arco-input-inner-wrapper-warning:focus:hover {
    background-color: var(--color-bg-white);
    box-shadow: 0 0 0 0 var(--color-warning-light-2)
}

.arco-input-inner-wrapper .arco-input-group-prefix {
    color: var(--color-text-3);
}

.arco-input-inner-wrapper .arco-input-group-suffix {
    color: var(--color-text-3);
}

.arco-input-inner-wrapper-disabled {
    background-color: var(--color-fill-2);
    color: var(--color-text-6);
    -webkit-text-fill-color: var(--color-text-6);
    border-color: var(--color-border-1)
}

.arco-input-inner-wrapper-disabled:hover {
    border-color: var(--color-border-1);
    background-color: var(--color-fill-2);
    color: var(--color-text-6)
}

.arco-input-inner-wrapper-disabled::placeholder {
    color: var(--color-text-6)
}

.arco-input-inner-wrapper:not(.arco-input-inner-wrapper-focus) .arco-input-clear-icon:hover::before {
    background-color: rgb(var(--primary-2))
}

.arco-input-group-addbefore,
.arco-input-group-addafter {
    color: var(--color-text-1);
    background-color: transparent;
}

.arco-input-group-addafter {
    border-left: 1px solid var(--color-border-1)
}

.arco-input-group-addbefore {
    border-right: 1px solid var(--color-border-1)
}

.arco-textarea {
    color: var(--color-text-2);
    border: 1px solid var(--color-border-1);
    background-color: var(--color-fill-4)
}

.arco-textarea::placeholder {
    color: var(--color-text-5)
}

.arco-textarea:hover {
    background-color: var(--color-fill-4);
    border-color: rgb(var(--primary-6))
}

.arco-textarea:focus,
.arco-textarea.arco-textarea-focus {
    border-color: var(--color-border-1);
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 rgb(var(--primary-2))
}

.arco-textarea-error {
    background-color: var(--color-fill-4)
}

.arco-textarea-error.arco-textarea-focus,
.arco-textarea-error.arco-textarea-focus:hover {
    background-color: var(--color-fill-4)
}

.arco-textarea-error:focus,
.arco-textarea-error:focus:hover {
    background-color: var(--color-fill-4)
}

.arco-textarea-warning {
    background-color: var(--color-warning-light-1)
}

.arco-textarea-warning:hover {
    background-color: var(--color-warning-light-2)
}

.arco-textarea-warning.arco-textarea-focus,
.arco-textarea-warning.arco-textarea-focus:hover {
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 var(--color-warning-light-2)
}

.arco-textarea-warning:focus,
.arco-textarea-warning:focus:hover {
    background-color: var(--color-fill-4);
    box-shadow: 0 0 0 0 var(--color-warning-light-2)
}

.arco-textarea-disabled {
    background-color: var(--color-fill-2);
    color: var(--color-text-6);
    -webkit-text-fill-color: var(--color-text-6);
    border-color: var(--color-border-1)
}

.arco-textarea-disabled:hover {
    border-color: var(--color-border-1);
    background-color: var(--color-fill-2);
    color: var(--color-text-6)
}

.arco-textarea-disabled::placeholder {
    color: var(--color-text-6)
}

.arco-input-group.arco-input-group-compact>*:not(:last-child) {
    border-right: 1px solid var(--color-border-1)
}

.arco-input-group.arco-input-group-compact>.arco-input:not(:last-child) {
    border-right-color: var(--color-border-1)
}

.arco-input-group.arco-input-group-compact>.arco-input:not(:last-child):focus {
    border-right-color: var(--color-border-1)
}

.arco-textarea-word-limit {
    color: var(--color-text-5)
}

.arco-textarea-clear-icon {
    color: var(--color-text-2)
}

.arco-input-search.arco-input-group-wrapper .arco-input-group-suffix {
    color: var(--color-text-3)
}

.arco-input-search.arco-input-group-wrapper:not(.arco-input-disabled) .arco-input-group-addbefore {
    color: var(--color-text-2)
}

.arco-input-search.arco-input-group-wrapper .arco-input-search-btn {
    color: var(--color-white)
}

.arco-input-password.arco-input-group-wrapper:not(.arco-input-disabled) .arco-input-group-suffix {
    color: var(--color-text-3)
}

.arco-input-password.arco-input-group-wrapper .arco-input-password-visibility-icon:focus-visible {
    box-shadow: 0 0 0 2px var(--color-border-1)
}

.arco-input-group-wrapper-rtl .arco-input-group-addafter {
    border-right: 1px solid var(--color-border-1)
}

.arco-input-group-wrapper-rtl .arco-input-group-addbefore {
    border-left: 1px solid var(--color-border-1)
}

.arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact>*:not(:last-child) {
    border-left: 1px solid var(--color-border-1)
}

.arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact>.arco-input:not(:last-child) {
    border-left-color: var(--color-border-1)
}

.arco-input-group-wrapper-rtl .arco-input-group.arco-input-group-compact>.arco-input:not(:last-child):focus {
    border-left-color: var(--color-border-1)
}

.arco-input-number-step-button {
    border-color: var(--color-neutral-3);
    background-color: var(--color-fill-4);
    color: var(--color-text-2)
}

.arco-input-number-step-button:hover {
    border-color: rgb(var(--primary-1));
    background-color: rgb(var(--primary-1))
}

.arco-input-number-step-button:active {
    border-color: rgb(var(--primary-2));
    background-color: rgb(var(--primary-2))
}

.arco-input-number-step-button-disabled {
    background-color: var(--color-fill-2);
    color: var(--color-text-6)
}

.arco-input-number-step-button-disabled:hover,
.arco-input-number-step-button-disabled:active {
    border-color: var(--color-neutral-3);
    background-color: var(--color-fill-2)
}

.arco-input-number-mode-embed .arco-input-inner-wrapper:not(.arco-input-inner-wrapper-focus) .arco-input-number-step-button:not(.arco-input-number-step-button-disabled):hover {
    background-color: rgb(var(--primary-2))
}

.arco-input-number-mode-button .arco-input-group .arco-input-number-step-button:active {
    border-color: rgb(var(--primary-2))
}

.arco-input-number-mode-button .arco-input-group-addbefore .arco-input-number-step-button {
    border-right-color: var(--color-neutral-3)
}

.arco-input-number-mode-button .arco-input-group-addafter .arco-input-number-step-button {
    border-left-color: var(--color-neutral-3)
}

.arco-input-number-readonly .arco-input-number-step-button {
    color: var(--color-text-6)
}

.arco-input-tag {
    background-color: var(--color-fill-4);
    color: var(--color-text-2);
    border: 1px solid var(--color-border-1)
}

.arco-input-tag .arco-input-tag-clear-icon {
    color: var(--color-text-2)
}

.arco-input-tag:not(.arco-input-tag-focus) .arco-input-tag-clear-icon:hover::before {
    background-color: var(--color-fill-4)
}

.arco-input-tag-input::placeholder {
    color: var(--color-text-5)
}

.arco-input-tag:hover {
    background-color: var(--color-fill-4);
    border: 1px solid rgb(var(--primary-6))
}

.arco-input-tag.arco-input-tag-focus {
    background-color: var(--color-fill-4);
    border: 1px solid var(--color-border-1)
}

.arco-input-tag .arco-input-tag-tag {
    color: var(--color-text-2);
    background-color: rgb(var(--primary-2))
}

.arco-input-tag .arco-icon-hover:hover::before {
    background-color: var(--color-fill-2)
}

.arco-input-tag.arco-input-tag-focus .arco-input-tag-tag {
    border-color: var(--color-fill-2);
    background-color: rgb(var(--primary-2))
}

.arco-input-tag.arco-input-tag-focus .arco-icon-hover:hover::before {
    background-color: var(--color-fill-3)
}

.arco-input-tag.arco-input-tag-disabled .arco-input-tag-tag {
    color: var(--color-text-6);
    background-color: var(--color-fill-2)
}

.arco-input-tag-warning {
    background-color: var(--color-warning-light-1);
    color: var(--color-text-1)
}

.arco-input-tag-warning:hover {
    background-color: var(--color-warning-light-2)
}

.arco-input-tag-warning.arco-input-tag-focus {
    background-color: var(--color-bg-white);
    box-shadow: 0 0 0 0 var(--color-warning-light-2)
}

.arco-input-tag-error {
    color: var(--color-text-1)
}

.arco-input-tag-error.arco-input-tag-focus {
    background-color: var(--color-fill-4);
}

.arco-input-tag-disabled {
    background-color: var(--color-fill-2);
    color: var(--color-text-6);
    border: 1px solid var(--color-border-1)
}

.arco-input-tag-disabled:hover {
    background-color: var(--color-fill-2);
    border: 1px solid var(--color-border-1)
}

.arco-input-tag-disabled .arco-input-tag-input::placeholder {
    color: var(--color-text-6)
}

.arco-input-tag-addafter,
.arco-input-tag-addbefore {
    color: var(--color-text-2);
    background-color: var(--color-fill-4);
}

.arco-input-tag-addbefore {
    border-right: 1px solid var(--color-border-2)
}

.arco-input-tag-addafter {
    border-left: 1px solid var(--color-border-2)
}

.arco-input-tag-wrapper-rtl .arco-input-tag-addbefore {
    border-left: 1px solid var(--color-border-2)
}

.arco-input-tag-wrapper-rtl .arco-input-tag-addafter {
    border-right: 1px solid var(--color-border-2)
}

.arco-layout-sider {
    background: var(--color-menu-dark-bg)
}

.arco-layout-sider-trigger {
    color: var(--color-white)
}

.arco-layout-sider-trigger-light {
    background: var(--color-menu-light-bg);
    border-top: 1px solid var(--color-bg-5);
    color: var(--color-text-1)
}

.arco-layout-sider-light {
    background: var(--color-menu-light-bg)
}

.arco-link:focus-visible {
    box-shadow: 0 0 0 2px var(--color-link-light-3)
}

.arco-link.arco-link-disabled {
    color: var(--color-text-6)
}

.arco-list {
    color: var(--color-text-2);
    border: 1px solid var(--color-border-2)
}

.arco-list-header,
.arco-list-item:not(:last-child) {
    border-bottom: 1px solid var(--color-border-2)
}

.arco-list-footer {
    border-top: 1px solid var(--color-border-2)
}

.arco-list-header {
    color: var(--color-text-1)
}

.arco-list-item-meta-title {
    color: var(--color-text-1)
}

.arco-list-item-meta-description {
    color: var(--color-text-4)
}

.arco-list-hoverable .arco-list-item:hover {
    background-color: rgb(var(--primary-1))
}

.arco-menu-light .arco-menu-item,
.arco-menu-light .arco-menu-group-title,
.arco-menu-light .arco-menu-pop-header,
.arco-menu-light .arco-menu-inline-header {
    color: var(--color-text-2)
}

.arco-menu-light .arco-menu-item .arco-icon,
.arco-menu-light .arco-menu-group-title .arco-icon,
.arco-menu-light .arco-menu-pop-header .arco-icon,
.arco-menu-light .arco-menu-inline-header .arco-icon {
    color: var(--color-text-6)
}

.arco-menu-light .arco-menu-item:hover,
.arco-menu-light .arco-menu-group-title:hover,
.arco-menu-light .arco-menu-pop-header:hover,
.arco-menu-light .arco-menu-inline-header:hover {
    color: rgb(var(--primary-6))
}

.arco-menu-light .arco-menu-item:hover .arco-icon,
.arco-menu-light .arco-menu-group-title:hover .arco-icon,
.arco-menu-light .arco-menu-pop-header:hover .arco-icon,
.arco-menu-light .arco-menu-inline-header:hover .arco-icon {
    color: rgb(var(--primary-6))
}

.arco-menu-light .arco-menu-item:focus-visible,
.arco-menu-light .arco-menu-group-title:focus-visible,
.arco-menu-light .arco-menu-pop-header:focus-visible,
.arco-menu-light .arco-menu-inline-header:focus-visible {
    box-shadow: 0 0 0 2px rgb(var(--primary-6)) inset
}

.arco-menu-light .arco-menu-item.arco-menu-selected,
.arco-menu-light .arco-menu-group-title.arco-menu-selected,
.arco-menu-light .arco-menu-pop-header.arco-menu-selected,
.arco-menu-light .arco-menu-inline-header.arco-menu-selected {
    color: rgb(var(--primary-6))
}

.arco-menu-light .arco-menu-item.arco-menu-selected .arco-icon,
.arco-menu-light .arco-menu-group-title.arco-menu-selected .arco-icon,
.arco-menu-light .arco-menu-pop-header.arco-menu-selected .arco-icon,
.arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon {
    color: rgb(var(--primary-6))
}

.arco-menu-light .arco-menu-item.arco-menu-disabled,
.arco-menu-light .arco-menu-group-title.arco-menu-disabled,
.arco-menu-light .arco-menu-pop-header.arco-menu-disabled,
.arco-menu-light .arco-menu-inline-header.arco-menu-disabled {
    color: var(--color-text-6)
}

.arco-menu-light .arco-menu-item.arco-menu-disabled .arco-icon,
.arco-menu-light .arco-menu-group-title.arco-menu-disabled .arco-icon,
.arco-menu-light .arco-menu-pop-header.arco-menu-disabled .arco-icon,
.arco-menu-light .arco-menu-inline-header.arco-menu-disabled .arco-icon {
    color: var(--color-text-6)
}

.arco-menu-light .arco-menu-item.arco-menu-selected {
    background-color: rgb(var(--primary-2))
}

.arco-menu-light .arco-menu-inline-header.arco-menu-selected {
    color: rgb(var(--primary-6))
}

.arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon {
    color: rgb(var(--primary-6))
}

.arco-menu-light .arco-menu-inline-header.arco-menu-selected:hover {
    background-color: var(--color-fill-2)
}

.arco-menu-light .arco-menu-group-title {
    color: var(--color-text-3)
}

.arco-menu-light .arco-menu-collapse-button {
    background-color: var(--color-fill-1);
    color: var(--color-text-3)
}

.arco-menu-light .arco-menu-collapse-button:hover {
    background-color: var(--color-fill-3)
}

.arco-menu-light .arco-menu-collapse-button:focus-visible {
    box-shadow: 0 0 0 2px rgb(var(--primary-6))
}

.arco-menu-dark {
    background-color: var(--color-menu-dark-bg)
}

.arco-menu-dark .arco-menu-item,
.arco-menu-dark .arco-menu-group-title,
.arco-menu-dark .arco-menu-pop-header,
.arco-menu-dark .arco-menu-inline-header {
    background-color: var(--color-menu-dark-bg);
    color: var(--color-text-4)
}

.arco-menu-dark .arco-menu-item .arco-icon,
.arco-menu-dark .arco-menu-group-title .arco-icon,
.arco-menu-dark .arco-menu-pop-header .arco-icon,
.arco-menu-dark .arco-menu-inline-header .arco-icon {
    color: var(--color-text-3)
}

.arco-menu-dark .arco-menu-item:hover,
.arco-menu-dark .arco-menu-group-title:hover,
.arco-menu-dark .arco-menu-pop-header:hover,
.arco-menu-dark .arco-menu-inline-header:hover {
    background-color: var(--color-menu-dark-hover);
    color: var(--color-text-4)
}

.arco-menu-dark .arco-menu-item:hover .arco-icon,
.arco-menu-dark .arco-menu-group-title:hover .arco-icon,
.arco-menu-dark .arco-menu-pop-header:hover .arco-icon,
.arco-menu-dark .arco-menu-inline-header:hover .arco-icon {
    color: var(--color-text-3)
}

.arco-menu-dark .arco-menu-item:focus-visible,
.arco-menu-dark .arco-menu-group-title:focus-visible,
.arco-menu-dark .arco-menu-pop-header:focus-visible,
.arco-menu-dark .arco-menu-inline-header:focus-visible {
    box-shadow: 0 0 0 2px rgb(var(--primary-6)) inset
}

.arco-menu-dark .arco-menu-item.arco-menu-selected,
.arco-menu-dark .arco-menu-group-title.arco-menu-selected,
.arco-menu-dark .arco-menu-pop-header.arco-menu-selected,
.arco-menu-dark .arco-menu-inline-header.arco-menu-selected {
    color: var(--color-white)
}

.arco-menu-dark .arco-menu-item.arco-menu-selected .arco-icon,
.arco-menu-dark .arco-menu-group-title.arco-menu-selected .arco-icon,
.arco-menu-dark .arco-menu-pop-header.arco-menu-selected .arco-icon,
.arco-menu-dark .arco-menu-inline-header.arco-menu-selected .arco-icon {
    color: var(--color-white)
}

.arco-menu-dark .arco-menu-item.arco-menu-disabled,
.arco-menu-dark .arco-menu-group-title.arco-menu-disabled,
.arco-menu-dark .arco-menu-pop-header.arco-menu-disabled,
.arco-menu-dark .arco-menu-inline-header.arco-menu-disabled {
    background-color: var(--color-menu-dark-bg);
    color: var(--color-text-2)
}

.arco-menu-dark .arco-menu-item.arco-menu-disabled .arco-icon,
.arco-menu-dark .arco-menu-group-title.arco-menu-disabled .arco-icon,
.arco-menu-dark .arco-menu-pop-header.arco-menu-disabled .arco-icon,
.arco-menu-dark .arco-menu-inline-header.arco-menu-disabled .arco-icon {
    color: var(--color-text-2)
}

.arco-menu-dark .arco-menu-item.arco-menu-selected {
    background-color: var(--color-menu-dark-hover)
}

.arco-menu-dark .arco-menu-inline-header.arco-menu-selected {
    color: rgb(var(--primary-6))
}

.arco-menu-dark .arco-menu-inline-header.arco-menu-selected .arco-icon {
    color: rgb(var(--primary-6))
}

.arco-menu-dark .arco-menu-inline-header.arco-menu-selected:hover {
    background-color: var(--color-menu-dark-hover)
}

.arco-menu-dark.arco-menu-horizontal .arco-menu-item.arco-menu-selected:hover,
.arco-menu-dark.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected:hover,
.arco-menu-dark.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected:hover,
.arco-menu-dark.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected:hover {
    background-color: var(--color-menu-dark-hover)
}

.arco-menu-dark .arco-menu-group-title {
    color: var(--color-text-3)
}

.arco-menu-dark .arco-menu-collapse-button {
    background-color: rgb(var(--primary-6));
    color: var(--color-white)
}

.arco-menu-dark .arco-menu-collapse-button:hover {
    background-color: rgb(var(--primary-7))
}

.arco-menu-dark .arco-menu-collapse-button:focus-visible {
    box-shadow: 0 0 0 2px rgb(var(--primary-6))
}

.arco-menu-selected-label {
    background-color: rgb(var(--primary-6))
}

.arco-menu-pop-trigger .arco-dropdown-menu-dark~.arco-trigger-arrow-container .arco-trigger-arrow {
    background-color: var(--color-menu-dark-bg);
    border-color: var(--color-menu-dark-bg)
}

.arco-message {
    background-color: var(--color-fill-5)
}

.arco-message-icon {
    color: var(--color-text-2)
}

.arco-message-content {
    color: var(--color-text-2)
}

.arco-message-info {
    background-color: var(--color-fill-5)
}

.arco-message-info .arco-message-icon {
    color: rgb(var(--primary-6))
}

.arco-message-info .arco-message-content {
    color: var(--color-text-2)
}

.arco-message-success {
    background-color: var(--color-fill-5)
}

.arco-message-success .arco-message-content {
    color: var(--color-text-2)
}

.arco-message-warning {
    background-color: var(--color-fill-5)
}

.arco-message-warning .arco-message-content {
    color: var(--color-text-2)
}

.arco-message-error {
    background-color: var(--color-fill-5)
}

.arco-message-error .arco-message-content {
    color: var(--color-text-2)
}

.arco-message-loading {
    background-color: var(--color-fill-5)
}

.arco-message-loading .arco-message-icon {
    color: rgb(var(--primary-6))
}

.arco-message-loading .arco-message-content {
    color: var(--color-text-2)
}

.arco-message-close-btn {
    color: var(--color-text-2)
}

.arco-modal-mask {
    background-color: var(--color-mask-bg)
}

.arco-modal {
    background-color: var(--color-bg-1)
}

.arco-modal-content {
    color: var(--color-text-2)
}

.arco-modal .arco-modal-close-icon {
    color: var(--color-text-1)
}

.arco-modal-title {
    color: var(--color-text-1)
}

.arco-modal-title .arco-icon-info-circle-fill {
    color: rgb(var(--primary-6))
}

.arco-notification {
    background-color: var(--color-fill-5)
}

.arco-notification-icon {
    color: var(--color-text-1)
}

.arco-notification-info {
    background-color: var(--color-fill-5);
    border-color: transparent;
}

.arco-notification-info .arco-notification-icon {
    color: rgb(var(--primary-6))
}

.arco-notification-success {
    background-color: var(--color-fill-5)
}

.arco-notification-warning {
    background-color: var(--color-fill-5)
}

.arco-notification-error {
    background-color: var(--color-fill-5)
}

.arco-notification-title {
    color: var(--color-text-1)
}

.arco-notification-content {
    color: var(--color-text-2)
}

.arco-notification-info .arco-notification-title {
    color: var(--color-text-1)
}

.arco-notification-info .arco-notification-content {
    color: var(--color-text-1)
}

.arco-notification-success .arco-notification-title {
    color: var(--color-text-1)
}

.arco-notification-success .arco-notification-content {
    color: var(--color-text-1)
}

.arco-notification-warning .arco-notification-title {
    color: var(--color-text-1)
}

.arco-notification-warning .arco-notification-content {
    color: var(--color-text-1)
}

.arco-notification-error .arco-notification-title {
    color: var(--color-text-1)
}

.arco-notification-error .arco-notification-content {
    color: var(--color-text-2)
}

.arco-notification .arco-notification-close-btn {
    color: var(--color-text-1)
}

.arco-page-header .arco-icon-hover.arco-page-header-icon-hover:hover::before {
    background-color: var(--color-fill-1)
}

.arco-page-header-back {
    color: var(--color-text-2)
}

.arco-page-header-back:focus-visible::before {
    box-shadow: inset 0 0 0 2px var(--color-primary-light-3)
}

.arco-page-header-title {
    color: var(--color-text-1);
}

.arco-page-header-divider {
    background-color: var(--color-bg-white)
}

.arco-page-header-sub-title {
    color: var(--color-text-3)
}

.arco-page-header-content {
    border-top: 1px solid var(--color-border-1)
}

.arco-pagination-item {
    color: var(--color-text-3)
}

.arco-pagination-item-disabled {
    color: var(--color-text-6)
}

.arco-pagination-item:not(.arco-pagination-item-disabled):not(.arco-pagination-item-active):hover {
    background-color: rgb(var(--primary-1));
    color: var(--color-text-2)
}

.arco-pagination-item-active {
    color: rgb(var(--primary-6));
    background-color: rgb(var(--primary-2))
}

.arco-pagination-item:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-pagination-item-prev,
.arco-pagination-item-next {
    color: var(--color-text-3)
}

.arco-pagination-item-prev:not(.arco-pagination-item-disabled):hover,
.arco-pagination-item-next:not(.arco-pagination-item-disabled):hover {
    background-color: var(--color-fill-1);
    color: rgb(var(--primary-6))
}

.arco-pagination .arco-pagination-item-prev.arco-pagination-item-disabled,
.arco-pagination .arco-pagination-item-next.arco-pagination-item-disabled {
    color: var(--color-text-6)
}

.arco-pagination-jumper-text-goto, .arco-pagination-jumper-text-goto-suffix {
    color: var(--color-text-2)
}

.arco-pagination-total-text {
    color: var(--color-text-2)
}

.arco-pagination-simple .arco-pagination-jumper {
    color: var(--color-text-1)
}

.arco-pagination-simple .arco-pagination-item-prev,
.arco-pagination-simple .arco-pagination-item-next {
    color: var(--color-text-3)
}

.arco-pagination-simple .arco-pagination-item-prev:not(.arco-pagination-item-disabled):hover,
.arco-pagination-simple .arco-pagination-item-next:not(.arco-pagination-item-disabled):hover {
    background-color: rgb(var(--primary-1));
    color: rgb(var(--primary-6))
}

.arco-pagination-simple .arco-pagination-item-prev.arco-pagination-item-disabled,
.arco-pagination-simple .arco-pagination-item-next.arco-pagination-item-disabled {
    color: var(--color-text-4)
}

.arco-pagination-disabled .arco-pagination-item,
.arco-pagination-disabled .arco-pagination-item:not(.arco-pagination-item-disabled):not(.arco-pagination-item-active):hover {
    color: var(--color-text-6)
}

.arco-pagination.arco-pagination-disabled .arco-pagination-item-active {
    color: rgb(var(--primary-3))
}

.arco-popconfirm-title {
    color: var(--color-text-1)
}

.arco-popover-title {
    color: var(--color-text-1)
}

.arco-popover-content,
.arco-popconfirm-content {
    color: var(--color-text-2);
    background-color: var(--color-fill-5)
}

.arco-popover-arrow.arco-trigger-arrow,
.arco-popconfirm-arrow.arco-trigger-arrow {
    background-color: var(--color-fill-5)
}

.arco-progress-line-text,
.arco-progress-steps-text {
    color: var(--color-text-2)
}

.arco-progress-line-outer {
    background-color: var(--color-fill-3)
}

.arco-progress-line-inner {
    background-color: rgb(var(--primary-6))
}

.arco-progress-line-inner-buffer {
    background-color: var(--color-primary-light-3)
}

.arco-progress-line-text .arco-icon {
    color: var(--color-text-2)
}

.arco-progress-steps-text .arco-icon {
    color: var(--color-text-2)
}

.arco-progress-steps-item {
    background-color: var(--color-fill-3)
}

.arco-progress-steps-item-active {
    background-color: rgb(var(--primary-6))
}

.arco-progress-circle-text .arco-icon {
    color: var(--color-text-2)
}

.arco-progress-circle .arco-progress-circle-text {
    color: var(--color-text-3)
}

.arco-progress-circle-mask {
    stroke: var(--color-fill-2)
}

.arco-progress-circle-path {
    stroke: rgb(var(--primary-6))
}

.arco-progress-mini .arco-progress-circle-mask {
    stroke: rgb(var(--primary-3))
}

.arco-progress-mini .arco-progress-circle-path {
    stroke: rgb(var(--primary-6))
}

.arco-radio>input[type='radio']:focus-visible+.arco-radio-icon-hover::before,
.arco-radio-button>input[type='radio']:focus-visible+.arco-radio-icon-hover::before {
    background-color: var(--color-fill-2)
}

.arco-radio>input[type='radio']:focus-visible+.arco-radio-button-inner,
.arco-radio-button>input[type='radio']:focus-visible+.arco-radio-button-inner {
    box-shadow: inset 0 0 0 2px rgb(var(--primary-6))
}

.arco-radio-text {
    color: var(--color-text-2)
}

.arco-radio-mask {
    border: 1px solid var(--color-border-1)
}

.arco-radio:hover .arco-radio-mask {
    border-color: rgb(var(--primary-6))
}

.arco-radio-checked .arco-radio-mask {
    background-color: rgb(var(--primary-6));
    border-color: rgb(var(--primary-6))
}

.arco-radio-checked .arco-radio-mask::after {
    background-color: var(--color-white)
}

.arco-radio-checked:hover .arco-radio-mask {
    border-color: rgb(var(--primary-6))
}

.arco-radio-disabled .arco-radio-text {
    color: var(--color-text-6)
}

.arco-radio-disabled .arco-radio-mask {
    border-color: var(--color-border-1)
}

.arco-radio-disabled .arco-radio-mask::after {
    background-color: var(--color-fill-2)
}

.arco-radio-disabled:hover .arco-radio-mask {
    border-color: var(--color-border-1)
}

.arco-radio-checked.arco-radio-disabled .arco-radio-mask,
.arco-radio-checked.arco-radio-disabled:hover .arco-radio-mask {
    background-color: var(--color-fill-2)
}

.arco-radio-checked.arco-radio-disabled .arco-radio-mask::after {
    background-color: var(--color-text-6)
}

.arco-radio-checked.arco-radio-disabled .arco-radio-text {
    color: var(--color-text-4)
}

.arco-radio-button {
    color: var(--color-text-2)
}

.arco-radio-button:not(:first-of-type)::before {
    background-color: transparent;
}

.arco-radio-button::after {
    background-color: rgb(var(--primary-2));
}

.arco-radio-button:hover {
    background-color: rgb(var(--primary-2));
    color: rgb(var(--primary-6))
}

.arco-radio-button.arco-radio-checked {
    background-color: rgb(var(--primary-6));
    color: var(--color-white);
}

.arco-radio-button.arco-radio-disabled {
    background-color: var(--color-fill-2);
    color: var(--color-text-6)
}

.arco-radio-button.arco-radio-disabled.arco-radio-checked {
    background-color: var(--color-bg-2);
    color: var(--color-text-3)
}

body[arco-theme='dark'] .arco-radio-button.arco-radio-checked{
    background-color: rgb(var(--primary-2));
}

body[arco-theme='dark'] .arco-radio-group .arco-radio-button.arco-radio-checked:hover {
    background-color: rgb(var(--primary-2));
}
body[arco-theme='dark'] .arco-radio-group .arco-radio-button.arco-radio-disabled.arco-radio-checked:hover {
    background-color: var(--color-fill-1);
}

body[arco-theme='dark'] .arco-radio-button:not(.arco-radio-disabled):hover {
    background-color: rgb(var(--primary-2));
}

body[arco-theme='dark'] .arco-radio-button::after {
    background-color: rgb(var(--primary-2));
}

.arco-rate-character {
    color: var(--color-fill-3)
}

.arco-rate-character-full .arco-rate-character-right {
    color: rgb(var(--primary-6))
}

.arco-rate-character-half .arco-rate-character-left {
    color: rgb(var(--primary-6))
}

.arco-resizebox-trigger-icon-wrapper {
    background-color: var(--color-fill-3)
}

.arco-resizebox-trigger-icon {
    color: var(--color-text-1)
}

.arco-result-icon-success {
    color: var(--color-white)
}

.arco-result-icon-error {
    color: var(--color-white)
}

.arco-result-icon-info {
    color: var(--color-white);
    background-color: rgb(var(--primary-6))
}

.arco-result-icon-warning {
    color: var(--color-bg-white)
}

.arco-result-title {
    color: var(--color-text-2)
}

.arco-result-subtitle {
    color: var(--color-text-5)
}

.arco-select .arco-select-view {
    color: var(--color-text-1);
    background-color: var(--color-fill-4);
    border: 1px solid var(--color-border-1)
}

.arco-select:hover .arco-select-view {
    background-color: var(--color-fill-4);
    border-color: rgb(var(--primary-6))
}

.arco-select.arco-select-focused .arco-select-view {
    color: var(--color-text-1);
    background-color: var(--color-fill-4);
    border-color: var(--color-border-1);
    box-shadow: 0 0 0 0 rgb(var(--primary-2))
}

.arco-select .arco-select-suffix-icon,
.arco-select .arco-select-loading-icon,
.arco-select .arco-select-search-icon,
.arco-select .arco-select-clear-icon,
.arco-select .arco-select-arrow-icon,
.arco-select .arco-select-expand-icon {
    color: var(--color-text-3)
}

.arco-select-error.arco-select-focused .arco-select-view {
    color: var(--color-text-1)
}

.arco-select-warning .arco-select-view {
    background-color: var(--color-warning-light-1)
}

.arco-select-warning:hover .arco-select-view {
    background-color: var(--color-warning-light-2)
}

.arco-select-warning.arco-select-focused .arco-select-view {
    color: var(--color-text-1);
    background-color: var(--color-bg-white);
    box-shadow: 0 0 0 0 var(--color-warning-light-2)
}

.arco-select-disabled .arco-select-view {
    color: var(--color-text-6);
    background-color: var(--color-fill-2);
    border: 1px solid var(--color-border-1)
}

.arco-select-disabled:hover .arco-select-view {
    background-color: var(--color-fill-2);
    border-color: var(--color-border-1)
}

.arco-select-disabled .arco-select-suffix-icon,
.arco-select-disabled .arco-select-loading-icon,
.arco-select-disabled .arco-select-search-icon,
.arco-select-disabled .arco-select-clear-icon,
.arco-select-disabled .arco-select-arrow-icon,
.arco-select-disabled .arco-select-expand-icon {
    color: var(--color-text-6)
}

.arco-select-view input::placeholder {
    color: var(--color-text-5)
}

.arco-select-disabled .arco-select-view input::placeholder {
    color: var(--color-text-6)
}

.arco-select-prefix {
    color: var(--color-text-3)
}

.arco-select-addbefore {
    color: var(--color-text-2);
    background-color: transparent;
}

.arco-select-addbefore {
    border-right: 1px solid var(--color-border-2)
}

.arco-select-popup {
    background-color: var(--color-fill-5)
}

.arco-select-popup .arco-select-option {
    color: var(--color-text-1);
    background-color: var(--color-fill-5)
}

.arco-select-popup .arco-select-option-selected {
    color: var(--color-text-2);
    background-color: rgb(var(--primary-2))
}

.arco-select-popup .arco-select-option-hover {
    color: var(--color-text-2);
    background-color: rgb(var(--primary-2))
}

.arco-select-popup .arco-select-option-disabled {
    color: var(--color-text-6);
    background-color: var(--color-fill-2);
}

.arco-select-group-title {
    color: var(--color-text-3)
}

.arco-select-highlight {
    color: var(--color-text-1)
}

.arco-select-wrapper-rtl .arco-select-addbefore {
    border-left: 1px solid var(--color-border-2)
}

.arco-skeleton-header .arco-skeleton-image {
    background-color: var(--color-fill-2)
}

.arco-skeleton-content .arco-skeleton-text-row {
    background-color: var(--color-fill-2)
}

.arco-skeleton-animate .arco-skeleton-image,
.arco-skeleton-animate .arco-skeleton-text>li {
    background: linear-gradient(90deg, var(--color-fill-2) 25%, var(--color-fill-2) 37%, var(--color-fill-2) 63%)
}

.arco-slider-road::before {
    background-color: var(--color-fill-1)
}

.arco-slider-road.arco-slider-road-disabled::before {
    background-color: var(--color-fill-2)
}

.arco-slider-road.arco-slider-road-disabled .arco-slider-bar {
    background-color: var(--color-fill-3)
}

.arco-slider-road.arco-slider-road-disabled .arco-slider-button::after {
    border-color: var(--color-fill-3)
}

.arco-slider-road.arco-slider-road-disabled .arco-slider-dots .arco-slider-dot {
    border-color: var(--color-fill-2)
}

.arco-slider-road.arco-slider-road-disabled .arco-slider-dots .arco-slider-dot-active {
    border-color: var(--color-fill-3)
}

.arco-slider-road.arco-slider-road-disabled .arco-slider-ticks .arco-slider-tick {
    background: var(--color-fill-2)
}

.arco-slider-road.arco-slider-road-disabled .arco-slider-ticks .arco-slider-tick-active {
    background: var(--color-fill-3)
}

.arco-slider-bar {
    background-color: rgb(var(--primary-6))
}

.arco-slider-button::after {
    background: var(--color-white);
    border: 2px solid rgb(var(--primary-6))
}

.arco-slider-button:focus-visible::after {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-slider-marks-text {
    color: var(--color-text-3)
}

.arco-slider-dots .arco-slider-dot-wrapper .arco-slider-dot {
    background-color: var(--color-bg-2);
    border: 2px solid var(--color-fill-1)
}

.arco-slider-dots .arco-slider-dot-wrapper .arco-slider-dot-active {
    border-color: rgb(var(--primary-6))
}

.arco-slider-ticks .arco-slider-tick {
    background: var(--color-fill-1)
}

.arco-slider-ticks .arco-slider-tick-active {
    background: rgb(var(--primary-6))
}

.arco-spin-icon {
    color: rgb(var(--primary-6))
}

.arco-spin-tip {
    color: rgb(var(--primary-6))
}

.arco-spin-dot {
    background-color: rgb(var(--primary-6))
}

.arco-spin-dot:nth-child(2) {
    background-color: rgb(var(--primary-5))
}

.arco-spin-dot:nth-child(3) {
    background-color: rgb(var(--primary-4))
}

.arco-spin-dot:nth-child(4) {
    background-color: rgb(var(--primary-4))
}

.arco-spin-dot:nth-child(5) {
    background-color: rgb(var(--primary-2))
}

.arco-statistic {
    color: var(--color-text-2)
}

.arco-statistic-title {
    color: var(--color-text-4)
}

.arco-statistic-content .arco-statistic-value {
    color: var(--color-text-1)
}

.arco-statistic-extra {
    color: var(--color-text-4)
}

.arco-steps-item-wait .arco-steps-icon {
    color: var(--color-text-6);
    background-color: var(--color-fill-2)
}

.arco-steps-item-process .arco-steps-icon {
    color: var(--color-white);
    background-color: rgb(var(--primary-6))
}

.arco-steps-item-finish .arco-steps-icon {
    border: 1px solid rgb(var(--primary-6));
    color: rgb(var(--primary-6))
}

.arco-steps-item-error .arco-steps-icon {
    color: var(--color-white)
}

.arco-steps-item-title {
    color: var(--color-text-6)
}

.arco-steps-item-wait .arco-steps-item-title {
    color: var(--color-text-5)
}

.arco-steps-item-process .arco-steps-item-title {
    color: rgb(var(--primary-6))
}

.arco-steps-item-finish .arco-steps-item-title {
    color: var(--color-text-2)
}

.arco-steps-item-error .arco-steps-item-title {
    color: var(--color-text-1)
}

.arco-steps-item-description {
    color: var(--color-text-6)
}

.arco-steps-item-wait .arco-steps-item-description {
    color: var(--color-text-5)
}

.arco-steps-item-process .arco-steps-item-description {
    color: rgb(var(--primary-6))
}

.arco-steps-item-finish .arco-steps-item-description {
    color: var(--color-text-5)
}

.arco-steps-item-error .arco-steps-item-description {
    color: var(--color-text-3)
}

.arco-steps-label-horizontal:not(.arco-steps-vertical)>.arco-steps-item:not(:last-child) .arco-steps-item-title::after {
    background-color: var(--color-border-1)
}

.arco-steps-label-horizontal>.arco-steps-item.arco-steps-item-process .arco-steps-item-title::after {
    background-color: var(--color-border-1)
}

.arco-steps-label-horizontal>.arco-steps-item.arco-steps-item-finish .arco-steps-item-title::after {
    background-color: rgb(var(--primary-6))
}

.arco-steps.arco-steps-vertical>.arco-steps-item:not(:last-child)>.arco-steps-item-tail::after {
    background-color: var(--color-border-1)
}

.arco-steps>.arco-steps-item:not(:last-child)>.arco-steps-item-tail::after {
    background-color: var(--color-border-1)
}

.arco-steps-item:not(:last-child).arco-steps-item-finish .arco-steps-item-tail::after {
    background-color: rgb(var(--primary-6))
}

.arco-steps-mode-dot .arco-steps-item-wait .arco-steps-item-icon {
    border-color: var(--color-fill-3);
    background-color: var(--color-text-6)
}

.arco-steps-mode-dot .arco-steps-item-process .arco-steps-item-icon {
    border-color: rgb(var(--primary-6));
    background-color: rgb(var(--primary-6))
}

.arco-steps-mode-dot .arco-steps-item-finish .arco-steps-item-icon {
    border-color: rgb(var(--primary-6));
    background-color: rgb(var(--primary-6))
}

.arco-steps-mode-dot .arco-steps-item-wait .arco-steps-item-title {
    color: var(--color-text-2)
}

.arco-steps-mode-dot .arco-steps-item-process .arco-steps-item-title {
    color: var(--color-text-1)
}

.arco-steps-mode-dot .arco-steps-item-finish .arco-steps-item-title {
    color: var(--color-text-1)
}

.arco-steps-mode-dot .arco-steps-item-error .arco-steps-item-title {
    color: var(--color-text-2)
}

.arco-steps-mode-dot .arco-steps-item-wait .arco-steps-item-description {
    color: var(--color-text-3)
}

.arco-steps-mode-dot .arco-steps-item-process .arco-steps-item-description {
    color: var(--color-text-3)
}

.arco-steps-mode-dot .arco-steps-item-finish .arco-steps-item-description {
    color: var(--color-text-2)
}

.arco-steps-mode-dot .arco-steps-item-error .arco-steps-item-description {
    color: var(--color-text-3)
}

.arco-steps-mode-dot>.arco-steps-item:not(:last-child)>.arco-steps-item-tail {
    background-color: var(--color-border-1)
}

.arco-steps-mode-dot .arco-steps-item:not(:last-child).arco-steps-item-process .arco-steps-item-tail {
    background-color: var(--color-border-1)
}

.arco-steps-mode-dot .arco-steps-item:not(:last-child).arco-steps-item-finish .arco-steps-item-tail {
    background-color: rgb(var(--primary-6))
}

.arco-steps-mode-dot.arco-steps-vertical>.arco-steps-item:not(:last-child)>.arco-steps-item-tail::after {
    background-color: var(--color-border-1)
}

.arco-steps-mode-dot.arco-steps-vertical>.arco-steps-item:not(:last-child).arco-steps-item-process>.arco-steps-item-tail::after {
    background-color: var(--color-border-1)
}

.arco-steps-mode-dot.arco-steps-vertical>.arco-steps-item:not(:last-child).arco-steps-item-finish>.arco-steps-item-tail::after {
    background-color: rgb(var(--primary-6))
}

.arco-steps-mode-arrow .arco-steps-item-wait {
    background-color: var(--color-fill-1)
}

.arco-steps-mode-arrow .arco-steps-item-process {
    background-color: rgb(var(--primary-6))
}

.arco-steps-mode-arrow .arco-steps-item-finish {
    background-color: var(--color-primary-light-1)
}

.arco-steps-mode-arrow .arco-steps-item-wait .arco-steps-item-title {
    color: var(--color-text-2)
}

.arco-steps-mode-arrow .arco-steps-item-process .arco-steps-item-title {
    color: var(--color-white)
}

.arco-steps-mode-arrow .arco-steps-item-finish .arco-steps-item-title {
    color: var(--color-text-2)
}

.arco-steps-mode-arrow .arco-steps-item-error .arco-steps-item-title {
    color: var(--color-white)
}

.arco-steps-mode-arrow .arco-steps-item-wait .arco-steps-item-description {
    color: var(--color-text-3)
}

.arco-steps-mode-arrow .arco-steps-item-process .arco-steps-item-description {
    color: var(--color-white)
}

.arco-steps-mode-arrow .arco-steps-item-finish .arco-steps-item-description {
    color: var(--color-text-3)
}

.arco-steps-mode-arrow .arco-steps-item-error .arco-steps-item-description {
    color: var(--color-white)
}

.arco-steps-mode-arrow .arco-steps-item:not(:first-child)::before {
    border-left: 36px solid var(--color-bg-2)
}

.arco-steps-mode-arrow .arco-steps-item:not(:last-child).arco-steps-item-wait::after {
    border-left: 36px solid var(--color-fill-1)
}

.arco-steps-mode-arrow .arco-steps-item:not(:last-child).arco-steps-item-process::after {
    border-left: 36px solid rgb(var(--primary-6))
}

.arco-steps-mode-arrow .arco-steps-item:not(:last-child).arco-steps-item-finish::after {
    border-left: 36px solid var(--color-primary-light-1)
}

.arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:first-child)::before {
    border-left: 18px solid var(--color-bg-2)
}

.arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:last-child)::after {
    border-left: 18px solid var(--color-fill-1)
}

.arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:last-child).arco-steps-item-wait::after {
    border-left: 18px solid var(--color-fill-1)
}

.arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:last-child).arco-steps-item-process::after {
    border-left: 18px solid rgb(var(--primary-6))
}

.arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:last-child).arco-steps-item-finish::after {
    border-left: 18px solid var(--color-primary-light-1)
}

.arco-steps-rtl.arco-steps-mode-arrow .arco-steps-item:not(:first-child)::before {
    border-right: 36px solid var(--color-bg-2)
}

.arco-steps-rtl.arco-steps-mode-arrow .arco-steps-item:not(:last-child).arco-steps-item-wait::after {
    border-right: 36px solid var(--color-fill-1)
}

.arco-steps-rtl.arco-steps-mode-arrow .arco-steps-item:not(:last-child).arco-steps-item-process::after {
    border-right: 36px solid rgb(var(--primary-6))
}

.arco-steps-rtl.arco-steps-mode-arrow .arco-steps-item:not(:last-child).arco-steps-item-finish::after {
    border-right: 36px solid var(--color-primary-light-1)
}

.arco-steps-rtl.arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:first-child)::before {
    border-right: 18px solid var(--color-bg-2)
}

.arco-steps-rtl.arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:last-child)::after {
    border-right: 18px solid var(--color-fill-1)
}

.arco-steps-rtl.arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:last-child).arco-steps-item-wait::after {
    border-right: 18px solid var(--color-fill-1)
}

.arco-steps-rtl.arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:last-child).arco-steps-item-process::after {
    border-right: 18px solid rgb(var(--primary-6))
}

.arco-steps-rtl.arco-steps-mode-arrow.arco-steps-size-small .arco-steps-item:not(:last-child).arco-steps-item-finish::after {
    border-right: 18px solid var(--color-primary-light-1)
}

.arco-steps-mode-navigation .arco-steps-item-active::after {
    background-color: rgb(var(--primary-6))
}

.arco-steps-mode-navigation .arco-steps-item:not(:last-child) .arco-steps-item-content::after {
    border: 2px solid var(--color-text-3);
    background-color: var(--color-bg-2)
}

.arco-steps-rtl.arco-steps-mode-navigation .arco-steps-item:not(:last-child) .arco-steps-item-content::after {
    border: 2px solid var(--color-text-3)
}

.arco-steps-change-onclick .arco-steps-item:not(.arco-steps-item-active):not(.arco-steps-item-disabled):hover .arco-steps-item-content .arco-steps-item-title,
.arco-steps-change-onclick .arco-steps-item:not(.arco-steps-item-active):not(.arco-steps-item-disabled):hover .arco-steps-item-content .arco-steps-item-description {
    color: rgb(var(--primary-6))
}

.arco-switch {
    background-color: var(--color-fill-1)
}

.arco-switch-type-round.arco-switch-checked:focus-visible,
.arco-switch-type-circle.arco-switch-checked:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-switch-type-line.arco-switch-checked:focus-visible .arco-switch-dot {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-switch-dot {
    background: var(--color-white);
    color: var(--color-fill-2)
}

.arco-switch-checked {
    background-color: rgb(var(--primary-6))
}

.arco-switch-checked .arco-switch-dot {
    color: var(--color-fill-5);
}

.arco-switch[disabled] .arco-switch-dot {
    color: var(--color-fill-2)
}

.arco-switch[disabled].arco-switch-checked .arco-switch-dot {
    color: rgb(var(--primary-3))
}

.arco-switch[disabled] .arco-switch-dot {
    color: var(--color-fill-2)
}

.arco-switch[disabled].arco-switch-checked .arco-switch-dot {
    color: rgb(var(--primary-3))
}

.arco-switch-text {
    color: var(--color-white);
}

.arco-switch-checked .arco-switch-text {
    color: var(--color-bg-white)
}

.arco-switch[disabled] {
    background-color: var(--color-fill-2)
}

.arco-switch[disabled] .arco-switch-text {
    color: var(--color-white);
}

.arco-switch[disabled].arco-switch-checked {
    background-color: var(--color-primary-light-3)
}

.arco-switch[disabled].arco-switch-checked .arco-switch-text {
    color: var(--color-white)
}

.arco-switch-loading {
    background-color: var(--color-fill-1)
}

.arco-switch-loading .arco-switch-dot {
    color: var(--color-text-6)
}

.arco-switch-loading .arco-switch-text {
    color: var(--color-white)
}

.arco-switch-loading.arco-switch-checked {
    background-color: rgb(var(--primary-3))
}

.arco-switch-loading.arco-switch-checked .arco-switch-dot {
    color: rgb(var(--primary-3))
}

.arco-switch-loading.arco-switch-checked .arco-switch-text {
    color: var(--color-white)
}

.arco-switch-type-line::after {
    background-color: var(--color-fill-1)
}

.arco-switch-type-line .arco-switch-dot {
    background-color: var(--color-bg-white);
    box-shadow: 0 1px 3px var(--color-neutral-4)
}

.arco-switch-type-line.arco-switch-checked::after {
    background-color: rgb(var(--primary-6))
}

.arco-switch-type-line[disabled]::after {
    background-color: var(--color-fill-2)
}

.arco-switch-type-line[disabled].arco-switch-checked::after {
    background-color: var(--color-primary-light-3)
}

.arco-switch-type-line.arco-switch-loading::after {
    background-color: var(--color-fill-1)
}

.arco-switch-type-line.arco-switch-loading.arco-switch-checked::after {
    background-color: rgb(var(--primary-3))
}

.arco-table-filters-popup {
    background: var(--color-fill-5)
}

.arco-table-filters-btn {
    border-top: 1px solid var(--color-border-2)
}

thead>.arco-table-tr>.arco-table-th {
    border-bottom: 1px solid var(--color-border-2)
}

.arco-table-th {
    color: var(--color-text-2);
    background-color: var(--color-bg-1)
}

.arco-table-td {
    color: var(--color-text-2);
    background-color: var(--color-bg-1);
    border-bottom: 1px solid var(--color-border-2)
}

.arco-table-editable-row .arco-table-cell-wrap-value {
    border: 1px solid var(--color-white)
}

.arco-table-editable-row:hover .arco-table-cell-wrap-value {
    border: 1px solid var(--color-border-2)
}

.arco-table-expand-icon-cell button {
    background-color: var(--color-fill-1);
    color: var(--color-text-3);
    border: 1px solid var(--color-border-1)
}

.arco-table-expand-icon-cell button:hover {
    background-color: var(--color-fill-1);
    color: var(--color-text-3);
    border-color: var(--color-text-5)
}

.arco-table-cell-expand-icon button {
    background-color: var(--color-fill-1);
    color: var(--color-text-3);
    border: 1px solid var(--color-border-1)
}

.arco-table-cell-expand-icon button:hover {
    background-color: var(--color-fill-1);
    color: var(--color-text-3);
    border-color: var(--color-text-5)
}

.arco-table-expand-content .arco-table-td {
    background-color: var(--color-bg-3)
}

.arco-table-expand-content .arco-table-td .arco-table .arco-table-th {
    border-bottom: 1px solid var(--color-border-2)
}

.arco-table-expand-content .arco-table-td .arco-table .arco-table-th,
.arco-table-expand-content .arco-table-td .arco-table .arco-table-td {
    background-color: transparent;
}

.arco-table-cell-next-ascend .arco-table-sorter-icon .arco-icon-caret-up {
    color: var(--color-neutral-6)
}

.arco-table-cell-next-descend .arco-table-sorter-icon .arco-icon-caret-down {
    color: var(--color-neutral-6)
}

.arco-table-sorter-icon .arco-icon-caret-up,
.arco-table-sorter-icon .arco-icon-caret-down {
    color: var(--color-text-3)
}

.arco-table-sorter-icon.arco-table-sorter-icon-active svg {
    color: rgb(var(--primary-6))
}

.arco-table-filters svg {
    color: var(--color-text-3)
}

.arco-table-filters-active svg {
    color: rgb(var(--primary-6))
}

.arco-table-header {
    background-color: var(--color-bg-1)
}

.arco-table-body {
    background-color: var(--color-bg-2)
}

.arco-table-border .arco-table-container {
    border-right: 1px solid var(--color-border-2);
    border-top: 1px solid var(--color-border-2)
}

.arco-table-border .arco-table-container::before {
    background-color: var(--color-border-2)
}

.arco-table-border .arco-table-th:first-child,
.arco-table-border .arco-table-td:first-child {
    border-left: 1px solid var(--color-border-2)
}

.arco-table-border .arco-table-expand-fixed-row {
    border-left: 1px solid var(--color-border-2)
}

.arco-table-border .arco-table-footer {
    border: 1px solid var(--color-border-2)
}

.arco-table-border-cell .arco-table-th,
.arco-table-border-cell .arco-table-td {
    border-left: 1px solid var(--color-border-2)
}

.arco-table-border-cell thead>.arco-table-tr:not(:last-child)>.arco-table-th[colspan] {
    border-bottom: 1px solid var(--color-border-2)
}

.arco-table-border-header-cell .arco-table-th {
    border-left: 1px solid var(--color-border-2)
}

.arco-table-border-header-cell thead>.arco-table-tr:not(:last-child)>.arco-table-th[colspan] {
    border-bottom: 1px solid var(--color-border-2)
}

.arco-table-border-body-cell .arco-table-td {
    border-left: 1px solid var(--color-border-2)
}

.arco-table-stripe .arco-table-tr:nth-child(even) .arco-table-td {
    background-color: var(--color-bg-3);
}

.arco-table-hover .arco-table-tr:not(.arco-table-empty-row):hover .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right) {
    background-color: rgb(var(--primary-1));
}

.arco-table-hover .arco-table-tr:not(.arco-table-empty-row):hover .arco-table-td.arco-table-col-fixed-left::before,
.arco-table-hover .arco-table-tr:not(.arco-table-empty-row):hover .arco-table-td.arco-table-col-fixed-right::before {
    background-color: rgb(var(--primary-1))
}

.arco-table-hover .arco-table-expand-content:not(.arco-table-empty-row):hover .arco-table-td:not(.arco-table-col-fixed-left):not(.arco-table-col-fixed-right) {
    background-color: var(--color-fill-1)
}

.arco-table-type-radio .arco-table-row-checked.arco-table-tr .arco-table-td {
    background-color: rgb(var(--primary-1))
}

div.arco-table-tfoot {
    background-color: var(--color-neutral-2);
    box-shadow: 0 -1px 0 var(--color-border-2)
}

.arco-table-tfoot .arco-table-td {
    background-color: var(--color-neutral-2)
}

.arco-table-rtl.arco-table-border .arco-table-th:first-child,
.arco-table-rtl.arco-table-border .arco-table-td:first-child {
    border-right: 1px solid var(--color-border-2)
}

.arco-table-rtl.arco-table-border-cell .arco-table-th,
.arco-table-rtl.arco-table-border-cell .arco-table-td {
    border-left: 1px solid var(--color-border-2)
}

.arco-table-rtl.arco-table-border .arco-table-container {
    border-left: 1px solid var(--color-border-2)
}

.arco-table-rtl.arco-table-border-cell .arco-table-th,
.arco-table-rtl.arco-table-border-cell .arco-table-td {
    border-right: 1px solid var(--color-border-2)
}

.arco-table-rtl.arco-table-border-header-cell .arco-table-th {
    border-right: 1px solid var(--color-border-2)
}

.arco-table-rtl.arco-table-border-body-cell .arco-table-td {
    border-right: 1px solid var(--color-border-2)
}

body[arco-theme='dark'] .arco-table-stripe .arco-table-tr:nth-child(even) .arco-table-td {
    background-color: var(--color-bg-3)
}

.arco-tabs .arco-tabs-icon-hover {
    color: var(--color-text-2)
}

.arco-tabs-close-icon:focus-visible .arco-icon-hover::before {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-tabs-add-icon:focus-visible .arco-icon-hover::before {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-tabs .arco-tabs-nav-icon-disabled {
    color: var(--color-text-4)
}

.arco-tabs-header-nav::before {
    background-color: var(--color-border-2)
}

.arco-tabs-header-title {
    color: var(--color-text-2)
}

.arco-tabs-header-title:hover {
    color: rgb(var(--primary-5))
}

.arco-tabs-header-title-disabled,
.arco-tabs-header-title-disabled:hover {
    color: var(--color-text-6)
}

.arco-tabs-header-title-active,
.arco-tabs-header-title-active:hover {
    color: rgb(var(--primary-6))
}

.arco-tabs-header-title-active.arco-tabs-header-title-disabled,
.arco-tabs-header-title-active:hover.arco-tabs-header-title-disabled {
    color: rgb(var(--primary-3))
}

.arco-tabs-header-ink {
    background-color: rgb(var(--primary-6))
}

.arco-tabs-header-ink-disabled {
    background-color: rgb(var(--primary-3))
}

.arco-tabs-header-nav-line .arco-tabs-header-title:focus-visible .arco-tabs-header-title-text::before {
    box-shadow: inset 0 0 0 2px var(--color-primary-light-3)
}

.arco-tabs-header-nav-card .arco-tabs-header-title,
.arco-tabs-header-nav-card-gutter .arco-tabs-header-title {
    border: 1px solid var(--color-border-2)
}

.arco-tabs-header-nav-card .arco-tabs-header-title:focus-visible,
.arco-tabs-header-nav-card-gutter .arco-tabs-header-title:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-primary-light-3)
}

.arco-tabs-header-nav-card .arco-tabs-header-title-editable:not(.arco-tabs-header-title-active):hover .arco-icon-hover:hover::before,
.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-editable:not(.arco-tabs-header-title-active):hover .arco-icon-hover:hover::before {
    background-color: var(--color-fill-4)
}

.arco-tabs-header-nav-card .arco-tabs-add-icon,
.arco-tabs-header-nav-card-gutter .arco-tabs-add-icon {
    color: var(--color-text-2)
}

.arco-tabs-header-nav-card .arco-tabs-header-title:last-child {
    border-right: 1px solid var(--color-border-2)
}

.arco-tabs-header-nav-card .arco-tabs-header-title:hover {
    background-color: rgb(var(--primary-1))
}

.arco-tabs-header-nav-card .arco-tabs-header-title-disabled,
.arco-tabs-header-nav-card .arco-tabs-header-title-disabled:hover {
    background-color: var(--color-fill-2)
}

.arco-tabs-header-nav-card .arco-tabs-header-title-active,
.arco-tabs-header-nav-card .arco-tabs-header-title-active:hover {
    border-bottom-color: var(--color-bg-2);
    background-color: rgb(var(--primary-1))
}

.arco-tabs-header-nav-card.arco-tabs-header-nav-bottom .arco-tabs-header-title-active,
.arco-tabs-header-nav-card.arco-tabs-header-nav-bottom .arco-tabs-header-title-active:hover {
    border-top-color: var(--color-bg-2);
    border-bottom-color: var(--color-border-2)
}

.arco-tabs-header-nav-card-gutter .arco-tabs-header-title {
    border-right: 1px solid var(--color-border-2);
    background-color: var(--color-fill-1)
}

.arco-tabs-header-nav-card-gutter .arco-tabs-header-title:hover {
    background-color: rgb(var(--primary-1))
}

.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-disabled,
.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-disabled:hover {
    background-color: var(--color-fill-1)
}

.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-active,
.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-active:hover {
    border-bottom-color: var(--color-bg-2);
    background-color: rgb(var(--primary-1))
}

.arco-tabs-header-nav-card-gutter.arco-tabs-header-nav-bottom .arco-tabs-header-title-active,
.arco-tabs-header-nav-card-gutter.arco-tabs-header-nav-bottom .arco-tabs-header-title-active:hover {
    border-top-color: var(--color-bg-2);
    border-bottom-color: var(--color-border-2)
}

.arco-tabs-header-nav-text .arco-tabs-header-title:not(:first-of-type)::before {
    background-color: var(--color-fill-3)
}

.arco-tabs-header-nav-text .arco-tabs-header-title-text:hover {
    background-color: var(--color-fill-2)
}

.arco-tabs-header-nav-text .arco-tabs-header-title:focus-visible .arco-tabs-header-title-text {
    box-shadow: inset 0 0 0 2px var(--color-primary-light-3)
}

.arco-tabs-header-nav-text .arco-tabs-header-title-active .arco-tabs-header-title-text,
.arco-tabs-header-nav-text .arco-tabs-header-title-active .arco-tabs-header-title-text:hover {
    background-color: rgb(var(--primary-6))
}

.arco-tabs-header-nav-text .arco-tabs-header-title-active.arco-tabs-header-nav-text .arco-tabs-header-title-disabled .arco-tabs-header-title-text,
.arco-tabs-header-nav-text .arco-tabs-header-title-active.arco-tabs-header-nav-text .arco-tabs-header-title-disabled .arco-tabs-header-title-text:hover {
    background-color: var(--color-primary-light-3)
}

.arco-tabs-header-nav-rounded .arco-tabs-header-title:hover {
    background-color: rgb(var(--primary-1))
}

.arco-tabs-header-nav-rounded .arco-tabs-header-title:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-primary-light-3)
}

.arco-tabs-header-nav-rounded .arco-tabs-header-title-disabled:hover {
    background-color: var(--color-fill-2)
}

.arco-tabs-header-nav-rounded .arco-tabs-header-title-active,
.arco-tabs-header-nav-rounded .arco-tabs-header-title-active:hover {
    background-color: rgb(var(--primary-1))
}

.arco-tabs-header-nav-capsule .arco-tabs-header-title:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-primary-light-3)
}

.arco-tabs-header-nav-capsule .arco-tabs-header-title-active,
.arco-tabs-header-nav-capsule .arco-tabs-header-title-active:hover {
    background-color: rgb(var(--primary-6))
}

.arco-tabs-header-nav-capsule.arco-tabs-header-nav-horizontal .arco-tabs-header-title:not(:first-of-type)::before {
    background-color: var(--color-fill-3)
}

.arco-tabs-card>.arco-tabs-content,
.arco-tabs-card-gutter>.arco-tabs-content {
    border: 1px solid var(--color-border-2)
}

.arco-tabs-card.arco-tabs-bottom>.arco-tabs-content,
.arco-tabs-card-gutter.arco-tabs-bottom>.arco-tabs-content {
    border-top: 1px solid var(--color-border-2)
}

.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title {
    border: 1px solid var(--color-border-2)
}

.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title-active,
.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title-active:hover {
    border-right-color: var(--color-bg-2)
}

.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card .arco-tabs-header-title:last-child {
    border-bottom: 1px solid var(--color-border-2)
}

.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card.arco-tabs-header-nav-right .arco-tabs-header-title-active,
.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card.arco-tabs-header-nav-right .arco-tabs-header-title-active:hover {
    border-right-color: var(--color-border-2);
    border-left-color: var(--color-bg-2)
}

.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-active,
.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter .arco-tabs-header-title-active:hover {
    border-right-color: var(--color-bg-2);
    border-bottom-color: var(--color-border-2)
}

.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter.arco-tabs-header-nav-right .arco-tabs-header-title-active,
.arco-tabs-header-nav-vertical.arco-tabs-header-nav-card-gutter.arco-tabs-header-nav-right .arco-tabs-header-title-active:hover {
    border-right-color: var(--color-border-2);
    border-left-color: var(--color-bg-2)
}

.arco-tabs-card>.arco-tabs-content-vertical,
.arco-tabs-card-gutter>.arco-tabs-content-vertical {
    border: 1px solid var(--color-border-2)
}

.arco-tabs-card.arco-tabs-right>.arco-tabs-content-vertical,
.arco-tabs-card-gutter.arco-tabs-right>.arco-tabs-content-vertical {
    border-left: 1px solid var(--color-border-2)
}

.arco-tabs-rtl .arco-tabs-header-nav-card .arco-tabs-header-title {
    border-right: 1px solid var(--color-border-2)
}

.arco-tabs-rtl .arco-tabs-header-nav-card .arco-tabs-header-title:last-child {
    border-left: 1px solid var(--color-border-2)
}

body[arco-theme='dark'] .arco-tabs-header-nav-capsule .arco-tabs-header-title-active {
    background-color: var(--color-fill-3)
}

body[arco-theme='dark'] .arco-tabs-header-nav-capsule .arco-tabs-header-title:not(body[arco-theme='dark'] .arco-tabs-header-nav-capsule .arco-tabs-header-title-disabled):hover {
    background-color: var(--color-fill-3)
}

.arco-tag {
    color: var(--color-text-2)
}

.arco-tag .arco-icon-hover.arco-tag-icon-hover:hover::before {
    background-color: rgb(var(--primary-2))
}

.arco-tag-checkable:hover {
    background-color: rgb(var(--primary-2))
}

.arco-tag-checked {
    background-color: rgb(var(--primary-2))
}

.arco-tag-checkable.arco-tag-checked:hover {
    background-color: rgb(var(--primary-2))
}

.arco-tag-bordered,
.arco-tag-checkable.arco-tag-checked.arco-tag-bordered:hover {
    border-color: var(--color-border-2)
}

.arco-tag-icon {
    color: var(--color-text-3)
}

.arco-tag-custom-color {
    color: var(--color-white)
}

.arco-tag .arco-tag-close-btn:focus-visible::before {
    box-shadow: inset 0 0 0 2px var(--color-primary-light-3)
}

.arco-timeline-item {
    color: var(--color-text-2)
}

.arco-timeline-item-label {
    color: var(--color-text-4)
}

.arco-timeline-item-content {
    color: var(--color-text-2)
}

.arco-timeline-item-dot {
    color: rgb(var(--primary-6))
}

.arco-timeline-item-dot-solid {
    background-color: rgb(var(--primary-6))
}

.arco-timeline-item-dot-hollow {
    border: 2px solid rgb(var(--primary-6));
    background-color: var(--color-bg-2)
}

.arco-timeline-item-dot-custom {
    color: rgb(var(--primary-6));
    background-color: var(--color-bg-2)
}

.arco-timeline-item-dot-line {
    border-color: var(--color-border-2)
}

.arco-timepicker-container {
    background-color: var(--color-fill-5)
}

.arco-timepicker-list:not(:last-child) {
    border-right: 1px solid var(--color-border-2)
}

.arco-timepicker-cell {
    color: var(--color-text-2)
}

.arco-timepicker-cell:not(.arco-timepicker-cell-selected):not(.arco-timepicker-cell-disabled):hover .arco-timepicker-cell-inner {
    background-color: rgb(var(--primary-2))
}

.arco-timepicker-cell-selected .arco-timepicker-cell-inner {
    background-color: rgb(var(--primary-2))
}

.arco-timepicker-cell-disabled {
    color: var(--color-text-6)
}

.arco-timepicker-footer-extra-wrapper {
    border-top: 1px solid var(--color-border-2);
    color: var(--color-text-2)
}

.arco-timepicker-footer-btn-wrapper {
    border-top: 1px solid var(--color-border-2);
}

.arco-tooltip-content {
    background-color: var(--color-fill-5);
    color: var(--color-text-2);
    border-width: 0 !important;
    box-shadow: 0 4px 12px 2px rgba(0,0,0,0.1);
}

.arco-trigger-arrow.arco-tooltip-arrow {
    background-color: var(--color-fill-5);
    border-width: 0 !important;
}

body[arco-theme='dark'] .arco-tooltip-content {
    border: 1px solid var(--color-neutral-3)
}

body[arco-theme='dark'] .arco-trigger[trigger-placement='top'] .arco-trigger-arrow.arco-tooltip-arrow,
body[arco-theme='dark'] .arco-trigger[trigger-placement='tl'] .arco-trigger-arrow.arco-tooltip-arrow,
body[arco-theme='dark'] .arco-trigger[trigger-placement='tr'] .arco-trigger-arrow.arco-tooltip-arrow {
    border-bottom: 1px solid var(--color-neutral-3);
    border-right: 1px solid var(--color-neutral-3)
}

body[arco-theme='dark'] .arco-trigger[trigger-placement='bottom'] .arco-trigger-arrow.arco-tooltip-arrow,
body[arco-theme='dark'] .arco-trigger[trigger-placement='bl'] .arco-trigger-arrow.arco-tooltip-arrow,
body[arco-theme='dark'] .arco-trigger[trigger-placement='br'] .arco-trigger-arrow.arco-tooltip-arrow {
    border-top: 1px solid var(--color-neutral-3);
    border-left: 1px solid var(--color-neutral-3)
}

body[arco-theme='dark'] .arco-trigger[trigger-placement='left'] .arco-trigger-arrow.arco-tooltip-arrow,
body[arco-theme='dark'] .arco-trigger[trigger-placement='lt'] .arco-trigger-arrow.arco-tooltip-arrow,
body[arco-theme='dark'] .arco-trigger[trigger-placement='lb'] .arco-trigger-arrow.arco-tooltip-arrow {
    border-top: 1px solid var(--color-neutral-3);
    border-right: 1px solid var(--color-neutral-3)
}

body[arco-theme='dark'] .arco-trigger[trigger-placement='right'] .arco-trigger-arrow.arco-tooltip-arrow,
body[arco-theme='dark'] .arco-trigger[trigger-placement='rt'] .arco-trigger-arrow.arco-tooltip-arrow,
body[arco-theme='dark'] .arco-trigger[trigger-placement='rb'] .arco-trigger-arrow.arco-tooltip-arrow {
    border-left: 1px solid var(--color-neutral-3);
    border-bottom: 1px solid var(--color-neutral-3)
}

.arco-transfer-view {
    border: 1px solid var(--color-border-2)
}

.arco-transfer-view-header {
    background-color: var(--color-fill-3);
    color: var(--color-text-1)
}

.arco-transfer-view-header-unit {
    color: var(--color-text-3)
}

.arco-transfer-view-item {
    color: var(--color-text-1)
}

.arco-transfer-view-item-disabled {
    color: var(--color-text-4)
}

.arco-transfer-view-item:not(.arco-transfer-view-item-disabled):hover {
    color: var(--color-text-1);
    background-color: rgb(var(--primary-2))
}

.arco-transfer-view-item-gap-bottom::before {
    background-color: rgb(var(--primary-6))
}

.arco-transfer-view-item-gap-top::before {
    background-color: rgb(var(--primary-6))
}

.arco-transfer-view-item-dragging {
    background-color: var(--color-fill-1) !important;
    color: var(--color-text-4) !important
}

.arco-transfer-view .arco-transfer-view-icon-clear,
.arco-transfer-view .arco-transfer-view-item-icon-remove {
    color: var(--color-text-2)
}

.arco-transfer-view .arco-transfer-view-icon-clear:hover::before,
.arco-transfer-view .arco-transfer-view-item-icon-remove:hover::before {
    background-color: var(--color-fill-3)
}

.arco-transfer-view .arco-transfer-view-icon-clear:focus-visible::before,
.arco-transfer-view .arco-transfer-view-item-icon-remove:focus-visible::before {
    box-shadow: 0 0 0 2px rgb(var(--primary-6))
}

.arco-transfer-view .arco-checkbox .arco-icon-hover:hover::before {
    background-color: var(--color-fill-3)
}

.arco-transfer-disabled .arco-transfer-view-header {
    color: var(--color-text-4)
}

@keyframes arco-transfer-drag-item-blink {
    0% {
        background-color: var(--color-primary-light-1)
    }
}

.arco-transfer-rtl.arco-transfer-simple .arco-transfer-view-source {
    border-right: 1px solid var(--color-border-2)
}

.arco-tree-node-switcher {
    color: var(--color-text-3)
}

.arco-tree-node-drag-icon {
    color: rgb(var(--primary-6))
}

.arco-tree-node .arco-icon-loading {
    color: rgb(var(--primary-6))
}

.arco-tree-node-minus-icon::after,
.arco-tree-node-plus-icon::after {
    color: var(--color-text-3);
    background-color: var(--color-text-3)
}

.arco-tree-node-plus-icon::before {
    color: var(--color-text-3);
    background-color: var(--color-text-3)
}

.arco-tree {
    color: var(--color-text-2)
}

.arco-tree-node {
    color: var(--color-text-2)
}

.arco-tree-node.arco-tree-node-selected{
    background-color: rgb(var(--primary-2));
}

.arco-tree-node-selected .arco-tree-node-title,
.arco-tree-node-selected .arco-tree-node-title:hover {
    color: rgb(var(--primary-6))
}

.arco-tree-node-disabled-selectable .arco-tree-node-title,
.arco-tree-node-disabled .arco-tree-node-title,
.arco-tree-node-disabled-selectable .arco-tree-node-title:hover,
.arco-tree-node-disabled .arco-tree-node-title:hover {
    color: var(--color-text-6)
}

.arco-tree-node-disabled.arco-tree-node-selected .arco-tree-node-title {
    color: rgb(var(--primary-3))
}

.arco-tree-node-title:hover {
    color: rgb(var(--primary-6))
}

.arco-tree-node-title-gap-bottom::before {
    background-color: rgb(var(--primary-6))
}

.arco-tree-node-title-gap-top::before {
    background-color: rgb(var(--primary-6))
}

.arco-tree-node-title-highlight {
    background-color: rgb(var(--primary-1));
    color: var(--color-text-1)
}

.arco-tree-node-title-dragging,
.arco-tree-node-title-dragging:hover {
    background-color: var(--color-fill-1);
    color: var(--color-text-4)
}

.arco-tree-select .arco-tree-select-view {
    color: var(--color-text-1);
    background-color: var(--color-fill-4);
    border: 1px solid var(--color-border-1)
}

.arco-tree-select:hover .arco-tree-select-view {
    background-color: var(--color-fill-4);
    border-color: rgb(var(--primary-6))
}

.arco-tree-select.arco-tree-select-focused .arco-tree-select-view {
    color: var(--color-text-1);
    background-color: var(--color-fill-4);
    border-color: var(--color-border-1);
    box-shadow: 0 0 0 0 rgb(var(--primary-2))
}

.arco-tree-select .arco-tree-select-suffix-icon,
.arco-tree-select .arco-tree-select-loading-icon,
.arco-tree-select .arco-tree-select-search-icon,
.arco-tree-select .arco-tree-select-clear-icon,
.arco-tree-select .arco-tree-select-arrow-icon,
.arco-tree-select .arco-tree-select-expand-icon {
    color: var(--color-text-3)
}

.arco-tree-select-error.arco-tree-select-focused .arco-tree-select-view {
    color: var(--color-text-1)
}

.arco-tree-select-warning .arco-tree-select-view {
    background-color: var(--color-warning-light-1)
}

.arco-tree-select-warning:hover .arco-tree-select-view {
    background-color: var(--color-warning-light-2)
}

.arco-tree-select-warning.arco-tree-select-focused .arco-tree-select-view {
    color: var(--color-text-1);
    background-color: var(--color-bg-white);
    box-shadow: 0 0 0 0 var(--color-warning-light-2)
}

.arco-tree-select-disabled .arco-tree-select-view {
    color: var(--color-text-6);
    background-color: var(--color-fill-2);
    border: 1px solid var(--color-border-1)
}

.arco-tree-select-disabled:hover .arco-tree-select-view {
    background-color: var(--color-fill-2);
    border-color: var(--color-border-1)
}

.arco-tree-select-disabled .arco-tree-select-suffix-icon,
.arco-tree-select-disabled .arco-tree-select-loading-icon,
.arco-tree-select-disabled .arco-tree-select-search-icon,
.arco-tree-select-disabled .arco-tree-select-clear-icon,
.arco-tree-select-disabled .arco-tree-select-arrow-icon,
.arco-tree-select-disabled .arco-tree-select-expand-icon {
    color: var(--color-text-6)
}

.arco-tree-select-view input::placeholder {
    color: var(--color-text-5)
}

.arco-tree-select-disabled .arco-tree-select-view input::placeholder {
    color: var(--color-text-6)
}

.arco-tree-select-prefix {
    color: var(--color-text-3)
}

.arco-tree-select-addbefore {
    color: var(--color-text-2);
    background-color: var(--color-border-2)
}

.arco-tree-select-addbefore {
    border-right: 1px solid var(--color-border-2)
}

.arco-tree-select-popup {
    background-color: var(--color-fill-5);
}

.arco-tree-select-wrapper-rtl .arco-tree-select-addbefore {
    border-left: 1px solid var(--color-border-2)
}

.arco-trigger-arrow {
    background-color: var(--color-bg-5)
}

.arco-typography-primary {
    color: rgb(var(--primary-6))
}

.arco-typography-secondary {
    color: var(--color-text-2)
}

.arco-typography-disabled {
    color: var(--color-text-4)
}

.arco-typography code {
    color: var(--color-text-2);
    border: 1px solid var(--color-neutral-3);
    background-color: var(--color-neutral-2)
}

.arco-typography blockquote {
    border-left: 2px solid var(--color-neutral-6);
    background-color: var(--color-bg-2)
}

.arco-typography-operation-copy {
    color: var(--color-text-2)
}

.arco-typography-operation-copy:hover {
    color: var(--color-text-2);
    background-color: var(--color-fill-2)
}

.arco-typography-operation-copy:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-typography-operation-edit {
    color: var(--color-text-2)
}

.arco-typography-operation-edit:hover {
    color: var(--color-text-2);
    background-color: var(--color-fill-2)
}

.arco-typography-operation-edit:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-typography-operation-expand {
    color: rgb(var(--primary-6))
}

.arco-typography-operation-expand:hover {
    color: rgb(var(--primary-5))
}

.arco-typography-operation-expand:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-typography-rtl blockquote {
    border-right: 2px solid var(--color-neutral-6)
}

.arco-upload-disabled .arco-upload-trigger-picture,
.arco-upload-disabled .arco-upload-trigger-picture:hover {
    border-color: var(--color-border-2);
    background-color: var(--color-fill-2);
    color: var(--color-text-6)
}

.arco-upload-disabled .arco-upload-trigger-drag,
.arco-upload-disabled .arco-upload-trigger-drag:hover {
    border-color: var(--color-border-1);
    background-color: var(--color-fill-2)
}

.arco-upload-disabled .arco-upload-trigger-drag .arco-icon-plus,
.arco-upload-disabled .arco-upload-trigger-drag:hover .arco-icon-plus,
.arco-upload-disabled .arco-upload-trigger-drag .arco-upload-trigger-drag-text,
.arco-upload-disabled .arco-upload-trigger-drag:hover .arco-upload-trigger-drag-text {
    color: var(--color-text-6)
}

.arco-upload-disabled .arco-upload-trigger-tip {
    color: var(--color-text-6)
}

.arco-upload-trigger-tip {
    color: var(--color-text-4)
}

.arco-upload-trigger-picture {
    color: var(--color-text-2);
    border: 1px dashed var(--color-border-1)
}

.arco-upload-trigger-picture:hover {
    border-color: rgb(var(--primary-6));
    color: var(--color-text-2)
}

.arco-upload-trigger-picture:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-upload-trigger-drag {
    border: 1px dashed var(--color-border-1);
    color: var(--color-text-1)
}

.arco-upload-trigger-drag .arco-icon-plus {
    color: var(--color-text-2)
}

.arco-upload-trigger-drag:hover {
    border-color: rgb(var(--primary-6))
}

.arco-upload-trigger-drag:hover .arco-upload-trigger-drag-text {
    color: var(--color-text-1)
}

.arco-upload-trigger-drag:hover .arco-icon-plus {
    color: var(--color-text-2)
}

.arco-upload-trigger-drag:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-upload-trigger-drag-active {
    border-color: rgb(var(--primary-6));
    color: var(--color-text-1);
    background-color: rgb(var(--primary-1))
}

.arco-upload-trigger-drag-active .arco-upload-trigger-drag-text {
    color: var(--color-text-1)
}

.arco-upload-trigger-drag-active .arco-icon-plus {
    color: rgb(var(--primary-6))
}

.arco-upload-trigger-drag-text {
    color: var(--color-text-1)
}

.arco-upload-list-file-icon {
    color: var(--color-text-4);
}

.arco-upload-list-start-icon,
.arco-upload-list-cancel-icon {
    color: var(--color-bg-white)
}

.arco-upload-list-start-icon:focus-visible,
.arco-upload-list-cancel-icon:focus-visible {
    color: rgb(var(--primary-6))
}

.arco-upload-list-reupload-icon {
    color: rgb(var(--primary-6))
}

.arco-upload-list-reupload-icon:active,
.arco-upload-list-reupload-icon:hover {
    color: rgb(var(--primary-7))
}

.arco-upload-list-reupload-icon:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-primary-light-3)
}

.arco-upload-list-status:hover .arco-progress-circle-path {
    stroke: rgb(var(--primary-7))
}

.arco-upload-list-item-done .arco-upload-list-file-icon {
    color: var(--color-text-4);
}

.arco-upload-list-item-operation {
    color: var(--color-text-2)
}

.arco-upload-list-item-operation .arco-upload-list-remove-icon-hover:focus-visible::before {
    box-shadow: 0 0 0 2px rgb(var(--primary-6))
}

.arco-upload-list-item-text {
    background-color: var(--color-fill-3)
}

.arco-upload-list-item-text-name {
    color: var(--color-text-1)
}

.arco-upload-list-item-picture {
    background-color: var(--color-fill-2)
}

.arco-upload-list-item-picture-mask {
    color: var(--color-white)
}

.arco-upload-list-item-picture-operation .arco-upload-list-reupload-icon {
    color: var(--color-white)
}

.arco-upload-list-item-picture-operation .arco-upload-list-reupload-icon:focus-visible,
.arco-upload-list-item-picture-operation .arco-upload-list-preview-icon:focus-visible,
.arco-upload-list-item-picture-operation .arco-upload-list-remove-icon:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary-light-3)
}

.arco-upload-list-item-picture-error-tip .arco-upload-list-error-icon {
    color: var(--color-bg-white)
}

.arco-upload-list-type-picture-list .arco-upload-list-item-error .arco-upload-list-item-text {
    background-color: var(--color-danger-light-1)
}
