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

@mo-theme-tag: body; // css 变量定义的选择器

@arco-vars-prefix: ~''; // css 变量的前缀

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@color-transparent: transparent;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// variables
@color-border: rgb(var(~'@{mo-cssvars-prefix}-gray-3'));
@color-bg-popup: var(~'@{mo-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(~'@{mo-cssvars-prefix}-color-neutral-10'); // Title, body
@color-text-2: var(~'@{mo-cssvars-prefix}-color-neutral-8'); // Statement
@color-text-3: var(
  ~'@{mo-cssvars-prefix}-color-neutral-6'
); // Secondary information
@color-text-4: var(
  ~'@{mo-cssvars-prefix}-color-neutral-4'
); // Secondary information
@color-fill-1: var(~'@{mo-cssvars-prefix}-color-neutral-1');
@color-fill-2: var(~'@{mo-cssvars-prefix}-color-neutral-2');
@color-fill-3: var(~'@{mo-cssvars-prefix}-color-neutral-3');
@color-fill-4: var(~'@{mo-cssvars-prefix}-color-neutral-4');
@color-border-1: var(~'@{mo-cssvars-prefix}-color-neutral-2');
@color-border-2: var(~'@{mo-cssvars-prefix}-color-neutral-3');
@color-border-3: var(~'@{mo-cssvars-prefix}-color-neutral-4');
@color-border-4: var(~'@{mo-cssvars-prefix}-color-neutral-6');
@color-primary-light-1: rgb(var(~'@{mo-cssvars-prefix}-primary-1'));
@color-primary-light-2: rgb(var(~'@{mo-cssvars-prefix}-primary-2'));
@color-primary-light-3: rgb(var(~'@{mo-cssvars-prefix}-primary-3'));
@color-primary-light-4: rgb(var(~'@{mo-cssvars-prefix}-primary-4'));
@color-secondary: var(~'@{mo-cssvars-prefix}-color-neutral-2');
@color-secondary-hover: var(~'@{mo-cssvars-prefix}-color-neutral-3');
@color-secondary-active: var(~'@{mo-cssvars-prefix}-color-neutral-4');
@color-secondary-disabled: var(~'@{mo-cssvars-prefix}-color-neutral-1');
@color-danger-light-1: rgb(var(~'@{mo-cssvars-prefix}-danger-1'));
@color-danger-light-2: rgb(var(~'@{mo-cssvars-prefix}-danger-2'));
@color-danger-light-3: rgb(var(~'@{mo-cssvars-prefix}-danger-3'));
@color-danger-light-4: rgb(var(~'@{mo-cssvars-prefix}-danger-4'));
@color-success-light-1: rgb(var(~'@{mo-cssvars-prefix}-success-1'));
@color-success-light-2: rgb(var(~'@{mo-cssvars-prefix}-success-2'));
@color-success-light-3: rgb(var(~'@{mo-cssvars-prefix}-success-3'));
@color-success-light-4: rgb(var(~'@{mo-cssvars-prefix}-success-4'));
@color-warning-light-1: rgb(var(~'@{mo-cssvars-prefix}-warning-1'));
@color-warning-light-2: rgb(var(~'@{mo-cssvars-prefix}-warning-2'));
@color-warning-light-3: rgb(var(~'@{mo-cssvars-prefix}-warning-3'));
@color-warning-light-4: rgb(var(~'@{mo-cssvars-prefix}-warning-4'));
@color-link-light-1: rgb(var(~'@{mo-cssvars-prefix}-link-1'));
@color-link-light-2: rgb(var(~'@{mo-cssvars-prefix}-link-2'));
@color-link-light-3: rgb(var(~'@{mo-cssvars-prefix}-link-3'));
@color-link-light-4: rgb(var(~'@{mo-cssvars-prefix}-link-4'));
@diff-blob-addition-line-color: rgba(var(--blue-8), 0.8);
@diff-blob-addition-line-bg: rgba(var(--blue-1), 0.5);
@diff-blob-addition-border-color: rgba(var(--blue-8), 0.4);

@dark-color-border: #333335;
@dark-color-bg-1: #17171a; // The overall background is @dark-gray-1
@dark-color-bg-2: #232324; // Primary container background ("white")
@dark-color-bg-3: #2a2a2b; // Secondary container background
@dark-color-bg-4: #313132; // Three-level container background
@dark-color-bg-5: #373739; // Drop-down box, Tooltips background
@dark-color-bg-white: #f6f6f6; // In bright color mode radio, switch white background
@dark-color-text-1: fade(#fff, 90%);
@dark-color-text-2: fade(#fff, 70%);
@dark-color-text-3: fade(#fff, 50%);
@dark-color-text-4: fade(#fff, 30%);
@dark-color-fill-1: fade(#fff, 4%);
@dark-color-fill-2: fade(#fff, 8%);
@dark-color-fill-3: fade(#fff, 12%);
@dark-color-fill-4: fade(#fff, 16%);
@dark-color-primary-light-1: rgba(
  var(~'@{mo-cssvars-prefix}-primary-6'),
  0.2
);
@dark-color-primary-light-2: rgba(
  var(~'@{mo-cssvars-prefix}-primary-6'),
  0.35
);
@dark-color-primary-light-3: rgba(
  var(~'@{mo-cssvars-prefix}-primary-6'),
  0.5
);
@dark-color-primary-light-4: rgba(
  var(~'@{mo-cssvars-prefix}-primary-6'),
  0.65
);
@dark-color-secondary: rgba(var(~'@{mo-cssvars-prefix}-gray-9'), 0.08);
@dark-color-secondary-hover: rgba(var(~'@{mo-cssvars-prefix}-gray-8'), 0.16);
@dark-color-secondary-active: rgba(var(~'@{mo-cssvars-prefix}-gray-7'), 0.24);
@dark-color-secondary-disabled: rgba(
  var(~'@{mo-cssvars-prefix}-gray-9'),
  0.08
);
@dark-color-danger-light-1: rgba(var(~'@{mo-cssvars-prefix}-danger-6'), 0.2);
@dark-color-danger-light-2: rgba(var(~'@{mo-cssvars-prefix}-danger-6'), 0.35);
@dark-color-danger-light-3: rgba(var(~'@{mo-cssvars-prefix}-danger-6'), 0.5);
@dark-color-danger-light-4: rgba(var(~'@{mo-cssvars-prefix}-danger-6'), 0.65);
@dark-color-success-light-1: rgb(var(~'@{mo-cssvars-prefix}-success-6'), 0.2);
@dark-color-success-light-2: rgb(
  var(~'@{mo-cssvars-prefix}-success-6'),
  0.35
);
@dark-color-success-light-3: rgb(var(~'@{mo-cssvars-prefix}-success-6'), 0.5);
@dark-color-success-light-4: rgb(
  var(~'@{mo-cssvars-prefix}-success-6'),
  0.65
);
@dark-color-warning-light-1: rgb(var(~'@{mo-cssvars-prefix}-warning-6'), 0.2);
@dark-color-warning-light-2: rgb(
  var(~'@{mo-cssvars-prefix}-warning-6'),
  0.35
);
@dark-color-warning-light-3: rgb(var(~'@{mo-cssvars-prefix}-warning-6'), 0.5);
@dark-color-warning-light-4: rgb(
  var(~'@{mo-cssvars-prefix}-warning-6'),
  0.65
);
@dark-color-link-light-1: rgb(var(~'@{mo-cssvars-prefix}-link-6'), 0.2);
@dark-color-link-light-2: rgb(var(~'@{mo-cssvars-prefix}-link-6'), 0.35);
@dark-color-link-light-3: rgb(var(~'@{mo-cssvars-prefix}-link-6'), 0.5);
@dark-color-link-light-4: rgb(var(~'@{mo-cssvars-prefix}-link-6'), 0.65);
@dark-diff-blob-addition-line-color: rgb(var(--blue-6));
@dark-diff-blob-addition-line-bg: rgba(var(--blue-6), 0.2);
@dark-diff-blob-addition-border-color: rgba(var(--blue-5), 0.3);

// vue overwrite token
@size-medium: @size-default;

:root{
	--el-color-white:#fff;
	--el-color-black:#000;
	--el-color-primary-rgb:64,158,255;
	--el-color-success-rgb:103,194,58;
	--el-color-warning-rgb:230,162,60;
	--el-color-danger-rgb:245,108,108;
	--el-color-error-rgb:245,108,108;
	--el-color-info-rgb:144,147,153;
	--el-font-size-extra-large:20px;
	--el-font-size-large:18px;
	--el-font-size-medium:16px;
	--el-font-size-base:14px;
	--el-font-size-small:13px;
	--el-font-size-extra-small:12px;
	--el-font-family:'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',微软雅黑,Arial,sans-serif;
	--el-font-weight-primary:500;
	--el-font-line-height-primary:24px;
	--el-index-normal:1;
	--el-index-top:1000;
	--el-index-popper:2000;
	--el-border-radius-base:4px;
	--el-border-radius-small:2px;
	--el-border-radius-round:20px;
	--el-border-radius-circle:100%;
	--el-transition-duration:.3s;
	--el-transition-duration-fast:.2s;
	--el-transition-function-ease-in-out-bezier:cubic-bezier(0.645,0.045,0.355,1);
	--el-transition-function-fast-bezier:cubic-bezier(0.23,1,0.32,1);
	--el-transition-all:all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
	--el-transition-fade:opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
	--el-transition-md-fade:transform var(--el-transition-duration) var(--el-transition-function-fast-bezier),opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
	--el-transition-fade-linear:opacity var(--el-transition-duration-fast) linear;
	--el-transition-border:border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
	--el-transition-box-shadow:box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
	--el-transition-color:color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
	--el-component-size-large:40px;
	--el-component-size:32px;
	--el-component-size-small:24px;
}

:root {
	color-scheme:light;
	--el-color-white:#ffffff;
	--el-color-black:#000000;
	--el-color-primary:#409eff;
	--el-color-primary-light-3:#79bbff;
	--el-color-primary-light-5:#a0cfff;
	--el-color-primary-light-7:#c6e2ff;
	--el-color-primary-light-8:#d9ecff;
	--el-color-primary-light-9:#ecf5ff;
	--el-color-primary-dark-2:#337ecc;
	--el-color-success:#67c23a;
	--el-color-success-light-3:#95d475;
	--el-color-success-light-5:#b3e19d;
	--el-color-success-light-7:#d1edc4;
	--el-color-success-light-8:#e1f3d8;
	--el-color-success-light-9:#f0f9eb;
	--el-color-success-dark-2:#529b2e;
	--el-color-warning:#e6a23c;
	--el-color-warning-light-3:#eebe77;
	--el-color-warning-light-5:#f3d19e;
	--el-color-warning-light-7:#f8e3c5;
	--el-color-warning-light-8:#faecd8;
	--el-color-warning-light-9:#fdf6ec;
	--el-color-warning-dark-2:#b88230;
	--el-color-danger:#f56c6c;
	--el-color-danger-light-3:#f89898;
	--el-color-danger-light-5:#fab6b6;
	--el-color-danger-light-7:#fcd3d3;
	--el-color-danger-light-8:#fde2e2;
	--el-color-danger-light-9:#fef0f0;
	--el-color-danger-dark-2:#c45656;
	--el-color-error:#f56c6c;
	--el-color-error-light-3:#f89898;
	--el-color-error-light-5:#fab6b6;
	--el-color-error-light-7:#fcd3d3;
	--el-color-error-light-8:#fde2e2;
	--el-color-error-light-9:#fef0f0;
	--el-color-error-dark-2:#c45656;
	--el-color-info:#909399;
	--el-color-info-light-3:#b1b3b8;
	--el-color-info-light-5:#c8c9cc;
	--el-color-info-light-7:#dedfe0;
	--el-color-info-light-8:#e9e9eb;
	--el-color-info-light-9:#f4f4f5;
	--el-color-info-dark-2:#73767a;
	--el-bg-color:#ffffff;
	--el-bg-color-page:#f2f3f5;
	--el-bg-color-overlay:#ffffff;
	--el-text-color-primary:#303133;
	--el-text-color-regular:#606266;
	--el-text-color-secondary:#909399;
	--el-text-color-placeholder:#a8abb2;
	--el-text-color-disabled:#c0c4cc;
	--el-border-color:#dcdfe6;
	--el-border-color-light:#e4e7ed;
	--el-border-color-lighter:#ebeef5;
	--el-border-color-extra-light:#f2f6fc;
	--el-border-color-dark:#d4d7de;
	--el-border-color-darker:#cdd0d6;
	--el-fill-color:#f0f2f5;
	--el-fill-color-light:#f5f7fa;
	--el-fill-color-lighter:#fafafa;
	--el-fill-color-extra-light:#fafcff;
	--el-fill-color-dark:#ebedf0;
	--el-fill-color-darker:#e6e8eb;
	--el-fill-color-blank:#ffffff;
	--el-box-shadow:0px 12px 32px 4px rgba(0,0,0,0.04),0px 8px 20px rgba(0,0,0,0.08);
	--el-box-shadow-light:0px 0px 12px rgba(0,0,0,0.12);
	--el-box-shadow-lighter:0px 0px 6px rgba(0,0,0,0.12);
	--el-box-shadow-dark:0px 16px 48px 16px rgba(0,0,0,0.08),0px 12px 32px rgba(0,0,0,0.12),0px 8px 16px -8px rgba(0,0,0,0.16);
	--el-disabled-bg-color:var(--el-fill-color-light);
	--el-disabled-text-color:var(--el-text-color-placeholder);
	--el-disabled-border-color:var(--el-border-color-light);
	--el-overlay-color:rgba(0,0,0,0.8);
	--el-overlay-color-light:rgba(0,0,0,0.7);
	--el-overlay-color-lighter:rgba(0,0,0,0.5);
	--el-mask-color:rgba(255,255,255,0.9);
	--el-mask-color-extra-light:rgba(255,255,255,0.3);
	--el-border-width:1px;
	--el-border-style:solid;
	--el-border-color-hover:var(--el-text-color-disabled);
	--el-border:var(--el-border-width) var(--el-border-style) var(--el-border-color);
	--el-svg-monochrome-grey:var(--el-border-color);
}