@alifd/meet-react/es/core/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  颜色
  @type color
  @group color
  @component color
  @style
  @display Color
  @chinese 颜色
  @family style
 */
:root {
  /*
    @desc white
    @semantic 纯白色
    @category default
    @unconfigurable
   */
  --color-white: #fff;
  /*
    @desc black
    @semantic 纯黑色
    @category default
    @unconfigurable
   */
  --color-black: #000;
  /*
    @desc transparent
    @semantic 透明色
    @category default
    @unconfigurable
   */
  --color-transparent: transparent;
  /*
    @desc text1-1
    @semantic 文本1
    @category neutural
   */
  --color-text1-1: #ccc;
  /*
    @desc text1-2
    @semantic 文本2
    @category neutural
   */
  --color-text1-2: #999;
  /*
    @desc text1-3
    @semantic 文本3
    @category neutural
   */
  --color-text1-3: #666;
  /*
    @desc text1-4
    @semantic 文本4
    @category neutural
   */
  --color-text1-4: #222;
  /*
    @desc line1-1
    @semantic 线条1
    @category neutural
   */
  --color-line1-1: #f2f2f2;
  /*
    @desc line1-2
    @semantic 线条2
    @category neutural
   */
  --color-line1-2: #eee;
  /*
    @desc line1-3
    @semantic 线条3
    @category neutural
   */
  --color-line1-3: #e6e6e6;
  /*
    @desc line1-4
    @semantic 线条4
    @category neutural
   */
  --color-line1-4: #ddd;
  /*
    @desc fill1-1
    @semantic 填充1
    @category neutural
   */
  --color-fill1-1: #f9f9f9;
  /*
    @desc fill1-2
    @semantic 填充2
    @category neutural
   */
  --color-fill1-2: #f5f5f5;
  /*
    @desc fill1-3
    @semantic 填充3
    @category neutural
   */
  --color-fill1-3: #f2f2f2;
  /*
    @desc fill1-4
    @semantic 填充4
    @category neutural
   */
  --color-fill1-4: #eee;
  /*
    @desc text2-1
    @semantic 反色文本1
    @category neutural
   */
  --color-text2-1: rgba(255, 255, 255, 0.26);
  /*
    @desc text2-2
    @semantic 反色文本2
    @category neutural
   */
  --color-text2-2: rgba(255, 255, 255, 0.52);
  /*
    @desc text2-3
    @semantic 反色文本3
    @category neutural
   */
  --color-text2-3: rgba(255, 255, 255, 0.74);
  /*
    @desc text2-4
    @semantic 反色文本4
    @category neutural
   */
  --color-text2-4: rgba(255, 255, 255, 1);
  /*
    @desc line2-1
    @semantic 反色线条1
    @category neutural
   */
  --color-line2-1: rgba(255, 255, 255, 0.08);
  /*
    @desc line2-2
    @semantic 反色线条2
    @category neutural
   */
  --color-line2-2: rgba(255, 255, 255, 0.12);
  /*
    @desc line2-3
    @semantic 反色线条3
    @category neutural
   */
  --color-line2-3: rgba(255, 255, 255, 0.16);
  /*
    @desc line2-4
    @semantic 反色线条4
    @category neutural
   */
  --color-line2-4: rgba(255, 255, 255, 0.18);
  /*
    @desc fill2-1
    @semantic 反色填充1
    @category neutural
   */
  --color-fill2-1: rgba(255, 255, 255, 0.04);
  /*
    @desc fill2-2
    @semantic 反色填充2
    @category neutural
   */
  --color-fill2-2: rgba(255, 255, 255, 0.06);
  /*
    @desc fill2-3
    @semantic 反色填充3
    @category neutural
   */
  --color-fill2-3: rgba(255, 255, 255, 0.08);
  /*
    @desc fill2-4
    @semantic 反色填充4
    @category neutural
   */
  --color-fill2-4: rgba(255, 255, 255, 0.12);
  /*
    @desc brand1
    @semantic 品牌1
    @category brand
   */
  --color-brand-1: #c4edff;
  /*
    @desc brand2
    @semantic 品牌2
    @category brand
   */
  --color-brand-2: #4ab7ff;
  /*
    @desc brand3
    @semantic 品牌3
    @category brand
   */
  --color-brand-3: #209bfa;
  /*
    @desc brand4
    @semantic 品牌4
    @category brand
   */
  --color-brand-4: #1179d4;
  /*
    @desc link1
    @semantic 链接1
    @category function
   */
  --color-link-1: #c4edff;
  /*
    @desc link2
    @semantic 链接2
    @category function
   */
  --color-link-2: #4ab7ff;
  /*
    @desc link3
    @semantic 链接3
    @category function
   */
  --color-link-3: #209bfa;
  /*
    @desc link4
    @semantic 链接4
    @category function
   */
  --color-link-4: #1179d4;
  /*
    @desc success1
    @semantic 成功提示1
    @category function
   */
  --color-success-1: #a8ffc4;
  /*
    @desc success2
    @semantic 成功提示2
    @category function
   */
  --color-success-2: #28de74;
  /*
    @desc success3
    @semantic 成功提示3
    @category function
   */
  --color-success-3: #05d161;
  /*
    @desc success4
    @semantic 成功提示4
    @category function
   */
  --color-success-4: #00ab53;
  /*
    @desc notice1
    @semantic 告知提示1
    @category function
   */
  --color-notice-1: #e6fffb;
  /*
    @desc notice2
    @semantic 告知提示2
    @category function
   */
  --color-notice-2: #38d9d3;
  /*
    @desc notice3
    @semantic 告知提示3
    @category function
   */
  --color-notice-3: #14cccc;
  /*
    @desc notice4
    @semantic 告知提示4
    @category function
   */
  --color-notice-4: #08a1a6;
  /*
    @desc warning1
    @semantic 警告提示1
    @category function
   */
  --color-warning-1: #ffe7a3;
  /*
    @desc warning2
    @semantic 警告提示2
    @category function
   */
  --color-warning-2: #f8ab22;
  /*
    @desc warning3
    @semantic 警告提示3
    @category function
   */
  --color-warning-3: #ff9900;
  /*
    @desc warning4
    @semantic 警告提示4
    @category function
   */
  --color-warning-4: #d97b00;
  /*
    @desc error1
    @semantic 错误提示1
    @category function
   */
  --color-error-1: #ffdcd6;
  /*
    @desc error2
    @semantic 错误提示2
    @category function
   */
  --color-error-2: #f75e59;
  /*
    @desc error3
    @semantic 错误提示3
    @category function
   */
  --color-error-3: #eb2f2f;
  /*
    @desc error4
    @semantic 错误提示4
    @category function
   */
  --color-error-4: #c41d23;
  /*
    @desc help1
    @semantic 帮助提示1
    @category function
   */
  --color-help-1: #c4edff;
  /*
    @desc help2
    @semantic 帮助提示2
    @category function
   */
  --color-help-2: #4ab7ff;
  /*
    @desc help3
    @semantic 帮助提示3
    @category function
   */
  --color-help-3: #209bfa;
  /*
    @desc help4
    @semantic 帮助提示4
    @category function
   */
  --color-help-4: #1179d4;
  /*
    @desc data-red
    @semantic 数据色-红
    @category function
   */
  --color-data-red: red;
  /*
    @desc data-orange
    @semantic 数据色-橙
    @category function
   */
  --color-data-orange: orange;
  /*
    @desc data-yellow
    @semantic 数据色-黄
    @category function
   */
  --color-data-yellow: yellow;
  /*
    @desc data-green
    @semantic 数据色-绿
    @category function
   */
  --color-data-green: green;
  /*
    @desc data-cyan
    @semantic 数据色-青色
    @category function
   */
  --color-data-cyan: cyan;
  /*
    @desc data-blue
    @semantic 数据色-蓝
    @category data
   */
  --color-data-blue: blue;
  /*
    @desc data-indigo
    @semantic 数据色-靛蓝
    @category function
   */
  --color-data-indigo: indigo;
  /*
    @desc data-purple
    @semantic 数据色-紫
    @category function
   */
  --color-data-purple: purple;
}

/*
  线条
  @component line
  @style
  @display Line
  @chinese 线条
  @family style
 */
:root {
  /*
    @desc line-0
    @semantic 无线条
    @group line.width
    @type number
    @unconfigurable
   */
  --line-zero: 0vw;
  /*
    @desc line-1
    @semantic 线条1
    @group line.width
    @type number
   */
  --line-1: 1px;
  /*
    @desc line-2
    @semantic 线条2
    @group line.width
    @type number
   */
  --line-2: 0.26666666666666666vw;
  /*
    @desc line-3
    @semantic 线条3
    @group line.width
    @type number
   */
  --line-3: 0.5333333333333333vw;
  /*
    @desc line-solid
    @semantic 实线
    @group line.style
    @unconfigurable
    @type line-style
   */
  --line-solid: solid;
  /*
    @desc line-dashed
    @semantic 虚线
    @group line.style
    @unconfigurable
    @type line-style
   */
  --line-dashed: dashed;
  /*
    @desc line-dotted
    @semantic 点线
    @group line.style
    @unconfigurable
    @type line-style
   */
  --line-dotted: dotted;
}

/*
  边角
  @group corner
  @component corner
  @style
  @display Corner
  @chinese 边角
  @family style
 */
:root {
  /*
    @desc corner-zero
    @semantic 无圆角
    @unconfigurable
    @type number
   */
  --corner-zero: 0vw;
  /*
    @desc corner-1
    @semantic 圆角1
    @type number
   */
  --corner-1: 1.0666666666666667vw;
  /*
    @desc corner-2
    @semantic 圆角2
    @type number
   */
  --corner-2: 2.1333333333333333vw;
  /*
    @desc corner-3
    @semantic 圆角3
    @type number
   */
  --corner-3: 4.266666666666667vw;
  /*
    @desc corner-circle
    @semantic 圆形
    @unconfigurable
   */
  --corner-circle: 50%;
  /*
    @desc corner-semicircle
    @semantic 半圆形
    @unconfigurable
   */
  --corner-semicircle: 133.2vw;
}

/*
  尺寸
  @component size
  @style
  @display Size
  @chinese 尺寸
  @family style
 */
:root {
  /*
    @desc s-base
    @semantic 基准尺寸
    @type number
   */
  --s-base: 1.0666666666666667vw;
  /*
    @desc s-0
    @semantic 无尺寸
    @group size
    @unconfigurable
   */
  --s-zero: 0vw;
  /* @unconfigurable */
  --s-0: --s-zero;
  /*
   @desc s-1
   @semantic 尺寸1
   @group size
   @unconfigurable
  */
  --s-1: calc(var(--s-base) * 1);
  /*
   @desc s-2
   @semantic 尺寸2
   @group size
   @unconfigurable
  */
  --s-2: calc(var(--s-base) * 2);
  /*
   @desc s-3
   @semantic 尺寸3
   @group size
   @unconfigurable
  */
  --s-3: calc(var(--s-base) * 3);
  /*
   @desc s-4
   @semantic 尺寸4
   @group size
   @unconfigurable
  */
  --s-4: calc(var(--s-base) * 4);
  /*
   @desc s-5
   @semantic 尺寸5
   @group size
   @unconfigurable
  */
  --s-5: calc(var(--s-base) * 5);
  /*
   @desc s-6
   @semantic 尺寸6
   @group size
   @unconfigurable
  */
  --s-6: calc(var(--s-base) * 6);
  /*
   @desc s-7
   @semantic 尺寸7
   @group size
   @unconfigurable
  */
  --s-7: calc(var(--s-base) * 7);
  /*
   @desc s-8
   @semantic 尺寸8
   @group size
   @unconfigurable
  */
  --s-8: calc(var(--s-base) * 8);
  /*
   @desc s-9
   @semantic 尺寸9
   @group size
   @unconfigurable
  */
  --s-9: calc(var(--s-base) * 9);
  /*
   @desc s-10
   @semantic 尺寸10
   @group size
   @unconfigurable
  */
  --s-10: calc(var(--s-base) * 10);
  /*
   @desc s-11
   @semantic 尺寸11
   @group size
   @unconfigurable
  */
  --s-11: calc(var(--s-base) * 11);
  /*
   @desc s-12
   @semantic 尺寸12
   @group size
   @unconfigurable
  */
  --s-12: calc(var(--s-base) * 12);
  /*
   @desc s-13
   @semantic 尺寸13
   @group size
   @unconfigurable
  */
  --s-13: calc(var(--s-base) * 13);
  /*
   @desc s-14
   @semantic 尺寸14
   @group size
   @unconfigurable
  */
  --s-14: calc(var(--s-base) * 14);
  /*
   @desc s-15
   @semantic 尺寸15
   @group size
   @unconfigurable
  */
  --s-15: calc(var(--s-base) * 15);
  /*
   @desc s-16
   @semantic 尺寸16
   @group size
   @unconfigurable
  */
  --s-16: calc(var(--s-base) * 16);
  /*
   @desc s-17
   @semantic 尺寸17
   @group size
   @unconfigurable
  */
  --s-17: calc(var(--s-base) * 17);
  /*
   @desc s-18
   @semantic 尺寸18
   @group size
   @unconfigurable
  */
  --s-18: calc(var(--s-base) * 18);
  /*
   @desc s-19
   @semantic 尺寸19
   @group size
   @unconfigurable
  */
  --s-19: calc(var(--s-base) * 19);
  /*
   @desc s-20
   @semantic 尺寸20
   @group size
   @unconfigurable
  */
  --s-20: calc(var(--s-base) * 20);
  /*
   @desc s-21
   @semantic 尺寸21
   @group size
   @unconfigurable
  */
  --s-21: calc(var(--s-base) * 21);
  /*
   @desc s-22
   @semantic 尺寸22
   @group size
   @unconfigurable
  */
  --s-22: calc(var(--s-base) * 22);
  /*
   @desc s-23
   @semantic 尺寸23
   @group size
   @unconfigurable
  */
  --s-23: calc(var(--s-base) * 23);
  /*
   @desc s-24
   @semantic 尺寸24
   @group size
   @unconfigurable
  */
  --s-24: calc(var(--s-base) * 24);
  /*
   @desc s-25
   @semantic 尺寸25
   @group size
   @unconfigurable
  */
  --s-25: calc(var(--s-base) * 25);
  /*
   @desc s-26
   @semantic 尺寸26
   @group size
   @unconfigurable
  */
  --s-26: calc(var(--s-base) * 26);
  /*
   @desc s-27
   @semantic 尺寸27
   @group size
   @unconfigurable
  */
  --s-27: calc(var(--s-base) * 27);
  /*
   @desc s-28
   @semantic 尺寸28
   @group size
   @unconfigurable
  */
  --s-28: calc(var(--s-base) * 28);
  /*
   @desc s-29
   @semantic 尺寸29
   @group size
   @unconfigurable
  */
  --s-29: calc(var(--s-base) * 29);
  /*
   @desc s-30
   @semantic 尺寸30
   @group size
   @unconfigurable
  */
  --s-30: calc(var(--s-base) * 30);
  /*
   @desc s-31
   @semantic 尺寸31
   @group size
   @unconfigurable
  */
  --s-31: calc(var(--s-base) * 31);
  /*
   @desc s-32
   @semantic 尺寸32
   @group size
   @unconfigurable
  */
  --s-32: calc(var(--s-base) * 32);
  /*
   @desc s-33
   @semantic 尺寸33
   @group size
   @unconfigurable
  */
  --s-33: calc(var(--s-base) * 33);
  /*
   @desc s-34
   @semantic 尺寸34
   @group size
   @unconfigurable
  */
  --s-34: calc(var(--s-base) * 34);
  /*
   @desc s-35
   @semantic 尺寸35
   @group size
   @unconfigurable
  */
  --s-35: calc(var(--s-base) * 35);
  /*
   @desc s-36
   @semantic 尺寸36
   @group size
   @unconfigurable
  */
  --s-36: calc(var(--s-base) * 36);
  /*
   @desc s-37
   @semantic 尺寸37
   @group size
   @unconfigurable
  */
  --s-37: calc(var(--s-base) * 37);
  /*
   @desc s-38
   @semantic 尺寸38
   @group size
   @unconfigurable
  */
  --s-38: calc(var(--s-base) * 38);
  /*
   @desc s-39
   @semantic 尺寸39
   @group size
   @unconfigurable
  */
  --s-39: calc(var(--s-base) * 39);
  /*
   @desc s-40
   @semantic 尺寸40
   @group size
   @unconfigurable
  */
  --s-40: calc(var(--s-base) * 40);
  /*
   @desc s-41
   @semantic 尺寸41
   @group size
   @unconfigurable
  */
  --s-41: calc(var(--s-base) * 41);
  /*
   @desc s-42
   @semantic 尺寸42
   @group size
   @unconfigurable
  */
  --s-42: calc(var(--s-base) * 42);
  /*
   @desc s-43
   @semantic 尺寸43
   @group size
   @unconfigurable
  */
  --s-43: calc(var(--s-base) * 43);
  /*
   @desc s-44
   @semantic 尺寸44
   @group size
   @unconfigurable
  */
  --s-44: calc(var(--s-base) * 44);
  /*
   @desc s-45
   @semantic 尺寸45
   @group size
   @unconfigurable
  */
  --s-45: calc(var(--s-base) * 45);
  /*
   @desc s-46
   @semantic 尺寸46
   @group size
   @unconfigurable
  */
  --s-46: calc(var(--s-base) * 46);
  /*
   @desc s-47
   @semantic 尺寸47
   @group size
   @unconfigurable
  */
  --s-47: calc(var(--s-base) * 47);
  /*
   @desc s-48
   @semantic 尺寸48
   @group size
   @unconfigurable
  */
  --s-48: calc(var(--s-base) * 48);
  /*
   @desc s-49
   @semantic 尺寸49
   @group size
   @unconfigurable
  */
  --s-49: calc(var(--s-base) * 49);
  /*
   @desc s-50
   @semantic 尺寸50
   @group size
   @unconfigurable
  */
  --s-50: calc(var(--s-base) * 50);
  /*
    @desc s-compact
    @semantic 紧凑尺寸
    @unconfigurable
    @group size
   */
  --s-compact: calc(var(--s-base) * 50);
  /*
    @desc s-comfortable
    @semantic 适中尺寸
    @unconfigurable
    @group size
   */
  --s-comfortable: calc(var(--s-base) * 50);
  /*
    @desc s-luxury
    @semantic 超大尺寸
    @group size
    @unconfigurable
   */
  --s-luxury: calc(var(--s-base) * 160);
}

/*
  阴影
  @group shadow
  @type shadow
  @component shadow
  @style
  @display Shadow
  @chinese 阴影
  @family style
 */
:root {
  /*
    @desc shadow-0
    @semantic 无阴影
    @unconfigurable
   */
  --shadow-zero: none;
  /*
    @desc shadow1
    @semantic 阴影1
    @semantic shadow1
   */
  --shadow-1: 0vw 0vw 0.5333333333333333vw 0vw rgba(0, 0, 0, 0.08), 0vw 0.5333333333333333vw 2.1333333333333333vw 0vw rgba(0, 0, 0, 0.12);
  /*
    @desc shadow2
    @semantic 阴影2
    @semantic shadow2
   */
  --shadow-2: 0vw 0vw 2.1333333333333333vw 0vw rgba(0, 0, 0, 0.08), 0vw 2.1333333333333333vw 4.266666666666667vw 0vw rgba(0, 0, 0, 0.12);
  /*
    @desc shadow3
    @semantic 阴影3
    @semantic shadow3
   */
  --shadow-3: 0vw 0vw 4.266666666666667vw 0vw rgba(0, 0, 0, 0.08), 0vw 2.1333333333333333vw 4.266666666666667vw 0vw rgba(0, 0, 0, 0.12);
}

/*
  字体
  @group font
  @type font
  @component font
  @style
  @display Font
  @chinese 字体
  @family style
 */
:root {
  /*
    @desc fontfamily1
    @semantic 字体族1
   */
  --font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei";
}

/*
  动画
  @unconfigurable
  @component motion
  @style
*/
:root {
  /*
   @desc motion-1
   @group motion.time
   @semantic 动画时间
   */
  --motion-time-1: 0.1s;
  /*
   @desc motion-2
   @group motion.time
   @semantic 动画时间
   */
  --motion-time-2: 0.25s;
  /*
   @desc motion-3
   @group motion.time
   @semantic 动画时间
   */
  --motion-time-3: 0.3s;
  /*
   @desc motion-linear
   @group motion.type
   @semantic 动画时间
   */
  --motion-type-linear: cubic-bezier(0, 0, 1, 1);
  /*
   @desc motion-ease
   @group motion.type
   @semantic 动画时间
   */
  --motion-type-ease: ease;
  /*
   @desc motion-ease-in
   @group motion.type
   @semantic 动画时间
   */
  --motion-type-ease-in: ease-in;
  /*
   @desc motion-ease-out
   @group motion.type
   @semantic 动画时间
   */
  --motion-type-ease-out: ease-out;
  /*
   @desc motion-ease-in-out-back
   @group motion.type
   @semantic 动画时间
   */
  --motion-type-ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /*
   @desc motion-ease-in-out-back
   @group motion.type
   @semantic 动画时间
   */
  --motion-type-ease-in-out: ease-in-out;
}

/*
  海拔
  @unconfigurable
  @group elevation
  @component elevation
  @style
 */
:root {
  /*
   @desc elevation-0
   @semantic 无层级
  */
  --elevation-0: 0;
  /*
   @desc elevation-1
   @semantic 层级1-内容
  */
  --elevation-1: 100;
  /*
   @desc elevation-2
   @semantic 层级2-内容
  */
  --elevation-2: 200;
  /*
   @desc elevation-3
   @semantic 层级3-系统
  */
  --elevation-3: 300;
  /*
   @desc elevation-4
   @semantic 层级4-系统
  */
  --elevation-4: 400;
  /*
   @desc elevation-sinking
   @semantic 下沉式层级
  */
  --elevation-ravine: -999;
  /*
   @desc elevation-peak
   @semantic 高峰
  */
  --elevation-peak: 999;
}

/*
  图标
  @component icon
  @style
  @display Icon
  @chinese 图标
  @family general
 */
:root {
  /*
   @desc icon-xxs
   @semantic 超级小
   @group icon.size
   */
  --icon-xxs: var(--s-3);
  /*
   @desc icon-xs
   @semantic 超小
   @group icon.size
   */
  --icon-xs: var(--s-4);
  /*
   @desc icon-s
   @semantic 小
   @group icon.size
   */
  --icon-s: var(--s-5);
  /*
   @desc icon-m
   @semantic 中
   @group icon.size
   */
  --icon-m: var(--s-6);
  /*
   @desc icon-l
   @semantic 大
   @group icon.size
   */
  --icon-l: var(--s-8);
  /*
   @desc icon-xl
   @semantic 超大
   @group icon.size
   */
  --icon-xl: var(--s-12);
  /*
   @desc icon-xxl
   @semantic 超级大
   @group icon.size
   */
  --icon-xxl: var(--s-16);
  /*
   @desc icon-font-family
   @semantic 字体族
   @unconfigurable
   @type font-family
   */
  --icon-font-family: meet-iconfont;
  /**
   @desc icon-font-path
   @semantic font-path
   @unconfigurable
  */
  --icon-font-path: url(https://at.alicdn.com/t/font_1273696_vcsg3wyh4r.ttf);
  /*
      @desc icon-content-play-filling
      @group icon.content
      @semantic play-filling
      @type icon
      @unconfigurable
    */
  --icon-content-play-filling: "";
  /*
    @desc icon-content-select
    @group icon.content
    @semantic select
    @type icon
    @unconfigurable
  */
  --icon-content-select: "";
  /*
    @desc icon-content-add
    @group icon.content
    @semantic add
    @type icon
    @unconfigurable
  */
  --icon-content-add: "";
  /*
    @desc icon-content-close
    @group icon.content
    @semantic close
    @type icon
    @unconfigurable
  */
  --icon-content-close: "";
  /*
    @desc icon-content-search
    @group icon.content
    @semantic search
    @type icon
    @unconfigurable
  */
  --icon-content-search: "";
  /*
    @desc icon-content-ashbin
    @group icon.content
    @semantic ashbin
    @type icon
    @unconfigurable
  */
  --icon-content-ashbin: "";
  /*
    @desc icon-content-semi-select
    @group icon.content
    @semantic semi-select
    @type icon
    @unconfigurable
  */
  --icon-content-semi-select: "";
  /*
    @desc icon-content-error
    @group icon.content
    @semantic error
    @type icon
    @unconfigurable
  */
  --icon-content-error: "";
  /*
    @desc icon-content-prompt
    @group icon.content
    @semantic prompt
    @type icon
    @unconfigurable
  */
  --icon-content-prompt: "";
  /*
    @desc icon-content-prompt-filling
    @group icon.content
    @semantic prompt-filling
    @type icon
    @unconfigurable
  */
  --icon-content-prompt-filling: "";
  /*
    @desc icon-content-success
    @group icon.content
    @semantic success
    @type icon
    @unconfigurable
  */
  --icon-content-success: "";
  /*
    @desc icon-content-warning
    @group icon.content
    @semantic warning
    @type icon
    @unconfigurable
  */
  --icon-content-warning: "";
  /*
    @desc icon-content-arrow-left
    @group icon.content
    @semantic arrow-left
    @type icon
    @unconfigurable
  */
  --icon-content-arrow-left: "";
  /*
    @desc icon-content-arrow-right
    @group icon.content
    @semantic arrow-right
    @type icon
    @unconfigurable
  */
  --icon-content-arrow-right: "";
  /*
    @desc icon-content-arrow-up
    @group icon.content
    @semantic arrow-up
    @type icon
    @unconfigurable
  */
  --icon-content-arrow-up: "";
  /*
    @desc icon-content-arrow-down
    @group icon.content
    @semantic arrow-down
    @type icon
    @unconfigurable
  */
  --icon-content-arrow-down: "";
  /*
    @desc icon-content-arrow-double-left
    @group icon.content
    @semantic arrow-double-left
    @type icon
    @unconfigurable
  */
  --icon-content-arrow-double-left: "";
  /*
    @desc icon-content-arrow-double-right
    @group icon.content
    @semantic arrow-double-right
    @type icon
    @unconfigurable
  */
  --icon-content-arrow-double-right: "";
  /*
    @desc icon-content-triangle-arrow-up
    @group icon.content
    @semantic triangle-arrow-up
    @type icon
    @unconfigurable
  */
  --icon-content-triangle-arrow-up: "";
  /*
    @desc icon-content-triangle-arrow-down
    @group icon.content
    @semantic triangle-arrow-down
    @type icon
    @unconfigurable
  */
  --icon-content-triangle-arrow-down: "";
  /*
    @desc icon-content-triangle-arrow-left
    @group icon.content
    @semantic triangle-arrow-left
    @type icon
    @unconfigurable
  */
  --icon-content-triangle-arrow-left: "";
  /*
    @desc icon-content-triangle-arrow-right
    @group icon.content
    @semantic triangle-arrow-right
    @type icon
    @unconfigurable
  */
  --icon-content-triangle-arrow-right: "";
  /*
    @desc icon-content-heart-filling
    @group icon.content
    @semantic heart-filling
    @type icon
    @unconfigurable
  */
  --icon-content-heart-filling: "";
  /*
    @desc icon-content-minus
    @group icon.content
    @semantic minus
    @type icon
    @unconfigurable
  */
  --icon-content-minus: "";
  /*
    @desc icon-content-loading
    @group icon.content
    @semantic loading
    @type icon
    @unconfigurable
  */
  --icon-content-loading: "";
  /*
    @desc icon-content-favorites-filling
    @group icon.content
    @semantic favorites-filling
    @type icon
    @unconfigurable
  */
  --icon-content-favorites-filling: "";
  /*
    @desc icon-content-warning-filling
    @group icon.content
    @semantic warning-filling
    @type icon
    @unconfigurable
  */
  --icon-content-warning-filling: "";
  /*
    @desc icon-content-success-filling
    @group icon.content
    @semantic success-filling
    @type icon
    @unconfigurable
  */
  --icon-content-success-filling: "";
  /*
    @desc icon-content-delete-filling
    @group icon.content
    @semantic delete-filling
    @type icon
    @unconfigurable
  */
  --icon-content-delete-filling: "";
  /*
    @desc icon-content-asterisk
    @group icon.content
    @semantic asterisk
    @type icon
    @unconfigurable
  */
  --icon-content-asterisk: "";
  /*
    @desc icon-content-switch
    @group icon.content
    @semantic switch
    @type icon
    @unconfigurable
  */
  --icon-content-switch: "";
  /*
    @desc icon-content-upload
    @group icon.content
    @semantic upload
    @type icon
    @unconfigurable
  */
  --icon-content-upload: "";
  /*
    @desc icon-content-download
    @group icon.content
    @semantic download
    @type icon
    @unconfigurable
  */
  --icon-content-download: "";
  /*
    @desc icon-content-picture
    @group icon.content
    @semantic picture
    @type icon
    @unconfigurable
  */
  --icon-content-picture: "";
  /*
    @desc icon-content-ellipsis
    @group icon.content
    @semantic ellipsis
    @type icon
    @unconfigurable
  */
  --icon-content-ellipsis: "";
  /*
    @desc icon-content-calendar
    @group icon.content
    @semantic calendar
    @type icon
    @unconfigurable
  */
  --icon-content-calendar: "";
  /*
    @desc icon-content-list
    @group icon.content
    @semantic list
    @type icon
    @unconfigurable
  */
  --icon-content-list: "";
  /*
    @desc icon-content-chart-pie
    @group icon.content
    @semantic chart-pie
    @type icon
    @unconfigurable
  */
  --icon-content-chart-pie: "";
  /*
    @desc icon-content-chart-bar
    @group icon.content
    @semantic chart-bar
    @type icon
    @unconfigurable
  */
  --icon-content-chart-bar: "";
  /*
    @desc icon-content-detail
    @group icon.content
    @semantic detail
    @type icon
    @unconfigurable
  */
  --icon-content-detail: "";
  /*
    @desc icon-content-dashboard
    @group icon.content
    @semantic dashboard
    @type icon
    @unconfigurable
  */
  --icon-content-dashboard: "";
  /*
    @desc icon-content-help
    @group icon.content
    @semantic help
    @type icon
    @unconfigurable
  */
  --icon-content-help: "";
  /*
    @desc icon-content-unlock
    @group icon.content
    @semantic unlock
    @type icon
    @unconfigurable
  */
  --icon-content-unlock: "";
  /*
    @desc icon-content-lock
    @group icon.content
    @semantic lock
    @type icon
    @unconfigurable
  */
  --icon-content-lock: "";
  /*
    @desc icon-content-set
    @group icon.content
    @semantic set
    @type icon
    @unconfigurable
  */
  --icon-content-set: "";
  /*
    @desc icon-content-toggle-left
    @group icon.content
    @semantic toggle-left
    @type icon
    @unconfigurable
  */
  --icon-content-toggle-left: "";
  /*
    @desc icon-content-toggle-right
    @group icon.content
    @semantic toggle-right
    @type icon
    @unconfigurable
  */
  --icon-content-toggle-right: "";
  /*
    @desc icon-content-filter
    @group icon.content
    @semantic filter
    @type icon
    @unconfigurable
  */
  --icon-content-filter: "";
  /*
    @desc icon-content-eye
    @group icon.content
    @semantic eye
    @type icon
    @unconfigurable
  */
  --icon-content-eye: "";
  /*
    @desc icon-content-eye-close
    @group icon.content
    @semantic eye-close
    @type icon
    @unconfigurable
  */
  --icon-content-eye-close: "";
  /*
    @desc icon-content-copy
    @group icon.content
    @semantic copy
    @type icon
    @unconfigurable
  */
  --icon-content-copy: "";
  /*
    @desc icon-content-email
    @group icon.content
    @semantic email
    @type icon
    @unconfigurable
  */
  --icon-content-email: "";
  /*
    @desc icon-content-attachment
    @group icon.content
    @semantic attachment
    @type icon
    @unconfigurable
  */
  --icon-content-attachment: "";
  /*
    @desc icon-content-exit
    @group icon.content
    @semantic exit
    @type icon
    @unconfigurable
  */
  --icon-content-exit: "";
  /*
    @desc icon-content-edit
    @group icon.content
    @semantic edit
    @type icon
    @unconfigurable
  */
  --icon-content-edit: "";
  /*
    @desc icon-content-account
    @group icon.content
    @semantic account
    @type icon
    @unconfigurable
  */
  --icon-content-account: "";
  /*
    @desc icon-content-refresh
    @group icon.content
    @semantic refresh
    @type icon
    @unconfigurable
  */
  --icon-content-refresh: "";
  /*
    @desc icon-content-cry
    @group icon.content
    @semantic cry
    @type icon
    @unconfigurable
  */
  --icon-content-cry: "";
  /*
    @desc icon-content-smile
    @group icon.content
    @semantic smile
    @type icon
    @unconfigurable
  */
  --icon-content-smile: "";
  /*
    @desc icon-content-ascending
    @group icon.content
    @semantic ascending
    @type icon
    @unconfigurable
  */
  --icon-content-ascending: "";
  /*
    @desc icon-content-descending
    @group icon.content
    @semantic descending
    @type icon
    @unconfigurable
  */
  --icon-content-descending: "";
  /*
    @desc icon-content-clock
    @group icon.content
    @semantic clock
    @type icon
    @unconfigurable
  */
  --icon-content-clock: "";
  /*
    @desc icon-content-sorting
    @group icon.content
    @semantic sorting
    @type icon
    @unconfigurable
  */
  --icon-content-sorting: "";
  /*
    @desc icon-content-form
    @group icon.content
    @semantic form
    @type icon
    @unconfigurable
  */
  --icon-content-form: "";
  /*
    @desc icon-content-add-square
    @group icon.content
    @semantic add-square
    @type icon
    @unconfigurable
  */
  --icon-content-add-square: "";
  /*
    @desc icon-content-camera
    @group icon.content
    @semantic camera
    @type icon
    @unconfigurable
  */
  --icon-content-camera: "";
  /*
    @desc icon-content-home
    @group icon.content
    @semantic home
    @type icon
    @unconfigurable
  */
  --icon-content-home: "";
}

@font-face {
  font-family: meet-iconfont;
  src: url(https://at.alicdn.com/t/font_1273696_vcsg3wyh4r.ttf) format("truetype");
}
/*
  段落
  @component paragraph
  @style
  @display Paragraph
  @chinese 段落
  @family style
 */
:root {
  /*
    @desc display3
    @semantic 大运营标题-字体族
    @group p.font-family
  */
  --p-display-3-font-family: var(--font-family);
  /*
    @desc display3
    @semantic 大运营标题-字号
    @group p.font-size
    @type number
  */
  --p-display-3-font-size: 14.933333333333334vw;
  /*
    @desc display3
    @semantic 大运营标题-图标大小
    @group p.icon-size
    @type number
  */
  --p-display-3-icon-size: 14.933333333333334vw;
  /*
    @desc display3
    @semantic 大运营标题-字重
    @group p.font-weight
    @type number
    @step 100
  */
  --p-display-3-font-weight: 600;
  /*
    @desc display3
    @semantic 大运营标题-行高
    @group p.line-height
    @type number
  */
  --p-display-3-line-height: 140%;
  /*
    @desc display3
    @semantic 大运营标题-顶部外边距
    @group p.margin-top
  */
  --p-display-3-margin-top: var(--s-9);
  /*
    @desc display3
    @semantic 大运营标题-底部外边距
    @group p.margin-bottom
  */
  --p-display-3-margin-bottom: var(--s-9);
  /*
    @desc display3
    @semantic 大运营标题-缩进
    @group p.indent-size
  */
  --p-display-3-indent-size: var(--s-2);
  /*
    @desc display2
    @semantic 中运营标题-字号
    @group p.font-size
  */
  --p-display-2-font-size: 12.8vw;
  /*
    @desc display2
    @semantic 中运营标题-图标大小
    @group p.icon-size
    @type number
  */
  --p-display-2-icon-size: 12.8vw;
  /*
    @desc display2
    @semantic 中运营标题-字重
    @group p.font-weight
    @type number
    @step 100
  */
  --p-display-2-font-weight: 600;
  /*
    @desc display2
    @semantic 中运营标题-行高
    @group p.line-height
    @type number
  */
  --p-display-2-line-height: 140%;
  /*
    @desc display2
    @semantic 中运营标题-顶部外边距
    @group p.margin-top
  */
  --p-display-2-margin-top: var(--s-8);
  /*
    @desc display2
    @semantic 中运营标题-底部外边距
    @group p.margin-bottom
  */
  --p-display-2-margin-bottom: var(--s-8);
  /*
    @desc display2
    @semantic 中运营标题-缩进
    @group p.indent-size
  */
  --p-display-2-indent-size: var(--s-2);
  /*
    @desc display1
    @semantic 小运营标题-字号
    @group p.font-size
  */
  --p-display-1-font-size: 9.6vw;
  /*
    @desc display1
    @semantic 小运营标题-图标大小
    @group p.icon-size
    @type number
  */
  --p-display-1-icon-size: 9.6vw;
  /*
    @desc display1
    @semantic 小运营标题-字重
    @group p.font-weight
    @type number
    @step 100
  */
  --p-display-1-font-weight: 400;
  /*
    @desc display1
    @semantic 小运营标题-行高
    @group p.line-height
    @type number
  */
  --p-display-1-line-height: 140%;
  /*
    @desc display1
    @semantic 小运营标题-顶部外边距
    @group p.margin-top
  */
  --p-display-1-margin-top: var(--s-7);
  /*
    @desc display1
    @semantic 小运营标题-底部外边距
    @group p.margin-bottom
  */
  --p-display-1-margin-bottom: var(--s-7);
  /*
    @desc display1
    @semantic 小运营标题-缩进
    @group p.indent-size
  */
  --p-display-1-indent-size: var(--s-2);
  /*
    @desc headline
    @semantic 大标题-字号
    @group p.font-size
  */
  --p-headline-font-size: 6.4vw;
  /*
    @desc headline
    @semantic 大标题-图标大小
    @group p.icon-size
    @type number
  */
  --p-headline-icon-size: 6.4vw;
  /*
    @desc headline
    @semantic 大标题-字重
    @group p.font-weight
    @type number
    @step 100
  */
  --p-headline-font-weight: 400;
  /*
    @desc headline
    @semantic 大标题-行高
    @group p.line-height
    @type number
  */
  --p-headline-line-height: 140%;
  /*
    @desc headline
    @semantic 大标题-顶部外边距
    @group p.margin-top
  */
  --p-headline-margin-top: var(--s-6);
  /*
    @desc headline
    @semantic 大标题-底部外边距
    @group p.margin-bottom
  */
  --p-headline-margin-bottom: var(--s-6);
  /*
    @desc headline
    @semantic 大标题-缩进
    @group p.indent-size
  */
  --p-headline-indent-size: var(--s-2);
  /*
    @desc title
    @semantic 中标题-字号
    @group p.font-size
  */
  --p-title-font-size: 5.333333333333333vw;
  /*
    @desc title
    @semantic 中标题-图标大小
    @group p.icon-size
    @type number
  */
  --p-title-icon-size: 5.333333333333333vw;
  /*
    @desc title
    @semantic 中标题-字重
    @group p.font-weight
    @type number
    @step 100
  */
  --p-title-font-weight: 600;
  /*
    @desc title
    @semantic 中标题-行高
    @group p.line-height
    @type number
  */
  --p-title-line-height: 140%;
  /*
    @desc title
    @semantic 中标题-顶部外边距
    @group p.margin-top
  */
  --p-title-margin-top: var(--s-5);
  /*
    @desc title
    @semantic 中标题-底部外边距
    @group p.margin-bottom
  */
  --p-title-margin-bottom: var(--s-5);
  /*
    @desc title
    @semantic 中标题-缩进
    @group p.indent-size
  */
  --p-title-indent-size: var(--s-2);
  /*
    @desc subhead
    @semantic 副标题-字号
    @group p.font-size
  */
  --p-subhead-font-size: 4.8vw;
  /*
    @desc subhead
    @semantic 副标题-图标大小
    @group p.icon-size
    @type number
  */
  --p-subhead-icon-size: 4.8vw;
  /*
    @desc subhead
    @semantic 副标题-字重
    @group p.font-weight
    @type number
    @step 100
  */
  --p-subhead-font-weight: 400;
  /*
    @desc subhead
    @semantic 副标题-行高
    @group p.line-height
    @type number
  */
  --p-subhead-line-height: 140%;
  /*
    @desc subhead
    @semantic 副标题-顶部外边距
    @group p.margin-top
  */
  --p-subhead-margin-top: var(--s-4);
  /*
    @desc subhead
    @semantic 副标题-底部外边距
    @group p.margin-bottom
  */
  --p-subhead-margin-bottom: var(--s-4);
  /*
    @desc subhead
    @semantic 副标题-缩进
    @group p.indent-size
  */
  --p-subhead-indent-size: var(--s-2);
  /*
    @desc body2
    @semantic 正文(强调)-字号
    @group p.font-size
  */
  --p-body-2-font-size: 4.266666666666667vw;
  /*
    @desc body2
    @semantic 正文(强调)-图标大小
    @group p.icon-size
    @type number
  */
  --p-body-2-icon-size: 4.266666666666667vw;
  /*
    @desc body2
    @semantic 正文(强调)-字重
    @group p.font-weight
    @type number
    @step 100
  */
  --p-body-2-font-weight: 400;
  /*
    @desc body2
    @semantic 正文(强调)-行高
    @group p.line-height
    @type number
  */
  --p-body-2-line-height: 140%;
  /*
    @desc body2
    @semantic 正文(强调)-顶部外边距
    @group p.margin-top
  */
  --p-body-2-margin-top: var(--s-3);
  /*
    @desc body2
    @semantic 正文(强调)-底部外边距
    @group p.margin-bottom
  */
  --p-body-2-margin-bottom: var(--s-3);
  /*
    @desc body-2
    @semantic 正文(强调)-缩进
    @group p.indent-size
  */
  --p-body-2-indent-size: var(--s-2);
  /*
    @desc body1
    @semantic 正文(常规)-字号
    @group p.font-size
  */
  --p-body-1-font-size: 3.7333333333333334vw;
  /*
    @desc body1
    @semantic 正文(常规)-图标大小
    @group p.icon-size
    @type number
  */
  --p-body-1-icon-size: 3.7333333333333334vw;
  /*
    @desc body1
    @semantic 正文(常规)-字重
    @group p.font-weight
    @type number
    @step 100
  */
  --p-body-1-font-weight: 400;
  /*
    @desc body1
    @semantic 正文(常规)-行高
    @group p.line-height
    @type number
  */
  --p-body-1-line-height: 140%;
  /*
    @desc body1
    @semantic 正文(常规)-顶部外边距
    @group p.margin-top
  */
  --p-body-1-margin-top: var(--s-2);
  /*
    @desc body1
    @semantic 正文(常规)-底部外边距
    @group p.margin-bottom
  */
  --p-body-1-margin-bottom: var(--s-2);
  /*
    @desc body1
    @semantic 正文(常规)-缩进
    @group p.indent-size
  */
  --p-body-1-indent-size: var(--s-2);
  /*
    @desc caption
    @semantic 注释-字号
    @group p.font-size
  */
  --p-caption-font-size: 3.2vw;
  /*
    @desc caption
    @semantic 注释-图标大小
    @group p.icon-size
    @type number
  */
  --p-caption-icon-size: 3.2vw;
  /*
    @desc caption
    @semantic 注释-字重
    @group p.font-weight
    @type number
    @step 100
  */
  --p-caption-font-weight: 300;
  /*
    @desc caption
    @semantic 注释-行高
    @group p.line-height
    @type number
  */
  --p-caption-line-height: 120%;
  /*
    @desc caption
    @semantic 注释-顶部外边距
    @group p.margin-top
  */
  --p-caption-margin-top: var(--s-3);
  /*
    @desc caption
    @semantic 注释-底部外边距
    @group p.margin-bottom
  */
  --p-caption-margin-bottom: var(--s-3);
  /*
    @desc caption
    @semantic 注释-缩进
    @group p.indent-size
  */
  --p-caption-indent-size: var(--s-1);
  /*
    @desc overline
    @semantic 脚注-字号
    @group p.font-size
  */
  --p-overline-font-size: 2.6666666666666665vw;
  /*
    @desc overline
    @semantic 脚注-图标大小
    @group p.icon-size
    @type number
  */
  --p-overline-icon-size: 2.6666666666666665vw;
  /*
    @desc overline
    @semantic 脚注-字重
    @group p.font-weight
    @type number
    @step 100
  */
  --p-overline-font-weight: 300;
  /*
    @desc overline
    @semantic 脚注-行高
    @group p.line-height
    @type number
  */
  --p-overline-line-height: 120%;
  /*
    @desc overline
    @semantic 脚注-顶部外边距
    @group p.margin-top
  */
  --p-overline-margin-top: var(--s-1);
  /*
    @desc overline
    @semantic 脚注-底部外边距
    @group p.margin-bottom
  */
  --p-overline-margin-bottom: var(--s-1);
  /*
    @desc overline
    @semantic 脚注-缩进
    @group p.indent-size
  */
  --p-overline-indent-size: var(--s-1);
}

/*
  @intermediate
  @component box
  @style
  @display Box
  @chinese 样式
  @family style
*/
:root {
  /*
    @desc min-width
    @senmantic 最小宽
  */
  --box-large-min-width: var(--s-14);
  /*
    @desc min-height
    @senmantic 最小高
  */
  --box-large-min-height: var(--s-11);
  /*
    @desc border-width
    @senmantic 边框宽度
  */
  --box-large-border-width: var(--line-1);
  /*
    @desc broder-radius
    @senmantic 圆角尺寸
  */
  --box-large-border-radius: var(--corner-1);
  /*
    @desc padding
    @senmantic 水平内边距
    @unconfigurable
  */
  --box-large-padding-hoz: var(--s-6);
  /*
    @desc padding
    @senmantic 上下内边距
    @unconfigurable
  */
  --box-large-padding-ver: var(--s-3);
  /*
    @desc padding
    @senmantic 内边距
    @group box-padding
  */
  --box-large-padding: var(--box-large-padding-ver) var(--box-large-padding-hoz);
  /*
    @desc spacing
    @senmantic 元素间隙
  */
  --box-large-spacing: var(--s-3);
  /*
    @desc margin-hoz
    @senmantic 上下外边距
  */
  --box-large-margin-hoz: var(--s-2);
  /*
    @desc margin-ver
    @senmantic 左右外边距
  */
  --box-large-margin-ver: var(--s-4);
  /*
    @desc min-width
    @senmantic 最小宽
  */
  --box-medium-min-width: var(--s-11);
  /*
    @desc min-height
    @senmantic 最小高
  */
  --box-medium-min-height: var(--s-9);
  /*
    @desc border-width
    @senmantic 边框宽度
  */
  --box-medium-border-width: var(--line-1);
  /*
    @desc broder-radius
    @senmantic 圆角尺寸
  */
  --box-medium-border-radius: var(--corner-1);
  /*
    @desc padding
    @senmantic 水平内边距
    @unconfigurable
  */
  --box-medium-padding-hoz: var(--s-4);
  /*
    @desc padding
    @senmantic 上下内边距
    @unconfigurable
  */
  --box-medium-padding-ver: var(--s-2);
  /*
    @desc padding
    @senmantic 内边距
    @unconfigurable
    @type complex
    @group box-padding
  */
  --box-medium-padding: var(--box-medium-padding-ver) var(--box-medium-padding-hoz);
  /*
    @desc spacing
    @senmantic 元素间隙
  */
  --box-medium-spacing: var(--s-2);
  /*
    @desc margin-hoz
    @senmantic 左右外边距
  */
  --box-medium-margin-hoz: var(--s-2);
  /*
    @desc margin-ver
    @senmantic 上下外边距
  */
  --box-medium-margin-ver: var(--s-4);
  /*
    @desc min-width
    @senmantic 最小宽
  */
  --box-small-min-width: var(--s-8);
  /*
    @desc min-height
    @senmantic 最小高
  */
  --box-small-min-height: var(--s-7);
  /*
    @desc border-width
    @senmantic 边框宽度
  */
  --box-small-border-width: var(--line-1);
  /*
    @desc broder-radius
    @senmantic 圆角尺寸
  */
  --box-small-border-radius: var(--corner-1);
  /*
    @desc padding
    @senmantic 水平内边距
    @unconfigurable
  */
  --box-small-padding-hoz: var(--s-3);
  /*
    @desc padding
    @senmantic 上下内边距
    @unconfigurable
  */
  --box-small-padding-ver: var(--s-1);
  /*
    @desc padding
    @senmantic 内边距
    @type complex
  */
  --box-small-padding: var(--box-small-padding-ver) var(--box-small-padding-hoz);
  /*
    @desc spacing
    @senmantic 元素间隙
  */
  --box-small-spacing: var(--s-1);
  /*
    @desc margin-hoz
    @senmantic 左右外边距
  */
  --box-small-margin-hoz: var(--s-1);
  /*
    @desc margin-ver
    @senmantic 上下外边距
  */
  --box-small-margin-ver: var(--s-1);
  --box-primary-solid-border-color: var(--color-brand-3);
  --box-primary-solid-border-color-hover: var(--color-brand-2);
  --box-primary-solid-border-color-active: var(--color-brand-4);
  --box-primary-solid-border-color-disabled: var(--color-brand-1);
  --box-primary-solid-background-color: var(--color-brand-3);
  --box-primary-solid-background-color-hover: var(--color-brand-2);
  --box-primary-solid-background-color-active: var(--color-brand-4);
  --box-primary-solid-background-color-disabled: var(--color-brand-1);
  --box-primary-solid-font-color: var(--color-white);
  --box-primary-solid-font-color-hover: var(--color-white);
  --box-primary-solid-font-color-active: var(--color-white);
  --box-primary-solid-font-color-disabled: var(--color-white);
  --box-primary-solid-icon-color: var(--color-white);
  --box-primary-solid-icon-color-hover: var(--color-white);
  --box-primary-solid-icon-color-active: var(--color-white);
  --box-primary-solid-icon-color-disabled: var(--color-white);
  --box-primary-outline-border-color: var(--color-brand-3);
  --box-primary-outline-border-color-hover: var(--color-brand-2);
  --box-primary-outline-border-color-active: var(--color-brand-4);
  --box-primary-outline-border-color-disabled: var(--color-brand-1);
  --box-primary-outline-background-color: var(--color-transparent);
  --box-primary-outline-background-color-hover: var(--color-transparent);
  --box-primary-outline-background-color-active: var(--color-transparent);
  --box-primary-outline-background-color-disabled: var(--color-transparent);
  --box-primary-outline-font-color: var(--color-brand-3);
  --box-primary-outline-font-color-hover: var(--color-brand-2);
  --box-primary-outline-font-color-active: var(--color-brand-4);
  --box-primary-outline-font-color-disabled: var(--color-brand-1);
  --box-primary-outline-icon-color: var(--color-brand-3);
  --box-primary-outline-icon-color-hover: var(--color-brand-2);
  --box-primary-outline-icon-color-active: var(--color-brand-4);
  --box-primary-outline-icon-color-disabled: var(--color-brand-1);
  --box-primary-text-border-color: var(--color-transparent);
  --box-primary-text-border-color-hover: var(--color-transparent);
  --box-primary-text-border-color-active: var(--color-transparent);
  --box-primary-text-border-color-disabled: var(--color-transparent);
  --box-primary-text-background-color: var(--color-transparent);
  --box-primary-text-background-color-hover: var(--color-transparent);
  --box-primary-text-background-color-active: var(--color-transparent);
  --box-primary-text-background-color-disabled: var(--color-transparent);
  --box-primary-text-font-color: var(--color-brand-3);
  --box-primary-text-font-color-hover: var(--color-brand-2);
  --box-primary-text-font-color-active: var(--color-brand-4);
  --box-primary-text-font-color-disabled: var(--color-brand-1);
  --box-primary-text-icon-color: var(--color-brand-3);
  --box-primary-text-icon-color-hover: var(--color-brand-2);
  --box-primary-text-icon-color-active: var(--color-brand-4);
  --box-primary-text-icon-color-disabled: var(--color-brand-1);
  --box-normal-solid-border-color: var(--color-transparent);
  --box-normal-solid-border-color-hover: var(--color-transparent);
  --box-normal-solid-border-color-active: var(--color-transparent);
  --box-normal-solid-border-color-disabled: var(--color-transparent);
  --box-normal-solid-background-color: var(--color-fill1-2);
  --box-normal-solid-background-color-hover: var(--color-fill1-3);
  --box-normal-solid-background-color-active: var(--color-fill1-4);
  --box-normal-solid-background-color-disabled: var(--color-line1-1);
  --box-normal-solid-font-color: var(--color-text1-4);
  --box-normal-solid-font-color-hover: var(--color-text1-3);
  --box-normal-solid-font-color-active: var(--color-text1-2);
  --box-normal-solid-font-color-disabled: var(--color-text1-1);
  --box-normal-solid-icon-color: var(--color-text1-4);
  --box-normal-solid-icon-color-hover: var(--color-text1-3);
  --box-normal-solid-icon-color-active: var(--color-text1-2);
  --box-normal-solid-icon-color-disabled: var(--color-text1-1);
  --box-normal-outline-border-color: var(--color-line1-4);
  --box-normal-outline-border-color-hover: var(--color-line1-3);
  --box-normal-outline-border-color-active: var(--color-line1-2);
  --box-normal-outline-border-color-disabled: var(--color-line1-1);
  --box-normal-outline-background-color: var(--color-transparent);
  --box-normal-outline-background-color-hover: var(--color-transparent);
  --box-normal-outline-background-color-active: var(--color-transparent);
  --box-normal-outline-background-color-disabled: var(--color-transparent);
  --box-normal-outline-font-color: var(--color-text1-4);
  --box-normal-outline-font-color-hover: var(--color-text1-3);
  --box-normal-outline-font-color-active: var(--color-text1-2);
  --box-normal-outline-font-color-disabled: var(--color-text1-1);
  --box-normal-outline-icon-color: var(--color-text1-4);
  --box-normal-outline-icon-color-hover: var(--color-text1-3);
  --box-normal-outline-icon-color-active: var(--color-text1-2);
  --box-normal-outline-icon-color-disabled: var(--color-text1-1);
  --box-normal-text-border-color: var(--color-transparent);
  --box-normal-text-border-color-hover: var(--color-transparent);
  --box-normal-text-border-color-active: var(--color-transparent);
  --box-normal-text-border-color-disabled: var(--color-transparent);
  --box-normal-text-background-color: var(--color-transparent);
  --box-normal-text-background-color-hover: var(--color-transparent);
  --box-normal-text-background-color-active: var(--color-transparent);
  --box-normal-text-background-color-disabled: var(--color-transparent);
  --box-normal-text-font-color: var(--color-text1-4);
  --box-normal-text-font-color-hover: var(--color-text1-3);
  --box-normal-text-font-color-active: var(--color-text1-2);
  --box-normal-text-font-color-disabled: var(--color-text1-1);
  --box-normal-text-icon-color: var(--color-text1-4);
  --box-normal-text-icon-color-hover: var(--color-text1-3);
  --box-normal-text-icon-color-active: var(--color-text1-2);
  --box-normal-text-icon-color-disabled: var(--color-text1-1);
  --box-inverse-solid-border-color: var(--color-transparent);
  --box-inverse-solid-border-color-hover: var(--color-transparent);
  --box-inverse-solid-border-color-active: var(--color-transparent);
  --box-inverse-solid-border-color-disabled: var(--color-transparent);
  --box-inverse-solid-background-color: var(--color-fill2-4);
  --box-inverse-solid-background-color-hover: var(--color-fill2-3);
  --box-inverse-solid-background-color-active: var(--color-fill2-2);
  --box-inverse-solid-background-color-disabled: var(--color-fill2-1);
  --box-inverse-solid-font-color: var(--color-text2-4);
  --box-inverse-solid-font-color-hover: var(--color-text2-3);
  --box-inverse-solid-font-color-active: var(--color-text2-2);
  --box-inverse-solid-font-color-disabled: var(--color-text2-1);
  --box-inverse-solid-icon-color: var(--color-text2-4);
  --box-inverse-solid-icon-color-hover: var(--color-text2-3);
  --box-inverse-solid-icon-color-active: var(--color-text2-2);
  --box-inverse-solid-icon-color-disabled: var(--color-text2-1);
  --box-inverse-outline-border-color: var(--color-text2-4);
  --box-inverse-outline-border-color-hover: var(--color-text2-3);
  --box-inverse-outline-border-color-active: var(--color-text2-2);
  --box-inverse-outline-border-color-disabled: var(--color-text2-1);
  --box-inverse-outline-background-color: var(--color-transparent);
  --box-inverse-outline-background-color-hover: var(--color-transparent);
  --box-inverse-outline-background-color-active: var(--color-transparent);
  --box-inverse-outline-background-color-disabled: var(--color-transparent);
  --box-inverse-outline-font-color: var(--color-text2-4);
  --box-inverse-outline-font-color-hover: var(--color-text2-3);
  --box-inverse-outline-font-color-active: var(--color-text2-2);
  --box-inverse-outline-font-color-disabled: var(--color-text2-1);
  --box-inverse-outline-icon-color: var(--color-text2-4);
  --box-inverse-outline-icon-color-hover: var(--color-text2-3);
  --box-inverse-outline-icon-color-active: var(--color-text2-2);
  --box-inverse-outline-icon-color-disabled: var(--color-text2-1);
  --box-inverse-text-border-color: var(--color-transparent);
  --box-inverse-text-border-color-hover: var(--color-transparent);
  --box-inverse-text-border-color-active: var(--color-transparent);
  --box-inverse-text-border-color-disabled: var(--color-transparent);
  --box-inverse-text-background-color: var(--color-transparent);
  --box-inverse-text-background-color-hover: var(--color-transparent);
  --box-inverse-text-background-color-active: var(--color-transparent);
  --box-inverse-text-background-color-disabled: var(--color-transparent);
  --box-invers