/**
 * @type mixin-var
 * @name GeneralMixinVars
 * @name_en General Mixin
 */
/**
 * 根据 base-font-size，设置单位尺寸为 rem
 * @desc {en} set the unit size to rem based on base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem(font-size, 14);
 *     .rem(padding, 16, 0);
 * }
 * ```
 */
/**
 * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
 * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem-with-rtl(font-size, 14);
 *     .rem-with-rtl(padding, 16, 0);
 * }
 * ```
 */
/**
 * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
 * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
 * @param @rules 对应的暗黑模式规则
 * @param @rules {en} Corresponding dark mode rules
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-dark-mode-query({
 *         background-color: #000;
 *     });
 * }
 * ```
 */
/**
 * 为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute
 * @param @property css属性名
 * @param @property {en} css property
 * @param @variables token变量名
 * @param @variables {en} token variable name
 * @param @preValues 复合属性css变量前缀
 * @param @preValues {en} prefix for Compound Attribute CSS Variables
 * @param @nextValues 复合属性css变量后缀
 * @param @nextValues {en} suffix for Compound Attribute CSS Variables
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var(background, primary-color);
 *     .use-var(border, primary-color, 1px solid);
 *     .use-var(border, cell-border-width, '', solid black);
 * }
 * ```
 */
/**
 * 为属性设置 transition 变量
 * @desc {en} set the transition variable for the attribute
 * @param @transitionVariable transition 变量名
 * @param @transitionVariable {en} transition variable name
 * @param @backupVariable 备份变量名
 * @param @backupVariable {en} backup variable name
 * @param @property css属性名
 * @param @property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
 * }
 * ```
 */
/**
 * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @variables token 变量名
 * @param @variables {en} token variable name
 * @param @preValues
 * @param @preValues {en}
 * @param @nextValues
 * @param @nextValues {en}
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
 * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @param @rules 自定义的复写规则，默认重置为initial
 * @param @rules {en} customized rewrite rules, default to initial
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-prop-with-rtl(right, auto);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
 * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-value-with-rtl(text-align, left);
 * }
 * ```
 */
/**
 * 在 rtl 模式下，自定义样式规则
 * @desc {en} custom style in RTL mode
 * @param @rules 对应的rtl模式下的规则
 * @param @rules {en} property with rtl
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .style-with-rtl({
 *         transform: scale(-1);
 *     });
 * }
 * ```
 */
/**
 * 0.5px 的边框线
 * @desc {en} a border line of 0.5 pixels
 * @param @color 使用 css 变量为线设置颜色
 * @param @color {en} set border-color by CSS variable
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .hairline-var(line-color);
 *     .hairline-var(line-color, top);
 * }
 * ```
 */
/**
 * 字体加粗
 * @desc {en} font bold
 * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
 * @param @color {en} set color by CSS variable
 * @param @stroke 字体粗细，默认 0.3px
 * @param @stroke {en} font weight, default 0.3 pixel
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .text-medium-var();
 *    .text-medium-var(primary-color, 0.5PX);
 * }
 * ```
 */
/**
 * 1px 边框
 * @desc {en} 1 pixel border
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 使用 css 变量设置边框颜色
 * @param @borderColor {en} set border-color by CSS variable
 * @param @borderRadius border-radius，默认为 0
 * @param @borderRadius {en} border-radius, default value is 0
 * @param @borderWidth border-width，默认为 1px
 * @param @borderWidth {en} border-width, default value is 1 pixel
 * @param @borderStyle border-style，默认为 solid
 * @param @borderStyle {en} border-style, default value is solid
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .onepx-border-var(top, line-color);
 *    .onepx-border-var(all, line-color, 2, 2px, dashed);
 * }
 * ```
 */
/**
 * 元素右下 0.5px 边框
 * @desc {en} 0.5px border on bottom right
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-bottom-right-var(line-color);
 * }
 * ```
 */
/**
 * 元素左上 0.5px 边框
 * @desc {en} 0.5px border on top left
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-top-left-var(line-color);
 * }
 * ```
 */
/**
 * 设置 Loading 组件颜色
 * @desc {en} set Loading component color
 * @param @color 使用 css 变量设置颜色
 * @param @color {en} set color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color-var(primary-color);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 使用 css 变量设置最小字号
 * @param @size {en} set minimum font-size by CSS variable
 * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
 * @param @scale {en} set minimum font-size down text scale，default value is 0.9
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-font-size-var(badge-font-size);
 *    .set-font-size-var(badge-font-size, 0.5);
 * }
 * ```
 */
/**
 * 设置 content-box 盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
 * }
 * ```
 */
/**
 * 设置 Steps 组件颜色
 * @desc {en} set Steps component color
 * @param @color 使用 css 变量设置主颜色
 * @param @color {en} set main step color by CSS variable
 * @param @finish-color 使用 css 变量设置已完成步骤的颜色
 * @param @finish-color {en} set finished step color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color-var(primary-color, lighter-primary-color);
 * }
 * ```
 */
/**
 * @type mixin
 * @name GeneralMixin
 * @name_en General Mixin
 */
/**
 * 文本溢出，支持1行/多行文本
 * @desc {en} text overflow, support single line or multiple lines
 * @param @lines 最大展示行数，默认为1行
 * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 * .demo1{
 *   .text-overflow();
 * }
 * .demo2 {
 *   .text-overflow(2);
 * }
 * ```
 */
/**
 * 禁用用户选择文本
 * @desc {en} disable user selection of text
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .noselect();
 * }
 */
/**
 * 全屏布局
 * @desc {en} full-screen layout
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .full-screen();
 * }
 */
/**
 * 文本加粗，兼容安卓设备
 * @desc {en} text-bold, compatible with Android devices
 * @param @color 文本颜色，默认为currentColor
 * @param @color {en} text color, default to currentColor
 * @param @stroke 文本字符笔触宽度，默认为0.3PX
 * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo1 {
 *   .text-medium();
 * }
 * .demo2 {
 *   .text-medium(#fff, 0.5px);
 * }
 */
/**
 * 消除文本加粗样式，兼容安卓设备
 * @desc {en} remove text-bold, compatible with Android devices
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .remove-text-medium();
 * }
 */
/**
 * 1px(物理像素)边框
 * @desc {en} a border line of 1 pixel
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 边框颜色，默认inherit
 * @param @borderColor {en} border color, default to inherit
 * @param @borderRadius 边框圆角，默认0
 * @param @borderRadius {en} border radius, default to 0
 * @param @borderWidth 边框宽度，默认1px
 * @param @borderWidth {en} border width, default to 1px
 * @param @borderStyle 边框样式，默认solid
 * @param @borderStyle {en} border style, default to solid
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .onepx-border();
 * }
 */
/**
 * 移除0.5px的边框线
 * @desc {en} remove border line of 0.5 pixels
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .remove-hairline(all);
 * }
 * ```
 */
/**
 * 元素右下 0.5px border
 * @desc {en} 0.5px border on bottom right
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-bottom-right(#000);
 * }
 * ```
 */
/**
 * 元素左上 0.5px border
 * @desc {en} 0.5px border on top left
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-top-left(#000);
 * }
 * ```
 */
/**
 * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
 * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
 * @param @origin-property css属性名
 * @param @origin-property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
 * }
 * ```
 */
/**
 * 设置Loading组件颜色
 * @desc {en} set Loading component color
 * @param @color 颜色
 * @param @color {en} color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color(#000);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 最小字号
 * @param @size {en} minimum font-size
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-font-size(10px);
 * }
 * ```
 */
/**
 * 设置content-box盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width(min-width, 300px, 10px, 10px);
 * }
 * ```
 */
/**
 * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
 * @desc {en} set Steps component color
 * @param @color 当前步骤背景、标题文本颜色
 * @param @color {en} color of current step background and title text
 * @param @finish-color 已完成步骤背景色
 * @param @finish-color {en} color of finished step background
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color(#FFB400);
 * }
 * ```
 */
.iconlist-wrapper {
  margin-top: 40px;
  overflow: hidden;
  color:  var(--font-color,  #1d2129 ) ;
}
.iconlist-wrapper .iconlist-title {
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid;
  border-color:  var(--line-color,  #e5e6eb ) ;
}
.iconlist-wrapper .iconlist {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid;
  border-left-color:  var(--line-color,  #e5e6eb ) ;
  box-sizing: border-box;
  overflow: hidden;
}
.iconlist-wrapper .iconlist .icon-cell {
  position: relative;
  width: 16.66%;
  height: 140px;
  padding: 10px;
  box-sizing: border-box;
  float: left;
  cursor: pointer;
  border-right: 1px solid;
  border-right-color:  var(--line-color,  #e5e6eb ) ;
  border-bottom: 1px solid;
  border-bottom-color:  var(--line-color,  #e5e6eb ) ;
}
.iconlist-wrapper .iconlist .icon-cell:hover {
  background-color:  var(--lighter-line-color,  #f2f3f5 ) ;
}
.iconlist-wrapper .iconlist .icon-cell:hover svg {
  -webkit-transform: scale(1.4, 1.4);
          transform: scale(1.4, 1.4);
}
.iconlist-wrapper .iconlist .icon-cell .arco-icon {
  stroke: initial;
}
.iconlist-wrapper .iconlist .icon-cell .icon-name {
  position: absolute;
  width: 100%;
  padding-left: 12px;
  font-size: 12px;
  top: 10px;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.iconlist-wrapper .iconlist .icon-cell .icon-show {
  width: 100%;
  height: 100%;
  line-height: 140px;
  text-align: center;
}
.iconlist-wrapper .iconlist .icon-cell .icon-show svg {
  font-size: 32px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color:  var(--font-color,  #1d2129 ) ;
}
/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
.arco-theme-dark .process-bg-color-with-config,
.arco-theme-dark .process-custom-icon-bg-color-with-config {
  color:  var(--dark-steps-process-with-config-item-icon-color,  rgba(255, 255, 255, 0.9) ) ;
}
.arco-theme-dark .wait-custom-icon-bg-color-with-config {
  background:  var(--dark-steps-wait-icon-num-background,  #2e2e30 ) ;
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .iconlist-wrapper {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark .iconlist-wrapper .iconlist-title {
  border-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .iconlist-wrapper .iconlist {
  border-left-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .iconlist-wrapper .iconlist .icon-cell {
  border-right-color:  var(--dark-line-color,  #484849 ) ;
  border-bottom-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .iconlist-wrapper .iconlist .icon-cell:hover {
  background-color:  var(--dark-lighter-line-color,  #2e2e30 ) ;
}
.arco-theme-dark .iconlist-wrapper .iconlist .icon-cell .icon-show svg {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
/********************* End *************************/

/**
 * @type mixin-var
 * @name GeneralMixinVars
 * @name_en General Mixin
 */
/**
 * 根据 base-font-size，设置单位尺寸为 rem
 * @desc {en} set the unit size to rem based on base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem(font-size, 14);
 *     .rem(padding, 16, 0);
 * }
 * ```
 */
/**
 * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
 * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem-with-rtl(font-size, 14);
 *     .rem-with-rtl(padding, 16, 0);
 * }
 * ```
 */
/**
 * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
 * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
 * @param @rules 对应的暗黑模式规则
 * @param @rules {en} Corresponding dark mode rules
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-dark-mode-query({
 *         background-color: #000;
 *     });
 * }
 * ```
 */
/**
 * 为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute
 * @param @property css属性名
 * @param @property {en} css property
 * @param @variables token变量名
 * @param @variables {en} token variable name
 * @param @preValues 复合属性css变量前缀
 * @param @preValues {en} prefix for Compound Attribute CSS Variables
 * @param @nextValues 复合属性css变量后缀
 * @param @nextValues {en} suffix for Compound Attribute CSS Variables
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var(background, primary-color);
 *     .use-var(border, primary-color, 1px solid);
 *     .use-var(border, cell-border-width, '', solid black);
 * }
 * ```
 */
/**
 * 为属性设置 transition 变量
 * @desc {en} set the transition variable for the attribute
 * @param @transitionVariable transition 变量名
 * @param @transitionVariable {en} transition variable name
 * @param @backupVariable 备份变量名
 * @param @backupVariable {en} backup variable name
 * @param @property css属性名
 * @param @property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
 * }
 * ```
 */
/**
 * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @variables token 变量名
 * @param @variables {en} token variable name
 * @param @preValues
 * @param @preValues {en}
 * @param @nextValues
 * @param @nextValues {en}
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
 * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @param @rules 自定义的复写规则，默认重置为initial
 * @param @rules {en} customized rewrite rules, default to initial
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-prop-with-rtl(right, auto);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
 * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-value-with-rtl(text-align, left);
 * }
 * ```
 */
/**
 * 在 rtl 模式下，自定义样式规则
 * @desc {en} custom style in RTL mode
 * @param @rules 对应的rtl模式下的规则
 * @param @rules {en} property with rtl
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .style-with-rtl({
 *         transform: scale(-1);
 *     });
 * }
 * ```
 */
/**
 * 0.5px 的边框线
 * @desc {en} a border line of 0.5 pixels
 * @param @color 使用 css 变量为线设置颜色
 * @param @color {en} set border-color by CSS variable
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .hairline-var(line-color);
 *     .hairline-var(line-color, top);
 * }
 * ```
 */
/**
 * 字体加粗
 * @desc {en} font bold
 * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
 * @param @color {en} set color by CSS variable
 * @param @stroke 字体粗细，默认 0.3px
 * @param @stroke {en} font weight, default 0.3 pixel
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .text-medium-var();
 *    .text-medium-var(primary-color, 0.5PX);
 * }
 * ```
 */
/**
 * 1px 边框
 * @desc {en} 1 pixel border
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 使用 css 变量设置边框颜色
 * @param @borderColor {en} set border-color by CSS variable
 * @param @borderRadius border-radius，默认为 0
 * @param @borderRadius {en} border-radius, default value is 0
 * @param @borderWidth border-width，默认为 1px
 * @param @borderWidth {en} border-width, default value is 1 pixel
 * @param @borderStyle border-style，默认为 solid
 * @param @borderStyle {en} border-style, default value is solid
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .onepx-border-var(top, line-color);
 *    .onepx-border-var(all, line-color, 2, 2px, dashed);
 * }
 * ```
 */
/**
 * 元素右下 0.5px 边框
 * @desc {en} 0.5px border on bottom right
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-bottom-right-var(line-color);
 * }
 * ```
 */
/**
 * 元素左上 0.5px 边框
 * @desc {en} 0.5px border on top left
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-top-left-var(line-color);
 * }
 * ```
 */
/**
 * 设置 Loading 组件颜色
 * @desc {en} set Loading component color
 * @param @color 使用 css 变量设置颜色
 * @param @color {en} set color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color-var(primary-color);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 使用 css 变量设置最小字号
 * @param @size {en} set minimum font-size by CSS variable
 * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
 * @param @scale {en} set minimum font-size down text scale，default value is 0.9
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-font-size-var(badge-font-size);
 *    .set-font-size-var(badge-font-size, 0.5);
 * }
 * ```
 */
/**
 * 设置 content-box 盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
 * }
 * ```
 */
/**
 * 设置 Steps 组件颜色
 * @desc {en} set Steps component color
 * @param @color 使用 css 变量设置主颜色
 * @param @color {en} set main step color by CSS variable
 * @param @finish-color 使用 css 变量设置已完成步骤的颜色
 * @param @finish-color {en} set finished step color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color-var(primary-color, lighter-primary-color);
 * }
 * ```
 */
/**
 * @type mixin
 * @name GeneralMixin
 * @name_en General Mixin
 */
/**
 * 文本溢出，支持1行/多行文本
 * @desc {en} text overflow, support single line or multiple lines
 * @param @lines 最大展示行数，默认为1行
 * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 * .demo1{
 *   .text-overflow();
 * }
 * .demo2 {
 *   .text-overflow(2);
 * }
 * ```
 */
/**
 * 禁用用户选择文本
 * @desc {en} disable user selection of text
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .noselect();
 * }
 */
/**
 * 全屏布局
 * @desc {en} full-screen layout
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .full-screen();
 * }
 */
/**
 * 文本加粗，兼容安卓设备
 * @desc {en} text-bold, compatible with Android devices
 * @param @color 文本颜色，默认为currentColor
 * @param @color {en} text color, default to currentColor
 * @param @stroke 文本字符笔触宽度，默认为0.3PX
 * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo1 {
 *   .text-medium();
 * }
 * .demo2 {
 *   .text-medium(#fff, 0.5px);
 * }
 */
/**
 * 消除文本加粗样式，兼容安卓设备
 * @desc {en} remove text-bold, compatible with Android devices
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .remove-text-medium();
 * }
 */
/**
 * 1px(物理像素)边框
 * @desc {en} a border line of 1 pixel
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 边框颜色，默认inherit
 * @param @borderColor {en} border color, default to inherit
 * @param @borderRadius 边框圆角，默认0
 * @param @borderRadius {en} border radius, default to 0
 * @param @borderWidth 边框宽度，默认1px
 * @param @borderWidth {en} border width, default to 1px
 * @param @borderStyle 边框样式，默认solid
 * @param @borderStyle {en} border style, default to solid
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .onepx-border();
 * }
 */
/**
 * 移除0.5px的边框线
 * @desc {en} remove border line of 0.5 pixels
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .remove-hairline(all);
 * }
 * ```
 */
/**
 * 元素右下 0.5px border
 * @desc {en} 0.5px border on bottom right
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-bottom-right(#000);
 * }
 * ```
 */
/**
 * 元素左上 0.5px border
 * @desc {en} 0.5px border on top left
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-top-left(#000);
 * }
 * ```
 */
/**
 * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
 * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
 * @param @origin-property css属性名
 * @param @origin-property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
 * }
 * ```
 */
/**
 * 设置Loading组件颜色
 * @desc {en} set Loading component color
 * @param @color 颜色
 * @param @color {en} color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color(#000);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 最小字号
 * @param @size {en} minimum font-size
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-font-size(10px);
 * }
 * ```
 */
/**
 * 设置content-box盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width(min-width, 300px, 10px, 10px);
 * }
 * ```
 */
/**
 * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
 * @desc {en} set Steps component color
 * @param @color 当前步骤背景、标题文本颜色
 * @param @color {en} color of current step background and title text
 * @param @finish-color 已完成步骤背景色
 * @param @finish-color {en} color of finished step background
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color(#FFB400);
 * }
 * ```
 */
.demo-code-container {
  position: relative;
}
.demo-code-container:hover .demo-code-operations {
  display: block;
}
.demo-code-container .demo-code-wrapper {
  padding-top: 48px;
}
.demo-code-container .demo-code-wrapper.no-padding-top {
  padding-top: 24px;
}
.demo-code-container .demo-code-operations {
  position: absolute;
  bottom: 16px;
  right: 16px;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  display: block;
}
.demo-code-container .demo-code-operations-btn:not(.arco-btn-disabled) {
  background-color:  var(--container-background-color,  #FFFFFF ) ;
  border: 1px solid;
  border-color:  var(--line-color,  #e5e6eb ) ;
}
.demo-code-container .demo-code-operations-btn {
  margin-left: 8px;
}
.demo-code-container .demo-code-operations-ide-form {
  display: none;
}
.demo-code-container .demo-code-desc-content {
  margin-bottom: 10px;
  line-height: 1.5;
  color:  var(--sub-font-color,  #4e5969 ) ;
}
.demo-code-container.show-all .demo-code-wrapper .demo-code-content {
  max-height: none !important;
  overflow: auto !important;
}
.demo-code-container.show-all .demo-code-operations .demo-code-operations-spread svg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
.arco-theme-dark .process-bg-color-with-config,
.arco-theme-dark .process-custom-icon-bg-color-with-config {
  color:  var(--dark-steps-process-with-config-item-icon-color,  rgba(255, 255, 255, 0.9) ) ;
}
.arco-theme-dark .wait-custom-icon-bg-color-with-config {
  background:  var(--dark-steps-wait-icon-num-background,  #2e2e30 ) ;
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .demo-code-container .demo-code-operations-btn:not(.arco-btn-disabled) {
  background-color:  var(--dark-container-background-color,  #232324 ) ;
  border-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .demo-code-container .demo-code-desc-content {
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
/********************* End *************************/

/**
 * @type mixin-var
 * @name GeneralMixinVars
 * @name_en General Mixin
 */
/**
 * 根据 base-font-size，设置单位尺寸为 rem
 * @desc {en} set the unit size to rem based on base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem(font-size, 14);
 *     .rem(padding, 16, 0);
 * }
 * ```
 */
/**
 * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
 * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem-with-rtl(font-size, 14);
 *     .rem-with-rtl(padding, 16, 0);
 * }
 * ```
 */
/**
 * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
 * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
 * @param @rules 对应的暗黑模式规则
 * @param @rules {en} Corresponding dark mode rules
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-dark-mode-query({
 *         background-color: #000;
 *     });
 * }
 * ```
 */
/**
 * 为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute
 * @param @property css属性名
 * @param @property {en} css property
 * @param @variables token变量名
 * @param @variables {en} token variable name
 * @param @preValues 复合属性css变量前缀
 * @param @preValues {en} prefix for Compound Attribute CSS Variables
 * @param @nextValues 复合属性css变量后缀
 * @param @nextValues {en} suffix for Compound Attribute CSS Variables
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var(background, primary-color);
 *     .use-var(border, primary-color, 1px solid);
 *     .use-var(border, cell-border-width, '', solid black);
 * }
 * ```
 */
/**
 * 为属性设置 transition 变量
 * @desc {en} set the transition variable for the attribute
 * @param @transitionVariable transition 变量名
 * @param @transitionVariable {en} transition variable name
 * @param @backupVariable 备份变量名
 * @param @backupVariable {en} backup variable name
 * @param @property css属性名
 * @param @property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
 * }
 * ```
 */
/**
 * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @variables token 变量名
 * @param @variables {en} token variable name
 * @param @preValues
 * @param @preValues {en}
 * @param @nextValues
 * @param @nextValues {en}
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
 * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @param @rules 自定义的复写规则，默认重置为initial
 * @param @rules {en} customized rewrite rules, default to initial
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-prop-with-rtl(right, auto);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
 * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-value-with-rtl(text-align, left);
 * }
 * ```
 */
/**
 * 在 rtl 模式下，自定义样式规则
 * @desc {en} custom style in RTL mode
 * @param @rules 对应的rtl模式下的规则
 * @param @rules {en} property with rtl
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .style-with-rtl({
 *         transform: scale(-1);
 *     });
 * }
 * ```
 */
/**
 * 0.5px 的边框线
 * @desc {en} a border line of 0.5 pixels
 * @param @color 使用 css 变量为线设置颜色
 * @param @color {en} set border-color by CSS variable
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .hairline-var(line-color);
 *     .hairline-var(line-color, top);
 * }
 * ```
 */
/**
 * 字体加粗
 * @desc {en} font bold
 * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
 * @param @color {en} set color by CSS variable
 * @param @stroke 字体粗细，默认 0.3px
 * @param @stroke {en} font weight, default 0.3 pixel
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .text-medium-var();
 *    .text-medium-var(primary-color, 0.5PX);
 * }
 * ```
 */
/**
 * 1px 边框
 * @desc {en} 1 pixel border
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 使用 css 变量设置边框颜色
 * @param @borderColor {en} set border-color by CSS variable
 * @param @borderRadius border-radius，默认为 0
 * @param @borderRadius {en} border-radius, default value is 0
 * @param @borderWidth border-width，默认为 1px
 * @param @borderWidth {en} border-width, default value is 1 pixel
 * @param @borderStyle border-style，默认为 solid
 * @param @borderStyle {en} border-style, default value is solid
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .onepx-border-var(top, line-color);
 *    .onepx-border-var(all, line-color, 2, 2px, dashed);
 * }
 * ```
 */
/**
 * 元素右下 0.5px 边框
 * @desc {en} 0.5px border on bottom right
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-bottom-right-var(line-color);
 * }
 * ```
 */
/**
 * 元素左上 0.5px 边框
 * @desc {en} 0.5px border on top left
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-top-left-var(line-color);
 * }
 * ```
 */
/**
 * 设置 Loading 组件颜色
 * @desc {en} set Loading component color
 * @param @color 使用 css 变量设置颜色
 * @param @color {en} set color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color-var(primary-color);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 使用 css 变量设置最小字号
 * @param @size {en} set minimum font-size by CSS variable
 * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
 * @param @scale {en} set minimum font-size down text scale，default value is 0.9
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-font-size-var(badge-font-size);
 *    .set-font-size-var(badge-font-size, 0.5);
 * }
 * ```
 */
/**
 * 设置 content-box 盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
 * }
 * ```
 */
/**
 * 设置 Steps 组件颜色
 * @desc {en} set Steps component color
 * @param @color 使用 css 变量设置主颜色
 * @param @color {en} set main step color by CSS variable
 * @param @finish-color 使用 css 变量设置已完成步骤的颜色
 * @param @finish-color {en} set finished step color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color-var(primary-color, lighter-primary-color);
 * }
 * ```
 */
/**
 * @type mixin
 * @name GeneralMixin
 * @name_en General Mixin
 */
/**
 * 文本溢出，支持1行/多行文本
 * @desc {en} text overflow, support single line or multiple lines
 * @param @lines 最大展示行数，默认为1行
 * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 * .demo1{
 *   .text-overflow();
 * }
 * .demo2 {
 *   .text-overflow(2);
 * }
 * ```
 */
/**
 * 禁用用户选择文本
 * @desc {en} disable user selection of text
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .noselect();
 * }
 */
/**
 * 全屏布局
 * @desc {en} full-screen layout
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .full-screen();
 * }
 */
/**
 * 文本加粗，兼容安卓设备
 * @desc {en} text-bold, compatible with Android devices
 * @param @color 文本颜色，默认为currentColor
 * @param @color {en} text color, default to currentColor
 * @param @stroke 文本字符笔触宽度，默认为0.3PX
 * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo1 {
 *   .text-medium();
 * }
 * .demo2 {
 *   .text-medium(#fff, 0.5px);
 * }
 */
/**
 * 消除文本加粗样式，兼容安卓设备
 * @desc {en} remove text-bold, compatible with Android devices
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .remove-text-medium();
 * }
 */
/**
 * 1px(物理像素)边框
 * @desc {en} a border line of 1 pixel
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 边框颜色，默认inherit
 * @param @borderColor {en} border color, default to inherit
 * @param @borderRadius 边框圆角，默认0
 * @param @borderRadius {en} border radius, default to 0
 * @param @borderWidth 边框宽度，默认1px
 * @param @borderWidth {en} border width, default to 1px
 * @param @borderStyle 边框样式，默认solid
 * @param @borderStyle {en} border style, default to solid
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .onepx-border();
 * }
 */
/**
 * 移除0.5px的边框线
 * @desc {en} remove border line of 0.5 pixels
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .remove-hairline(all);
 * }
 * ```
 */
/**
 * 元素右下 0.5px border
 * @desc {en} 0.5px border on bottom right
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-bottom-right(#000);
 * }
 * ```
 */
/**
 * 元素左上 0.5px border
 * @desc {en} 0.5px border on top left
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-top-left(#000);
 * }
 * ```
 */
/**
 * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
 * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
 * @param @origin-property css属性名
 * @param @origin-property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
 * }
 * ```
 */
/**
 * 设置Loading组件颜色
 * @desc {en} set Loading component color
 * @param @color 颜色
 * @param @color {en} color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color(#000);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 最小字号
 * @param @size {en} minimum font-size
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-font-size(10px);
 * }
 * ```
 */
/**
 * 设置content-box盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width(min-width, 300px, 10px, 10px);
 * }
 * ```
 */
/**
 * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
 * @desc {en} set Steps component color
 * @param @color 当前步骤背景、标题文本颜色
 * @param @color {en} color of current step background and title text
 * @param @finish-color 已完成步骤背景色
 * @param @finish-color {en} color of finished step background
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color(#FFB400);
 * }
 * ```
 */
.home-code-popover-inner {
  display: inline-block;
}
.home-code-popover {
  position: fixed;
  padding-top: 9px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.home-code-popover-content {
  position: relative;
  background-color:  var(--container-background-color,  #FFFFFF ) ;
  padding: 14px 20px 20px;
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid;
  border-color:  var(--line-color,  #e5e6eb ) ;
  color:  var(--font-color,  #1d2129 ) ;
  text-align: center;
}
.home-code-popover-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: rotate(45deg) translateX(-50%);
          transform: rotate(45deg) translateX(-50%);
  width: 9px;
  height: 9px;
  background: inherit;
  border: inherit;
  border-right-width: 0;
  border-bottom-width: 0;
  margin-top: -2px;
  border-top-left-radius: 2px;
}
.home-code-popover .code {
  width: 120px;
  height: 120px;
  margin-top: 8px;
  display: block;
}
/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
.arco-theme-dark .process-bg-color-with-config,
.arco-theme-dark .process-custom-icon-bg-color-with-config {
  color:  var(--dark-steps-process-with-config-item-icon-color,  rgba(255, 255, 255, 0.9) ) ;
}
.arco-theme-dark .wait-custom-icon-bg-color-with-config {
  background:  var(--dark-steps-wait-icon-num-background,  #2e2e30 ) ;
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .home-code-popover-content {
  background-color:  var(--dark-container-background-color,  #232324 ) ;
  border-color:  var(--dark-line-color,  #484849 ) ;
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
/********************* End *************************/

/**
 * @type mixin-var
 * @name GeneralMixinVars
 * @name_en General Mixin
 */
/**
 * 根据 base-font-size，设置单位尺寸为 rem
 * @desc {en} set the unit size to rem based on base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem(font-size, 14);
 *     .rem(padding, 16, 0);
 * }
 * ```
 */
/**
 * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
 * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem-with-rtl(font-size, 14);
 *     .rem-with-rtl(padding, 16, 0);
 * }
 * ```
 */
/**
 * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
 * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
 * @param @rules 对应的暗黑模式规则
 * @param @rules {en} Corresponding dark mode rules
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-dark-mode-query({
 *         background-color: #000;
 *     });
 * }
 * ```
 */
/**
 * 为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute
 * @param @property css属性名
 * @param @property {en} css property
 * @param @variables token变量名
 * @param @variables {en} token variable name
 * @param @preValues 复合属性css变量前缀
 * @param @preValues {en} prefix for Compound Attribute CSS Variables
 * @param @nextValues 复合属性css变量后缀
 * @param @nextValues {en} suffix for Compound Attribute CSS Variables
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var(background, primary-color);
 *     .use-var(border, primary-color, 1px solid);
 *     .use-var(border, cell-border-width, '', solid black);
 * }
 * ```
 */
/**
 * 为属性设置 transition 变量
 * @desc {en} set the transition variable for the attribute
 * @param @transitionVariable transition 变量名
 * @param @transitionVariable {en} transition variable name
 * @param @backupVariable 备份变量名
 * @param @backupVariable {en} backup variable name
 * @param @property css属性名
 * @param @property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
 * }
 * ```
 */
/**
 * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @variables token 变量名
 * @param @variables {en} token variable name
 * @param @preValues
 * @param @preValues {en}
 * @param @nextValues
 * @param @nextValues {en}
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
 * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @param @rules 自定义的复写规则，默认重置为initial
 * @param @rules {en} customized rewrite rules, default to initial
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-prop-with-rtl(right, auto);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
 * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-value-with-rtl(text-align, left);
 * }
 * ```
 */
/**
 * 在 rtl 模式下，自定义样式规则
 * @desc {en} custom style in RTL mode
 * @param @rules 对应的rtl模式下的规则
 * @param @rules {en} property with rtl
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .style-with-rtl({
 *         transform: scale(-1);
 *     });
 * }
 * ```
 */
/**
 * 0.5px 的边框线
 * @desc {en} a border line of 0.5 pixels
 * @param @color 使用 css 变量为线设置颜色
 * @param @color {en} set border-color by CSS variable
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .hairline-var(line-color);
 *     .hairline-var(line-color, top);
 * }
 * ```
 */
/**
 * 字体加粗
 * @desc {en} font bold
 * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
 * @param @color {en} set color by CSS variable
 * @param @stroke 字体粗细，默认 0.3px
 * @param @stroke {en} font weight, default 0.3 pixel
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .text-medium-var();
 *    .text-medium-var(primary-color, 0.5PX);
 * }
 * ```
 */
/**
 * 1px 边框
 * @desc {en} 1 pixel border
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 使用 css 变量设置边框颜色
 * @param @borderColor {en} set border-color by CSS variable
 * @param @borderRadius border-radius，默认为 0
 * @param @borderRadius {en} border-radius, default value is 0
 * @param @borderWidth border-width，默认为 1px
 * @param @borderWidth {en} border-width, default value is 1 pixel
 * @param @borderStyle border-style，默认为 solid
 * @param @borderStyle {en} border-style, default value is solid
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .onepx-border-var(top, line-color);
 *    .onepx-border-var(all, line-color, 2, 2px, dashed);
 * }
 * ```
 */
/**
 * 元素右下 0.5px 边框
 * @desc {en} 0.5px border on bottom right
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-bottom-right-var(line-color);
 * }
 * ```
 */
/**
 * 元素左上 0.5px 边框
 * @desc {en} 0.5px border on top left
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-top-left-var(line-color);
 * }
 * ```
 */
/**
 * 设置 Loading 组件颜色
 * @desc {en} set Loading component color
 * @param @color 使用 css 变量设置颜色
 * @param @color {en} set color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color-var(primary-color);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 使用 css 变量设置最小字号
 * @param @size {en} set minimum font-size by CSS variable
 * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
 * @param @scale {en} set minimum font-size down text scale，default value is 0.9
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-font-size-var(badge-font-size);
 *    .set-font-size-var(badge-font-size, 0.5);
 * }
 * ```
 */
/**
 * 设置 content-box 盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
 * }
 * ```
 */
/**
 * 设置 Steps 组件颜色
 * @desc {en} set Steps component color
 * @param @color 使用 css 变量设置主颜色
 * @param @color {en} set main step color by CSS variable
 * @param @finish-color 使用 css 变量设置已完成步骤的颜色
 * @param @finish-color {en} set finished step color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color-var(primary-color, lighter-primary-color);
 * }
 * ```
 */
/**
 * @type mixin
 * @name GeneralMixin
 * @name_en General Mixin
 */
/**
 * 文本溢出，支持1行/多行文本
 * @desc {en} text overflow, support single line or multiple lines
 * @param @lines 最大展示行数，默认为1行
 * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 * .demo1{
 *   .text-overflow();
 * }
 * .demo2 {
 *   .text-overflow(2);
 * }
 * ```
 */
/**
 * 禁用用户选择文本
 * @desc {en} disable user selection of text
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .noselect();
 * }
 */
/**
 * 全屏布局
 * @desc {en} full-screen layout
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .full-screen();
 * }
 */
/**
 * 文本加粗，兼容安卓设备
 * @desc {en} text-bold, compatible with Android devices
 * @param @color 文本颜色，默认为currentColor
 * @param @color {en} text color, default to currentColor
 * @param @stroke 文本字符笔触宽度，默认为0.3PX
 * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo1 {
 *   .text-medium();
 * }
 * .demo2 {
 *   .text-medium(#fff, 0.5px);
 * }
 */
/**
 * 消除文本加粗样式，兼容安卓设备
 * @desc {en} remove text-bold, compatible with Android devices
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .remove-text-medium();
 * }
 */
/**
 * 1px(物理像素)边框
 * @desc {en} a border line of 1 pixel
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 边框颜色，默认inherit
 * @param @borderColor {en} border color, default to inherit
 * @param @borderRadius 边框圆角，默认0
 * @param @borderRadius {en} border radius, default to 0
 * @param @borderWidth 边框宽度，默认1px
 * @param @borderWidth {en} border width, default to 1px
 * @param @borderStyle 边框样式，默认solid
 * @param @borderStyle {en} border style, default to solid
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .onepx-border();
 * }
 */
/**
 * 移除0.5px的边框线
 * @desc {en} remove border line of 0.5 pixels
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .remove-hairline(all);
 * }
 * ```
 */
/**
 * 元素右下 0.5px border
 * @desc {en} 0.5px border on bottom right
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-bottom-right(#000);
 * }
 * ```
 */
/**
 * 元素左上 0.5px border
 * @desc {en} 0.5px border on top left
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-top-left(#000);
 * }
 * ```
 */
/**
 * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
 * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
 * @param @origin-property css属性名
 * @param @origin-property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
 * }
 * ```
 */
/**
 * 设置Loading组件颜色
 * @desc {en} set Loading component color
 * @param @color 颜色
 * @param @color {en} color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color(#000);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 最小字号
 * @param @size {en} minimum font-size
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-font-size(10px);
 * }
 * ```
 */
/**
 * 设置content-box盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width(min-width, 300px, 10px, 10px);
 * }
 * ```
 */
/**
 * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
 * @desc {en} set Steps component color
 * @param @color 当前步骤背景、标题文本颜色
 * @param @color {en} color of current step background and title text
 * @param @finish-color 已完成步骤背景色
 * @param @finish-color {en} color of finished step background
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color(#FFB400);
 * }
 * ```
 */
.arco-logo-picture {
  color:  var(--font-color,  #1d2129 ) ;
}
/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
.arco-theme-dark .process-bg-color-with-config,
.arco-theme-dark .process-custom-icon-bg-color-with-config {
  color:  var(--dark-steps-process-with-config-item-icon-color,  rgba(255, 255, 255, 0.9) ) ;
}
.arco-theme-dark .wait-custom-icon-bg-color-with-config {
  background:  var(--dark-steps-wait-icon-num-background,  #2e2e30 ) ;
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .arco-logo-picture {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
/********************* End *************************/

/**
 * @type mixin-var
 * @name GeneralMixinVars
 * @name_en General Mixin
 */
/**
 * 根据 base-font-size，设置单位尺寸为 rem
 * @desc {en} set the unit size to rem based on base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem(font-size, 14);
 *     .rem(padding, 16, 0);
 * }
 * ```
 */
/**
 * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
 * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem-with-rtl(font-size, 14);
 *     .rem-with-rtl(padding, 16, 0);
 * }
 * ```
 */
/**
 * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
 * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
 * @param @rules 对应的暗黑模式规则
 * @param @rules {en} Corresponding dark mode rules
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-dark-mode-query({
 *         background-color: #000;
 *     });
 * }
 * ```
 */
/**
 * 为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute
 * @param @property css属性名
 * @param @property {en} css property
 * @param @variables token变量名
 * @param @variables {en} token variable name
 * @param @preValues 复合属性css变量前缀
 * @param @preValues {en} prefix for Compound Attribute CSS Variables
 * @param @nextValues 复合属性css变量后缀
 * @param @nextValues {en} suffix for Compound Attribute CSS Variables
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var(background, primary-color);
 *     .use-var(border, primary-color, 1px solid);
 *     .use-var(border, cell-border-width, '', solid black);
 * }
 * ```
 */
/**
 * 为属性设置 transition 变量
 * @desc {en} set the transition variable for the attribute
 * @param @transitionVariable transition 变量名
 * @param @transitionVariable {en} transition variable name
 * @param @backupVariable 备份变量名
 * @param @backupVariable {en} backup variable name
 * @param @property css属性名
 * @param @property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
 * }
 * ```
 */
/**
 * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @variables token 变量名
 * @param @variables {en} token variable name
 * @param @preValues
 * @param @preValues {en}
 * @param @nextValues
 * @param @nextValues {en}
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
 * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @param @rules 自定义的复写规则，默认重置为initial
 * @param @rules {en} customized rewrite rules, default to initial
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-prop-with-rtl(right, auto);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
 * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-value-with-rtl(text-align, left);
 * }
 * ```
 */
/**
 * 在 rtl 模式下，自定义样式规则
 * @desc {en} custom style in RTL mode
 * @param @rules 对应的rtl模式下的规则
 * @param @rules {en} property with rtl
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .style-with-rtl({
 *         transform: scale(-1);
 *     });
 * }
 * ```
 */
/**
 * 0.5px 的边框线
 * @desc {en} a border line of 0.5 pixels
 * @param @color 使用 css 变量为线设置颜色
 * @param @color {en} set border-color by CSS variable
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .hairline-var(line-color);
 *     .hairline-var(line-color, top);
 * }
 * ```
 */
/**
 * 字体加粗
 * @desc {en} font bold
 * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
 * @param @color {en} set color by CSS variable
 * @param @stroke 字体粗细，默认 0.3px
 * @param @stroke {en} font weight, default 0.3 pixel
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .text-medium-var();
 *    .text-medium-var(primary-color, 0.5PX);
 * }
 * ```
 */
/**
 * 1px 边框
 * @desc {en} 1 pixel border
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 使用 css 变量设置边框颜色
 * @param @borderColor {en} set border-color by CSS variable
 * @param @borderRadius border-radius，默认为 0
 * @param @borderRadius {en} border-radius, default value is 0
 * @param @borderWidth border-width，默认为 1px
 * @param @borderWidth {en} border-width, default value is 1 pixel
 * @param @borderStyle border-style，默认为 solid
 * @param @borderStyle {en} border-style, default value is solid
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .onepx-border-var(top, line-color);
 *    .onepx-border-var(all, line-color, 2, 2px, dashed);
 * }
 * ```
 */
/**
 * 元素右下 0.5px 边框
 * @desc {en} 0.5px border on bottom right
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-bottom-right-var(line-color);
 * }
 * ```
 */
/**
 * 元素左上 0.5px 边框
 * @desc {en} 0.5px border on top left
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-top-left-var(line-color);
 * }
 * ```
 */
/**
 * 设置 Loading 组件颜色
 * @desc {en} set Loading component color
 * @param @color 使用 css 变量设置颜色
 * @param @color {en} set color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color-var(primary-color);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 使用 css 变量设置最小字号
 * @param @size {en} set minimum font-size by CSS variable
 * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
 * @param @scale {en} set minimum font-size down text scale，default value is 0.9
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-font-size-var(badge-font-size);
 *    .set-font-size-var(badge-font-size, 0.5);
 * }
 * ```
 */
/**
 * 设置 content-box 盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
 * }
 * ```
 */
/**
 * 设置 Steps 组件颜色
 * @desc {en} set Steps component color
 * @param @color 使用 css 变量设置主颜色
 * @param @color {en} set main step color by CSS variable
 * @param @finish-color 使用 css 变量设置已完成步骤的颜色
 * @param @finish-color {en} set finished step color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color-var(primary-color, lighter-primary-color);
 * }
 * ```
 */
/**
 * @type mixin
 * @name GeneralMixin
 * @name_en General Mixin
 */
/**
 * 文本溢出，支持1行/多行文本
 * @desc {en} text overflow, support single line or multiple lines
 * @param @lines 最大展示行数，默认为1行
 * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 * .demo1{
 *   .text-overflow();
 * }
 * .demo2 {
 *   .text-overflow(2);
 * }
 * ```
 */
/**
 * 禁用用户选择文本
 * @desc {en} disable user selection of text
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .noselect();
 * }
 */
/**
 * 全屏布局
 * @desc {en} full-screen layout
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .full-screen();
 * }
 */
/**
 * 文本加粗，兼容安卓设备
 * @desc {en} text-bold, compatible with Android devices
 * @param @color 文本颜色，默认为currentColor
 * @param @color {en} text color, default to currentColor
 * @param @stroke 文本字符笔触宽度，默认为0.3PX
 * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo1 {
 *   .text-medium();
 * }
 * .demo2 {
 *   .text-medium(#fff, 0.5px);
 * }
 */
/**
 * 消除文本加粗样式，兼容安卓设备
 * @desc {en} remove text-bold, compatible with Android devices
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .remove-text-medium();
 * }
 */
/**
 * 1px(物理像素)边框
 * @desc {en} a border line of 1 pixel
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 边框颜色，默认inherit
 * @param @borderColor {en} border color, default to inherit
 * @param @borderRadius 边框圆角，默认0
 * @param @borderRadius {en} border radius, default to 0
 * @param @borderWidth 边框宽度，默认1px
 * @param @borderWidth {en} border width, default to 1px
 * @param @borderStyle 边框样式，默认solid
 * @param @borderStyle {en} border style, default to solid
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .onepx-border();
 * }
 */
/**
 * 移除0.5px的边框线
 * @desc {en} remove border line of 0.5 pixels
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .remove-hairline(all);
 * }
 * ```
 */
/**
 * 元素右下 0.5px border
 * @desc {en} 0.5px border on bottom right
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-bottom-right(#000);
 * }
 * ```
 */
/**
 * 元素左上 0.5px border
 * @desc {en} 0.5px border on top left
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-top-left(#000);
 * }
 * ```
 */
/**
 * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
 * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
 * @param @origin-property css属性名
 * @param @origin-property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
 * }
 * ```
 */
/**
 * 设置Loading组件颜色
 * @desc {en} set Loading component color
 * @param @color 颜色
 * @param @color {en} color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color(#000);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 最小字号
 * @param @size {en} minimum font-size
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-font-size(10px);
 * }
 * ```
 */
/**
 * 设置content-box盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width(min-width, 300px, 10px, 10px);
 * }
 * ```
 */
/**
 * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
 * @desc {en} set Steps component color
 * @param @color 当前步骤背景、标题文本颜色
 * @param @color {en} color of current step background and title text
 * @param @finish-color 已完成步骤背景色
 * @param @finish-color {en} color of finished step background
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color(#FFB400);
 * }
 * ```
 */
.arcodesign-pc-header {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  right: 0;
  height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  min-width: 1320px;
  border-bottom: 1px solid;
  background-color:  var(--container-background-color,  #FFFFFF ) ;
  border-bottom-color:  var(--line-color,  #e5e6eb ) ;
  box-sizing: border-box;
}
.arcodesign-pc-header-logo {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  width: 260px;
  height: 60px;
  padding-left: 24px;
}
.arcodesign-pc-header-logo-btn {
  width: 32px;
  height: 32px;
  margin-right: 17px;
}
.arcodesign-pc-header-logo svg {
  max-height: 30px;
}
.arcodesign-pc-header-content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.arcodesign-pc-header-content-wrapper {
  position: relative;
  width: 100%;
  height: 60px;
  box-sizing: border-box;
}
.arcodesign-pc-header-search {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  float: left;
  height: 60px;
}
.arcodesign-pc-header-search .arco-input {
  width: 246px;
  padding-left: 12px;
  padding-right: 0;
  border-radius: 0;
  border: none;
  background: 0 0;
}
.arcodesign-pc-header-search .arco-input-inner-wrapper {
  background-color: transparent;
  border-color: transparent;
}
.arcodesign-pc-header-search .arco-input-inner-wrapper:hover {
  background-color:  var(--line-color,  #e5e6eb ) ;
}
.arcodesign-pc-header-search .arco-input-inner-wrapper svg {
  color:  var(--sub-info-font-color,  #86909c ) ;
}
.arcodesign-pc-header-search .arco-input-inner-wrapper-focus.arco-input-inner-wrapper,
.arcodesign-pc-header-search .arco-search-input-open .arco-input-inner-wrapper {
  background-color: transparent;
  border-color:  var(--primary-color,  #165DFF ) ;
}
.arcodesign-pc-header-search .arco-input-inner-wrapper-focus.arco-input-inner-wrapper svg,
.arcodesign-pc-header-search .arco-search-input-open .arco-input-inner-wrapper svg {
  color:  var(--sub-font-color,  #4e5969 ) ;
}
.arcodesign-pc-header-search .arco-input-group-prefix svg {
  width: 16px;
  height: 16px;
}
.arcodesign-pc-header-search .arco-input-group-wrapper {
  background-color:  var(--lighter-line-color,  #f2f3f5 ) ;
}
.arcodesign-pc-header .highlight-word {
  font-weight: bold;
  color:  var(--primary-color,  #165DFF ) ;
}
.arcodesign-pc-header .arcodesign-pc-search-title {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 2px;
}
.arcodesign-pc-header .arcodesign-pc-search-summary {
  font-size: 12px;
  color:  var(--sub-font-color,  #4e5969 ) ;
  padding: 12px 20px 4px 20px;
  font-weight: 400;
}
.arcodesign-pc-header .arcodesign-pc-search-loading {
  height: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  font-size: 12px;
  font-weight: 400;
  color:  var(--sub-font-color,  #4e5969 ) ;
}
.arcodesign-pc-header .arcodesign-pc-search-nodata {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-weight: 400;
}
.arcodesign-pc-header-nav-bar {
  float: right;
  height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.arcodesign-pc-header .header-language-set {
  height: 27px;
  color:  var(--font-color,  #1d2129 ) ;
  font-weight: 500;
  padding: 0 8px;
}
.arcodesign-pc-header-tabs {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.arcodesign-pc-header-tabs-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 0 14px;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.arcodesign-pc-header-tabs-item-inner {
  position: relative;
  padding: 3px 8px;
  font-weight: 500;
  color:  var(--font-color,  #1d2129 ) ;
  font-size: 14px;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.arcodesign-pc-header-tabs-item-inner.active {
  color:  var(--primary-color,  #165DFF ) ;
  cursor: default;
}
.arcodesign-pc-header-tabs-item-inner.active:after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -18px;
  height: 3px;
  background-color:  var(--primary-color,  #165DFF ) ;
}
.arcodesign-pc-header-tabs-item-inner:hover {
  background-color:  var(--lighter-line-color,  #f2f3f5 ) ;
}
.arcodesign-pc-header-tabs-item.language-item {
  border-left: 1px solid;
  border-left-color:  var(--line-color,  #e5e6eb ) ;
  margin-left: 14px;
}
.arcodesign-pc-header-tabs-item a {
  display: contents;
  color:  var(--primary-color,  #165DFF ) ;
}
.arcodesign-pc-header-tabs-item svg {
  font-size: 22px;
}
.arcodesign-pc-header-tabs-item .header-language-set svg {
  font-size: 12px;
}
.arcodesign-pc-header-tabs-item .header-language-set span,
.arcodesign-pc-header-tabs-item .header-language-set svg {
  vertical-align: middle;
}
.arcodesign-pc-header-tabs-item .placeholder {
  width: 58px;
  height: 22px;
}
.arcodesign-pc-header-tabs-item.gitlab {
  color:  var(--primary-color,  #165DFF ) ;
}
/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
.arco-theme-dark .process-bg-color-with-config,
.arco-theme-dark .process-custom-icon-bg-color-with-config {
  color:  var(--dark-steps-process-with-config-item-icon-color,  rgba(255, 255, 255, 0.9) ) ;
}
.arco-theme-dark .wait-custom-icon-bg-color-with-config {
  background:  var(--dark-steps-wait-icon-num-background,  #2e2e30 ) ;
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .arcodesign-pc-header {
  background-color:  var(--dark-container-background-color,  #232324 ) ;
  border-bottom-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .arcodesign-pc-header-search .arco-input-inner-wrapper:hover {
  background-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .arcodesign-pc-header-search .arco-input-inner-wrapper svg {
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .arcodesign-pc-header-search .arco-input-inner-wrapper-focus.arco-input-inner-wrapper,
.arco-theme-dark .arcodesign-pc-header-search .arco-search-input-open .arco-input-inner-wrapper {
  border-color:  var(--dark-primary-color,  #3C7EFF ) ;
}
.arco-theme-dark .arcodesign-pc-header-search .arco-input-inner-wrapper-focus.arco-input-inner-wrapper svg,
.arco-theme-dark .arcodesign-pc-header-search .arco-search-input-open .arco-input-inner-wrapper svg {
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
.arco-theme-dark .arcodesign-pc-header-search .arco-input-group-wrapper {
  background-color:  var(--dark-lighter-line-color,  #2e2e30 ) ;
}
.arco-theme-dark .arcodesign-pc-header .highlight-word {
  color:  var(--dark-primary-color,  #3C7EFF ) ;
}
.arco-theme-dark .arcodesign-pc-header .arcodesign-pc-search-summary {
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
.arco-theme-dark .arcodesign-pc-header .arcodesign-pc-search-loading {
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
.arco-theme-dark .arcodesign-pc-header .header-language-set {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark .arcodesign-pc-header-tabs-item-inner {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark .arcodesign-pc-header-tabs-item-inner.active {
  color:  var(--dark-primary-color,  #3C7EFF ) ;
}
.arco-theme-dark .arcodesign-pc-header-tabs-item-inner.active:after {
  background-color:  var(--dark-primary-color,  #3C7EFF ) ;
}
.arco-theme-dark .arcodesign-pc-header-tabs-item-inner:hover {
  background-color:  var(--dark-lighter-line-color,  #2e2e30 ) ;
}
.arco-theme-dark .arcodesign-pc-header-tabs-item.language-item {
  border-left-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .arcodesign-pc-header-tabs-item a {
  color:  var(--dark-primary-color,  #3C7EFF ) ;
}
.arco-theme-dark .arcodesign-pc-header-tabs-item.gitlab {
  color:  var(--dark-primary-color,  #3C7EFF ) ;
}
/********************* End *************************/

/**
 * @type mixin-var
 * @name GeneralMixinVars
 * @name_en General Mixin
 */
/**
 * 根据 base-font-size，设置单位尺寸为 rem
 * @desc {en} set the unit size to rem based on base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem(font-size, 14);
 *     .rem(padding, 16, 0);
 * }
 * ```
 */
/**
 * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
 * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem-with-rtl(font-size, 14);
 *     .rem-with-rtl(padding, 16, 0);
 * }
 * ```
 */
/**
 * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
 * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
 * @param @rules 对应的暗黑模式规则
 * @param @rules {en} Corresponding dark mode rules
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-dark-mode-query({
 *         background-color: #000;
 *     });
 * }
 * ```
 */
/**
 * 为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute
 * @param @property css属性名
 * @param @property {en} css property
 * @param @variables token变量名
 * @param @variables {en} token variable name
 * @param @preValues 复合属性css变量前缀
 * @param @preValues {en} prefix for Compound Attribute CSS Variables
 * @param @nextValues 复合属性css变量后缀
 * @param @nextValues {en} suffix for Compound Attribute CSS Variables
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var(background, primary-color);
 *     .use-var(border, primary-color, 1px solid);
 *     .use-var(border, cell-border-width, '', solid black);
 * }
 * ```
 */
/**
 * 为属性设置 transition 变量
 * @desc {en} set the transition variable for the attribute
 * @param @transitionVariable transition 变量名
 * @param @transitionVariable {en} transition variable name
 * @param @backupVariable 备份变量名
 * @param @backupVariable {en} backup variable name
 * @param @property css属性名
 * @param @property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
 * }
 * ```
 */
/**
 * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @variables token 变量名
 * @param @variables {en} token variable name
 * @param @preValues
 * @param @preValues {en}
 * @param @nextValues
 * @param @nextValues {en}
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
 * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @param @rules 自定义的复写规则，默认重置为initial
 * @param @rules {en} customized rewrite rules, default to initial
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-prop-with-rtl(right, auto);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
 * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-value-with-rtl(text-align, left);
 * }
 * ```
 */
/**
 * 在 rtl 模式下，自定义样式规则
 * @desc {en} custom style in RTL mode
 * @param @rules 对应的rtl模式下的规则
 * @param @rules {en} property with rtl
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .style-with-rtl({
 *         transform: scale(-1);
 *     });
 * }
 * ```
 */
/**
 * 0.5px 的边框线
 * @desc {en} a border line of 0.5 pixels
 * @param @color 使用 css 变量为线设置颜色
 * @param @color {en} set border-color by CSS variable
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .hairline-var(line-color);
 *     .hairline-var(line-color, top);
 * }
 * ```
 */
/**
 * 字体加粗
 * @desc {en} font bold
 * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
 * @param @color {en} set color by CSS variable
 * @param @stroke 字体粗细，默认 0.3px
 * @param @stroke {en} font weight, default 0.3 pixel
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .text-medium-var();
 *    .text-medium-var(primary-color, 0.5PX);
 * }
 * ```
 */
/**
 * 1px 边框
 * @desc {en} 1 pixel border
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 使用 css 变量设置边框颜色
 * @param @borderColor {en} set border-color by CSS variable
 * @param @borderRadius border-radius，默认为 0
 * @param @borderRadius {en} border-radius, default value is 0
 * @param @borderWidth border-width，默认为 1px
 * @param @borderWidth {en} border-width, default value is 1 pixel
 * @param @borderStyle border-style，默认为 solid
 * @param @borderStyle {en} border-style, default value is solid
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .onepx-border-var(top, line-color);
 *    .onepx-border-var(all, line-color, 2, 2px, dashed);
 * }
 * ```
 */
/**
 * 元素右下 0.5px 边框
 * @desc {en} 0.5px border on bottom right
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-bottom-right-var(line-color);
 * }
 * ```
 */
/**
 * 元素左上 0.5px 边框
 * @desc {en} 0.5px border on top left
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-top-left-var(line-color);
 * }
 * ```
 */
/**
 * 设置 Loading 组件颜色
 * @desc {en} set Loading component color
 * @param @color 使用 css 变量设置颜色
 * @param @color {en} set color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color-var(primary-color);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 使用 css 变量设置最小字号
 * @param @size {en} set minimum font-size by CSS variable
 * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
 * @param @scale {en} set minimum font-size down text scale，default value is 0.9
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-font-size-var(badge-font-size);
 *    .set-font-size-var(badge-font-size, 0.5);
 * }
 * ```
 */
/**
 * 设置 content-box 盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
 * }
 * ```
 */
/**
 * 设置 Steps 组件颜色
 * @desc {en} set Steps component color
 * @param @color 使用 css 变量设置主颜色
 * @param @color {en} set main step color by CSS variable
 * @param @finish-color 使用 css 变量设置已完成步骤的颜色
 * @param @finish-color {en} set finished step color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color-var(primary-color, lighter-primary-color);
 * }
 * ```
 */
/**
 * @type mixin
 * @name GeneralMixin
 * @name_en General Mixin
 */
/**
 * 文本溢出，支持1行/多行文本
 * @desc {en} text overflow, support single line or multiple lines
 * @param @lines 最大展示行数，默认为1行
 * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 * .demo1{
 *   .text-overflow();
 * }
 * .demo2 {
 *   .text-overflow(2);
 * }
 * ```
 */
/**
 * 禁用用户选择文本
 * @desc {en} disable user selection of text
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .noselect();
 * }
 */
/**
 * 全屏布局
 * @desc {en} full-screen layout
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .full-screen();
 * }
 */
/**
 * 文本加粗，兼容安卓设备
 * @desc {en} text-bold, compatible with Android devices
 * @param @color 文本颜色，默认为currentColor
 * @param @color {en} text color, default to currentColor
 * @param @stroke 文本字符笔触宽度，默认为0.3PX
 * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo1 {
 *   .text-medium();
 * }
 * .demo2 {
 *   .text-medium(#fff, 0.5px);
 * }
 */
/**
 * 消除文本加粗样式，兼容安卓设备
 * @desc {en} remove text-bold, compatible with Android devices
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .remove-text-medium();
 * }
 */
/**
 * 1px(物理像素)边框
 * @desc {en} a border line of 1 pixel
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 边框颜色，默认inherit
 * @param @borderColor {en} border color, default to inherit
 * @param @borderRadius 边框圆角，默认0
 * @param @borderRadius {en} border radius, default to 0
 * @param @borderWidth 边框宽度，默认1px
 * @param @borderWidth {en} border width, default to 1px
 * @param @borderStyle 边框样式，默认solid
 * @param @borderStyle {en} border style, default to solid
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .onepx-border();
 * }
 */
/**
 * 移除0.5px的边框线
 * @desc {en} remove border line of 0.5 pixels
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .remove-hairline(all);
 * }
 * ```
 */
/**
 * 元素右下 0.5px border
 * @desc {en} 0.5px border on bottom right
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-bottom-right(#000);
 * }
 * ```
 */
/**
 * 元素左上 0.5px border
 * @desc {en} 0.5px border on top left
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-top-left(#000);
 * }
 * ```
 */
/**
 * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
 * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
 * @param @origin-property css属性名
 * @param @origin-property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
 * }
 * ```
 */
/**
 * 设置Loading组件颜色
 * @desc {en} set Loading component color
 * @param @color 颜色
 * @param @color {en} color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color(#000);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 最小字号
 * @param @size {en} minimum font-size
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-font-size(10px);
 * }
 * ```
 */
/**
 * 设置content-box盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width(min-width, 300px, 10px, 10px);
 * }
 * ```
 */
/**
 * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
 * @desc {en} set Steps component color
 * @param @color 当前步骤背景、标题文本颜色
 * @param @color {en} color of current step background and title text
 * @param @finish-color 已完成步骤背景色
 * @param @finish-color {en} color of finished step background
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color(#FFB400);
 * }
 * ```
 */
.arcodesign-pc-menu {
  position: relative;
  width: 260px;
  box-sizing: border-box;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
  border-right: 1px solid;
  border-right-color:  var(--line-color,  #e5e6eb ) ;
  opacity: 1;
  min-height: 1000px;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  z-index: 1;
}
.arcodesign-pc-menu-inner {
  position: fixed;
  top: 60px;
  bottom: 0;
  -webkit-transition: left 0.15s;
  transition: left 0.15s;
  left: -1px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.arcodesign-pc-menu-header {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
  position: relative;
  width: 100%;
  padding: 20px 20px 0;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  background-color:  var(--container-background-color,  #FFFFFF ) ;
}
.arcodesign-pc-menu-header .arco-radio-button-inner {
  width: 80px;
  text-align: center;
  font-size: 16px;
  box-sizing: content-box;
}
.arcodesign-pc-menu-header .arco-radio-checked .arco-radio-button-inner {
  color:  var(--primary-color,  #165DFF ) ;
}
.arcodesign-pc-menu-list {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  width: 260px;
  padding-top: 20px;
  overflow-y: hidden;
  overflow-x: hidden;
  background-color:  var(--container-background-color,  #FFFFFF ) ;
}
.arcodesign-pc-menu-list:hover {
  overflow-y: auto;
}
.arcodesign-pc-menu-list .arco-menu-light.arco-menu-vertical {
  box-shadow: none;
}
.arcodesign-pc-menu-list .arco-menu {
  padding-bottom: 30px;
  background-color: transparent;
}
.arcodesign-pc-menu-list .arco-menu-inner {
  padding: 4px 12px;
}
.arcodesign-pc-menu-list .arco-menu-item {
  background-color: transparent;
}
.arcodesign-pc-menu-list .arco-menu-item a {
  display: block;
}
.arcodesign-pc-menu-list .arco-menu-group-title {
  background-color: transparent;
}
.arcodesign-pc-menu-list .arco-menu-item.arco-menu-selected {
  background-color:  var(--card-background-color,  #F7F8FA ) ;
}
.arcodesign-pc-menu-list .arco-menu-item .arco-badge-dot {
  right: -4px;
}
.arcodesign-pc-menu-list .title-1 > .arco-menu-group-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  line-height: 40px;
  color:  var(--font-color,  #1d2129 ) ;
  text-transform: capitalize;
}
.arcodesign-pc-menu-list .title-2 > .arco-menu-group-title {
  text-transform: capitalize;
}
.arcodesign-pc-menu-list .title-2.arco-menu-group {
  padding-left: 10px;
}
.arcodesign-pc-menu-list .title-2 > .arco-menu-group:not(.title-1) > .arco-menu-group-title > span {
  padding-left: 0 !important;
  color:  var(--sub-info-font-color,  #86909c ) ;
}
/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
.arco-theme-dark .process-bg-color-with-config,
.arco-theme-dark .process-custom-icon-bg-color-with-config {
  color:  var(--dark-steps-process-with-config-item-icon-color,  rgba(255, 255, 255, 0.9) ) ;
}
.arco-theme-dark .wait-custom-icon-bg-color-with-config {
  background:  var(--dark-steps-wait-icon-num-background,  #2e2e30 ) ;
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .arcodesign-pc-menu {
  border-right-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .arcodesign-pc-menu-header {
  background-color:  var(--dark-container-background-color,  #232324 ) ;
}
.arco-theme-dark .arcodesign-pc-menu-header .arco-radio-checked .arco-radio-button-inner {
  color:  var(--dark-primary-color,  #3C7EFF ) ;
}
.arco-theme-dark .arcodesign-pc-menu-list {
  background-color:  var(--dark-container-background-color,  #232324 ) ;
}
.arco-theme-dark .arcodesign-pc-menu-list .arco-menu-item.arco-menu-selected {
  background-color:  var(--dark-card-background-color,  hsla(0, 0%, 100%, 0.08) ) ;
}
.arco-theme-dark .arcodesign-pc-menu-list .title-1 > .arco-menu-group-title {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark .arcodesign-pc-menu-list .title-2 > .arco-menu-group:not(.title-1) > .arco-menu-group-title > span {
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
/********************* End *************************/

/**
 * @type mixin-var
 * @name GeneralMixinVars
 * @name_en General Mixin
 */
/**
 * 根据 base-font-size，设置单位尺寸为 rem
 * @desc {en} set the unit size to rem based on base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem(font-size, 14);
 *     .rem(padding, 16, 0);
 * }
 * ```
 */
/**
 * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
 * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem-with-rtl(font-size, 14);
 *     .rem-with-rtl(padding, 16, 0);
 * }
 * ```
 */
/**
 * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
 * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
 * @param @rules 对应的暗黑模式规则
 * @param @rules {en} Corresponding dark mode rules
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-dark-mode-query({
 *         background-color: #000;
 *     });
 * }
 * ```
 */
/**
 * 为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute
 * @param @property css属性名
 * @param @property {en} css property
 * @param @variables token变量名
 * @param @variables {en} token variable name
 * @param @preValues 复合属性css变量前缀
 * @param @preValues {en} prefix for Compound Attribute CSS Variables
 * @param @nextValues 复合属性css变量后缀
 * @param @nextValues {en} suffix for Compound Attribute CSS Variables
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var(background, primary-color);
 *     .use-var(border, primary-color, 1px solid);
 *     .use-var(border, cell-border-width, '', solid black);
 * }
 * ```
 */
/**
 * 为属性设置 transition 变量
 * @desc {en} set the transition variable for the attribute
 * @param @transitionVariable transition 变量名
 * @param @transitionVariable {en} transition variable name
 * @param @backupVariable 备份变量名
 * @param @backupVariable {en} backup variable name
 * @param @property css属性名
 * @param @property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
 * }
 * ```
 */
/**
 * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @variables token 变量名
 * @param @variables {en} token variable name
 * @param @preValues
 * @param @preValues {en}
 * @param @nextValues
 * @param @nextValues {en}
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
 * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @param @rules 自定义的复写规则，默认重置为initial
 * @param @rules {en} customized rewrite rules, default to initial
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-prop-with-rtl(right, auto);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
 * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-value-with-rtl(text-align, left);
 * }
 * ```
 */
/**
 * 在 rtl 模式下，自定义样式规则
 * @desc {en} custom style in RTL mode
 * @param @rules 对应的rtl模式下的规则
 * @param @rules {en} property with rtl
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .style-with-rtl({
 *         transform: scale(-1);
 *     });
 * }
 * ```
 */
/**
 * 0.5px 的边框线
 * @desc {en} a border line of 0.5 pixels
 * @param @color 使用 css 变量为线设置颜色
 * @param @color {en} set border-color by CSS variable
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .hairline-var(line-color);
 *     .hairline-var(line-color, top);
 * }
 * ```
 */
/**
 * 字体加粗
 * @desc {en} font bold
 * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
 * @param @color {en} set color by CSS variable
 * @param @stroke 字体粗细，默认 0.3px
 * @param @stroke {en} font weight, default 0.3 pixel
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .text-medium-var();
 *    .text-medium-var(primary-color, 0.5PX);
 * }
 * ```
 */
/**
 * 1px 边框
 * @desc {en} 1 pixel border
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 使用 css 变量设置边框颜色
 * @param @borderColor {en} set border-color by CSS variable
 * @param @borderRadius border-radius，默认为 0
 * @param @borderRadius {en} border-radius, default value is 0
 * @param @borderWidth border-width，默认为 1px
 * @param @borderWidth {en} border-width, default value is 1 pixel
 * @param @borderStyle border-style，默认为 solid
 * @param @borderStyle {en} border-style, default value is solid
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .onepx-border-var(top, line-color);
 *    .onepx-border-var(all, line-color, 2, 2px, dashed);
 * }
 * ```
 */
/**
 * 元素右下 0.5px 边框
 * @desc {en} 0.5px border on bottom right
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-bottom-right-var(line-color);
 * }
 * ```
 */
/**
 * 元素左上 0.5px 边框
 * @desc {en} 0.5px border on top left
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-top-left-var(line-color);
 * }
 * ```
 */
/**
 * 设置 Loading 组件颜色
 * @desc {en} set Loading component color
 * @param @color 使用 css 变量设置颜色
 * @param @color {en} set color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color-var(primary-color);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 使用 css 变量设置最小字号
 * @param @size {en} set minimum font-size by CSS variable
 * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
 * @param @scale {en} set minimum font-size down text scale，default value is 0.9
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-font-size-var(badge-font-size);
 *    .set-font-size-var(badge-font-size, 0.5);
 * }
 * ```
 */
/**
 * 设置 content-box 盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
 * }
 * ```
 */
/**
 * 设置 Steps 组件颜色
 * @desc {en} set Steps component color
 * @param @color 使用 css 变量设置主颜色
 * @param @color {en} set main step color by CSS variable
 * @param @finish-color 使用 css 变量设置已完成步骤的颜色
 * @param @finish-color {en} set finished step color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color-var(primary-color, lighter-primary-color);
 * }
 * ```
 */
/**
 * @type mixin
 * @name GeneralMixin
 * @name_en General Mixin
 */
/**
 * 文本溢出，支持1行/多行文本
 * @desc {en} text overflow, support single line or multiple lines
 * @param @lines 最大展示行数，默认为1行
 * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 * .demo1{
 *   .text-overflow();
 * }
 * .demo2 {
 *   .text-overflow(2);
 * }
 * ```
 */
/**
 * 禁用用户选择文本
 * @desc {en} disable user selection of text
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .noselect();
 * }
 */
/**
 * 全屏布局
 * @desc {en} full-screen layout
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .full-screen();
 * }
 */
/**
 * 文本加粗，兼容安卓设备
 * @desc {en} text-bold, compatible with Android devices
 * @param @color 文本颜色，默认为currentColor
 * @param @color {en} text color, default to currentColor
 * @param @stroke 文本字符笔触宽度，默认为0.3PX
 * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo1 {
 *   .text-medium();
 * }
 * .demo2 {
 *   .text-medium(#fff, 0.5px);
 * }
 */
/**
 * 消除文本加粗样式，兼容安卓设备
 * @desc {en} remove text-bold, compatible with Android devices
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .remove-text-medium();
 * }
 */
/**
 * 1px(物理像素)边框
 * @desc {en} a border line of 1 pixel
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 边框颜色，默认inherit
 * @param @borderColor {en} border color, default to inherit
 * @param @borderRadius 边框圆角，默认0
 * @param @borderRadius {en} border radius, default to 0
 * @param @borderWidth 边框宽度，默认1px
 * @param @borderWidth {en} border width, default to 1px
 * @param @borderStyle 边框样式，默认solid
 * @param @borderStyle {en} border style, default to solid
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .onepx-border();
 * }
 */
/**
 * 移除0.5px的边框线
 * @desc {en} remove border line of 0.5 pixels
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .remove-hairline(all);
 * }
 * ```
 */
/**
 * 元素右下 0.5px border
 * @desc {en} 0.5px border on bottom right
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-bottom-right(#000);
 * }
 * ```
 */
/**
 * 元素左上 0.5px border
 * @desc {en} 0.5px border on top left
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-top-left(#000);
 * }
 * ```
 */
/**
 * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
 * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
 * @param @origin-property css属性名
 * @param @origin-property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
 * }
 * ```
 */
/**
 * 设置Loading组件颜色
 * @desc {en} set Loading component color
 * @param @color 颜色
 * @param @color {en} color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color(#000);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 最小字号
 * @param @size {en} minimum font-size
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-font-size(10px);
 * }
 * ```
 */
/**
 * 设置content-box盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width(min-width, 300px, 10px, 10px);
 * }
 * ```
 */
/**
 * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
 * @desc {en} set Steps component color
 * @param @color 当前步骤背景、标题文本颜色
 * @param @color {en} color of current step background and title text
 * @param @finish-color 已完成步骤背景色
 * @param @finish-color {en} color of finished step background
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color(#FFB400);
 * }
 * ```
 */
body {
  height: 100%;
  overflow: hidden;
}
.arcodesign-pc-site {
  height: 100%;
}
.arcodesign-pc-site-content-wrap {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  height: 100%;
  background-color:  var(--background-color,  #FFFFFF ) ;
}
.arcodesign-pc-site-content {
  overflow-y: scroll;
  height: 100vh;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding-top: 60px;
  min-height: 900px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.arcodesign-pc-site .arcodesign-pc-menu-holder {
  position: fixed;
  left: 0;
  top: 0;
  width: 12px;
  height: 100vh;
  background-color:  var(--card-background-color,  #F7F8FA ) ;
  border-right: 1px solid;
  border-right-color:  var(--line-color,  #e5e6eb ) ;
  z-index: 1;
}
.arcodesign-pc-site .ac-anchor-layout-holder {
  height: 0;
}
.arcodesign-pc-site .arcodesign-pc-menu-collapse-btn {
  position: fixed;
  left: 247px;
  z-index: 2;
  background-color:  var(--container-background-color,  #FFFFFF ) ;
  color:  var(--font-color,  #1d2129 ) ;
  border: 1px solid;
  border-color:  var(--line-color,  #e5e6eb ) ;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}
.arcodesign-pc-site .arcodesign-pc-menu-collapse-btn svg {
  vertical-align: -2px;
}
.arcodesign-pc-site .arcodesign-pc-menu-collapse-btn:hover {
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
}
.arcodesign-pc-site .arcodesign-pc-menu-collapse-btn-close {
  left: 0;
}
.arcodesign-pc-site .arcodesign-pc-menu-collapse-btn-close svg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#changelog .arco-timeline-item-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
#changelog .arco-timeline-item-dot {
  background-color:  var(--primary-color,  #165DFF ) ;
}
#changelog .left {
  min-width: 100px;
  margin-right: 40px;
}
#changelog .left h2 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color:  var(--font-color,  #1d2129 ) ;
}
#changelog .left p {
  font-size: 12px;
  line-height: 20px;
  color:  var(--sub-info-font-color,  #86909c ) ;
  margin: 0;
}
#changelog .right h3 {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color:  var(--font-color,  #1d2129 ) ;
}
#changelog .right h3:first-child {
  margin-top: 0;
}
#changelog .right ul {
  padding-left: 20px;
}
#changelog .right ul li {
  font-weight: 400;
  line-height: 22px;
  color:  var(--sub-font-color,  #4e5969 ) ;
  line-height: 2;
  word-wrap: break-word;
  margin-bottom: 8px;
}
#changelog .right ul li > p {
  display: inline;
}
/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
.arco-theme-dark .process-bg-color-with-config,
.arco-theme-dark .process-custom-icon-bg-color-with-config {
  color:  var(--dark-steps-process-with-config-item-icon-color,  rgba(255, 255, 255, 0.9) ) ;
}
.arco-theme-dark .wait-custom-icon-bg-color-with-config {
  background:  var(--dark-steps-wait-icon-num-background,  #2e2e30 ) ;
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .arcodesign-pc-site-content-wrap {
  background-color:  var(--dark-background-color,  #17171A ) ;
}
.arco-theme-dark .arcodesign-pc-site .arcodesign-pc-menu-holder {
  background-color:  var(--dark-card-background-color,  hsla(0, 0%, 100%, 0.08) ) ;
  border-right-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .arcodesign-pc-site .arcodesign-pc-menu-collapse-btn {
  background-color:  var(--dark-container-background-color,  #232324 ) ;
  color:  var(--dark-font-color,  #f6f6f6 ) ;
  border-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark #changelog .arco-timeline-item-dot {
  background-color:  var(--dark-primary-color,  #3C7EFF ) ;
}
.arco-theme-dark #changelog .left h2 {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark #changelog .left p {
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark #changelog .right h3 {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark #changelog .right ul li {
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
/********************* End *************************/

/**
 * @type mixin-var
 * @name GeneralMixinVars
 * @name_en General Mixin
 */
/**
 * 根据 base-font-size，设置单位尺寸为 rem
 * @desc {en} set the unit size to rem based on base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem(font-size, 14);
 *     .rem(padding, 16, 0);
 * }
 * ```
 */
/**
 * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
 * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem-with-rtl(font-size, 14);
 *     .rem-with-rtl(padding, 16, 0);
 * }
 * ```
 */
/**
 * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
 * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
 * @param @rules 对应的暗黑模式规则
 * @param @rules {en} Corresponding dark mode rules
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-dark-mode-query({
 *         background-color: #000;
 *     });
 * }
 * ```
 */
/**
 * 为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute
 * @param @property css属性名
 * @param @property {en} css property
 * @param @variables token变量名
 * @param @variables {en} token variable name
 * @param @preValues 复合属性css变量前缀
 * @param @preValues {en} prefix for Compound Attribute CSS Variables
 * @param @nextValues 复合属性css变量后缀
 * @param @nextValues {en} suffix for Compound Attribute CSS Variables
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var(background, primary-color);
 *     .use-var(border, primary-color, 1px solid);
 *     .use-var(border, cell-border-width, '', solid black);
 * }
 * ```
 */
/**
 * 为属性设置 transition 变量
 * @desc {en} set the transition variable for the attribute
 * @param @transitionVariable transition 变量名
 * @param @transitionVariable {en} transition variable name
 * @param @backupVariable 备份变量名
 * @param @backupVariable {en} backup variable name
 * @param @property css属性名
 * @param @property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
 * }
 * ```
 */
/**
 * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @variables token 变量名
 * @param @variables {en} token variable name
 * @param @preValues
 * @param @preValues {en}
 * @param @nextValues
 * @param @nextValues {en}
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
 * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @param @rules 自定义的复写规则，默认重置为initial
 * @param @rules {en} customized rewrite rules, default to initial
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-prop-with-rtl(right, auto);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
 * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-value-with-rtl(text-align, left);
 * }
 * ```
 */
/**
 * 在 rtl 模式下，自定义样式规则
 * @desc {en} custom style in RTL mode
 * @param @rules 对应的rtl模式下的规则
 * @param @rules {en} property with rtl
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .style-with-rtl({
 *         transform: scale(-1);
 *     });
 * }
 * ```
 */
/**
 * 0.5px 的边框线
 * @desc {en} a border line of 0.5 pixels
 * @param @color 使用 css 变量为线设置颜色
 * @param @color {en} set border-color by CSS variable
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .hairline-var(line-color);
 *     .hairline-var(line-color, top);
 * }
 * ```
 */
/**
 * 字体加粗
 * @desc {en} font bold
 * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
 * @param @color {en} set color by CSS variable
 * @param @stroke 字体粗细，默认 0.3px
 * @param @stroke {en} font weight, default 0.3 pixel
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .text-medium-var();
 *    .text-medium-var(primary-color, 0.5PX);
 * }
 * ```
 */
/**
 * 1px 边框
 * @desc {en} 1 pixel border
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 使用 css 变量设置边框颜色
 * @param @borderColor {en} set border-color by CSS variable
 * @param @borderRadius border-radius，默认为 0
 * @param @borderRadius {en} border-radius, default value is 0
 * @param @borderWidth border-width，默认为 1px
 * @param @borderWidth {en} border-width, default value is 1 pixel
 * @param @borderStyle border-style，默认为 solid
 * @param @borderStyle {en} border-style, default value is solid
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .onepx-border-var(top, line-color);
 *    .onepx-border-var(all, line-color, 2, 2px, dashed);
 * }
 * ```
 */
/**
 * 元素右下 0.5px 边框
 * @desc {en} 0.5px border on bottom right
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-bottom-right-var(line-color);
 * }
 * ```
 */
/**
 * 元素左上 0.5px 边框
 * @desc {en} 0.5px border on top left
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-top-left-var(line-color);
 * }
 * ```
 */
/**
 * 设置 Loading 组件颜色
 * @desc {en} set Loading component color
 * @param @color 使用 css 变量设置颜色
 * @param @color {en} set color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color-var(primary-color);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 使用 css 变量设置最小字号
 * @param @size {en} set minimum font-size by CSS variable
 * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
 * @param @scale {en} set minimum font-size down text scale，default value is 0.9
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-font-size-var(badge-font-size);
 *    .set-font-size-var(badge-font-size, 0.5);
 * }
 * ```
 */
/**
 * 设置 content-box 盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
 * }
 * ```
 */
/**
 * 设置 Steps 组件颜色
 * @desc {en} set Steps component color
 * @param @color 使用 css 变量设置主颜色
 * @param @color {en} set main step color by CSS variable
 * @param @finish-color 使用 css 变量设置已完成步骤的颜色
 * @param @finish-color {en} set finished step color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color-var(primary-color, lighter-primary-color);
 * }
 * ```
 */
/**
 * @type mixin
 * @name GeneralMixin
 * @name_en General Mixin
 */
/**
 * 文本溢出，支持1行/多行文本
 * @desc {en} text overflow, support single line or multiple lines
 * @param @lines 最大展示行数，默认为1行
 * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 * .demo1{
 *   .text-overflow();
 * }
 * .demo2 {
 *   .text-overflow(2);
 * }
 * ```
 */
/**
 * 禁用用户选择文本
 * @desc {en} disable user selection of text
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .noselect();
 * }
 */
/**
 * 全屏布局
 * @desc {en} full-screen layout
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .full-screen();
 * }
 */
/**
 * 文本加粗，兼容安卓设备
 * @desc {en} text-bold, compatible with Android devices
 * @param @color 文本颜色，默认为currentColor
 * @param @color {en} text color, default to currentColor
 * @param @stroke 文本字符笔触宽度，默认为0.3PX
 * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo1 {
 *   .text-medium();
 * }
 * .demo2 {
 *   .text-medium(#fff, 0.5px);
 * }
 */
/**
 * 消除文本加粗样式，兼容安卓设备
 * @desc {en} remove text-bold, compatible with Android devices
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .remove-text-medium();
 * }
 */
/**
 * 1px(物理像素)边框
 * @desc {en} a border line of 1 pixel
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 边框颜色，默认inherit
 * @param @borderColor {en} border color, default to inherit
 * @param @borderRadius 边框圆角，默认0
 * @param @borderRadius {en} border radius, default to 0
 * @param @borderWidth 边框宽度，默认1px
 * @param @borderWidth {en} border width, default to 1px
 * @param @borderStyle 边框样式，默认solid
 * @param @borderStyle {en} border style, default to solid
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .onepx-border();
 * }
 */
/**
 * 移除0.5px的边框线
 * @desc {en} remove border line of 0.5 pixels
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .remove-hairline(all);
 * }
 * ```
 */
/**
 * 元素右下 0.5px border
 * @desc {en} 0.5px border on bottom right
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-bottom-right(#000);
 * }
 * ```
 */
/**
 * 元素左上 0.5px border
 * @desc {en} 0.5px border on top left
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-top-left(#000);
 * }
 * ```
 */
/**
 * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
 * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
 * @param @origin-property css属性名
 * @param @origin-property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
 * }
 * ```
 */
/**
 * 设置Loading组件颜色
 * @desc {en} set Loading component color
 * @param @color 颜色
 * @param @color {en} color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color(#000);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 最小字号
 * @param @size {en} minimum font-size
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-font-size(10px);
 * }
 * ```
 */
/**
 * 设置content-box盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width(min-width, 300px, 10px, 10px);
 * }
 * ```
 */
/**
 * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
 * @desc {en} set Steps component color
 * @param @color 当前步骤背景、标题文本颜色
 * @param @color {en} color of current step background and title text
 * @param @finish-color 已完成步骤背景色
 * @param @finish-color {en} color of finished step background
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color(#FFB400);
 * }
 * ```
 */
.demo-comp-qrcode-popover {
  margin-left: -1px;
  margin-top: -12px;
}
.demo-comp-qrcode-popover .home-code-popover-content {
  padding: 12px 12px 16px;
  font-size: 13px;
  line-height: 24px;
}
.demo-comp-qrcode-popover .code {
  margin: 4px auto 0;
}
.demo-comp-qrcode {
  color: #c2c7cc;
  margin-left: 14px;
  cursor: pointer;
}
.demo-comp-qrcode:hover {
  color:  var(--primary-color,  #165DFF ) ;
}
.demo-content-wrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.demo-content-wrapper .arcodesign-pc-site-footer {
  position: absolute;
  z-index: 1;
}
.mobile-iframe {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 100px 42px 0 0;
  pointer-events: none;
}
.mobile-iframe iframe {
  pointer-events: auto;
  width: 375px;
  height: 667px;
  border-radius: 12px;
  border: 1px solid;
  border-color:  var(--line-color,  #e5e6eb ) ;
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
}
.ac-anchor-wrapper {
  position: fixed;
  top: 60px;
  right: 0;
  width: 180px;
  height: 100vh;
  padding: 110px 24px 24px;
  box-sizing: border-box;
  background-color:  var(--container-background-color,  #FFFFFF ) ;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}
.ac-anchor-wrapper .arco-anchor {
  width: 132px;
}
.ac-anchor-wrapper .arco-anchor-link-title {
  font-size: 13px;
  line-height: 1.5;
}
.ac-anchor-wrapper .arco-anchor-lineless {
  height: 100%;
  padding-bottom: 180px;
}
.ac-anchor-wrapper .arco-anchor-list {
  height: 100%;
  overflow: auto;
}
.ac-anchor-wrapper .arco-anchor-list::-webkit-scrollbar {
  display: none;
}
.ac-anchor-inner {
  height: 100%;
  overflow-y: auto;
}
.ac-anchor-layout-holder {
  width: 180px;
  height: 100vh;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}
.ac-anchor-layout-holder-close {
  width: 0;
  overflow: hidden;
}
.ac-anchor-layout-holder-close .ac-anchor-wrapper {
  right: -180px;
}
.ac-anchor-collapse-btn {
  position: fixed !important;
  top: 100px;
  right: 112px;
}
.ac-anchor-collapse-btn svg {
  vertical-align: -3px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.ac-anchor-collapse-btn-close {
  width: 28px !important;
  right: 0;
  background-color: var(--color-bg-5) !important;
  box-shadow: -1px 0 5px 0 rgba(0, 0, 0, 0.1);
  border-radius: 18px 0 0 18px !important;
}
.ac-anchor-collapse-btn-close svg {
  margin-left: 2px;
  -webkit-transform: none;
          transform: none;
}
/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
.arco-theme-dark .process-bg-color-with-config,
.arco-theme-dark .process-custom-icon-bg-color-with-config {
  color:  var(--dark-steps-process-with-config-item-icon-color,  rgba(255, 255, 255, 0.9) ) ;
}
.arco-theme-dark .wait-custom-icon-bg-color-with-config {
  background:  var(--dark-steps-wait-icon-num-background,  #2e2e30 ) ;
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .demo-comp-qrcode:hover {
  color:  var(--dark-primary-color,  #3C7EFF ) ;
}
.arco-theme-dark .mobile-iframe iframe {
  border-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .ac-anchor-wrapper {
  background-color:  var(--dark-container-background-color,  #232324 ) ;
}
/********************* End *************************/

/**
 * @type mixin-var
 * @name GeneralMixinVars
 * @name_en General Mixin
 */
/**
 * 根据 base-font-size，设置单位尺寸为 rem
 * @desc {en} set the unit size to rem based on base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem(font-size, 14);
 *     .rem(padding, 16, 0);
 * }
 * ```
 */
/**
 * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
 * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem-with-rtl(font-size, 14);
 *     .rem-with-rtl(padding, 16, 0);
 * }
 * ```
 */
/**
 * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
 * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
 * @param @rules 对应的暗黑模式规则
 * @param @rules {en} Corresponding dark mode rules
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-dark-mode-query({
 *         background-color: #000;
 *     });
 * }
 * ```
 */
/**
 * 为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute
 * @param @property css属性名
 * @param @property {en} css property
 * @param @variables token变量名
 * @param @variables {en} token variable name
 * @param @preValues 复合属性css变量前缀
 * @param @preValues {en} prefix for Compound Attribute CSS Variables
 * @param @nextValues 复合属性css变量后缀
 * @param @nextValues {en} suffix for Compound Attribute CSS Variables
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var(background, primary-color);
 *     .use-var(border, primary-color, 1px solid);
 *     .use-var(border, cell-border-width, '', solid black);
 * }
 * ```
 */
/**
 * 为属性设置 transition 变量
 * @desc {en} set the transition variable for the attribute
 * @param @transitionVariable transition 变量名
 * @param @transitionVariable {en} transition variable name
 * @param @backupVariable 备份变量名
 * @param @backupVariable {en} backup variable name
 * @param @property css属性名
 * @param @property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
 * }
 * ```
 */
/**
 * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @variables token 变量名
 * @param @variables {en} token variable name
 * @param @preValues
 * @param @preValues {en}
 * @param @nextValues
 * @param @nextValues {en}
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
 * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @param @rules 自定义的复写规则，默认重置为initial
 * @param @rules {en} customized rewrite rules, default to initial
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-prop-with-rtl(right, auto);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
 * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-value-with-rtl(text-align, left);
 * }
 * ```
 */
/**
 * 在 rtl 模式下，自定义样式规则
 * @desc {en} custom style in RTL mode
 * @param @rules 对应的rtl模式下的规则
 * @param @rules {en} property with rtl
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .style-with-rtl({
 *         transform: scale(-1);
 *     });
 * }
 * ```
 */
/**
 * 0.5px 的边框线
 * @desc {en} a border line of 0.5 pixels
 * @param @color 使用 css 变量为线设置颜色
 * @param @color {en} set border-color by CSS variable
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .hairline-var(line-color);
 *     .hairline-var(line-color, top);
 * }
 * ```
 */
/**
 * 字体加粗
 * @desc {en} font bold
 * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
 * @param @color {en} set color by CSS variable
 * @param @stroke 字体粗细，默认 0.3px
 * @param @stroke {en} font weight, default 0.3 pixel
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .text-medium-var();
 *    .text-medium-var(primary-color, 0.5PX);
 * }
 * ```
 */
/**
 * 1px 边框
 * @desc {en} 1 pixel border
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 使用 css 变量设置边框颜色
 * @param @borderColor {en} set border-color by CSS variable
 * @param @borderRadius border-radius，默认为 0
 * @param @borderRadius {en} border-radius, default value is 0
 * @param @borderWidth border-width，默认为 1px
 * @param @borderWidth {en} border-width, default value is 1 pixel
 * @param @borderStyle border-style，默认为 solid
 * @param @borderStyle {en} border-style, default value is solid
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .onepx-border-var(top, line-color);
 *    .onepx-border-var(all, line-color, 2, 2px, dashed);
 * }
 * ```
 */
/**
 * 元素右下 0.5px 边框
 * @desc {en} 0.5px border on bottom right
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-bottom-right-var(line-color);
 * }
 * ```
 */
/**
 * 元素左上 0.5px 边框
 * @desc {en} 0.5px border on top left
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-top-left-var(line-color);
 * }
 * ```
 */
/**
 * 设置 Loading 组件颜色
 * @desc {en} set Loading component color
 * @param @color 使用 css 变量设置颜色
 * @param @color {en} set color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color-var(primary-color);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 使用 css 变量设置最小字号
 * @param @size {en} set minimum font-size by CSS variable
 * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
 * @param @scale {en} set minimum font-size down text scale，default value is 0.9
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-font-size-var(badge-font-size);
 *    .set-font-size-var(badge-font-size, 0.5);
 * }
 * ```
 */
/**
 * 设置 content-box 盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
 * }
 * ```
 */
/**
 * 设置 Steps 组件颜色
 * @desc {en} set Steps component color
 * @param @color 使用 css 变量设置主颜色
 * @param @color {en} set main step color by CSS variable
 * @param @finish-color 使用 css 变量设置已完成步骤的颜色
 * @param @finish-color {en} set finished step color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color-var(primary-color, lighter-primary-color);
 * }
 * ```
 */
/**
 * @type mixin
 * @name GeneralMixin
 * @name_en General Mixin
 */
/**
 * 文本溢出，支持1行/多行文本
 * @desc {en} text overflow, support single line or multiple lines
 * @param @lines 最大展示行数，默认为1行
 * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 * .demo1{
 *   .text-overflow();
 * }
 * .demo2 {
 *   .text-overflow(2);
 * }
 * ```
 */
/**
 * 禁用用户选择文本
 * @desc {en} disable user selection of text
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .noselect();
 * }
 */
/**
 * 全屏布局
 * @desc {en} full-screen layout
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .full-screen();
 * }
 */
/**
 * 文本加粗，兼容安卓设备
 * @desc {en} text-bold, compatible with Android devices
 * @param @color 文本颜色，默认为currentColor
 * @param @color {en} text color, default to currentColor
 * @param @stroke 文本字符笔触宽度，默认为0.3PX
 * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo1 {
 *   .text-medium();
 * }
 * .demo2 {
 *   .text-medium(#fff, 0.5px);
 * }
 */
/**
 * 消除文本加粗样式，兼容安卓设备
 * @desc {en} remove text-bold, compatible with Android devices
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .remove-text-medium();
 * }
 */
/**
 * 1px(物理像素)边框
 * @desc {en} a border line of 1 pixel
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 边框颜色，默认inherit
 * @param @borderColor {en} border color, default to inherit
 * @param @borderRadius 边框圆角，默认0
 * @param @borderRadius {en} border radius, default to 0
 * @param @borderWidth 边框宽度，默认1px
 * @param @borderWidth {en} border width, default to 1px
 * @param @borderStyle 边框样式，默认solid
 * @param @borderStyle {en} border style, default to solid
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .onepx-border();
 * }
 */
/**
 * 移除0.5px的边框线
 * @desc {en} remove border line of 0.5 pixels
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .remove-hairline(all);
 * }
 * ```
 */
/**
 * 元素右下 0.5px border
 * @desc {en} 0.5px border on bottom right
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-bottom-right(#000);
 * }
 * ```
 */
/**
 * 元素左上 0.5px border
 * @desc {en} 0.5px border on top left
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-top-left(#000);
 * }
 * ```
 */
/**
 * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
 * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
 * @param @origin-property css属性名
 * @param @origin-property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
 * }
 * ```
 */
/**
 * 设置Loading组件颜色
 * @desc {en} set Loading component color
 * @param @color 颜色
 * @param @color {en} color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color(#000);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 最小字号
 * @param @size {en} minimum font-size
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-font-size(10px);
 * }
 * ```
 */
/**
 * 设置content-box盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width(min-width, 300px, 10px, 10px);
 * }
 * ```
 */
/**
 * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
 * @desc {en} set Steps component color
 * @param @color 当前步骤背景、标题文本颜色
 * @param @color {en} color of current step background and title text
 * @param @finish-color 已完成步骤背景色
 * @param @finish-color {en} color of finished step background
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color(#FFB400);
 * }
 * ```
 */
.arcodesign-pc-site-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  height: 60px;
  width: 100%;
  background-color:  var(--card-background-color,  #F7F8FA ) ;
  font-size: 14px;
}
.arcodesign-pc-site-footer .arco-logo-picture {
  margin-left: 48px;
  margin-right: 20px;
}
.arcodesign-pc-site-footer-team {
  color:  var(--font-color,  #1d2129 ) ;
}
.arcodesign-pc-site-footer-team-right {
  font-size: 12px;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  margin: 0 4px;
  width: 1em;
  height: 1em;
  vertical-align: -2px;
}
.arcodesign-pc-site-footer-copyright {
  font-size: 12px;
  margin-top: 2px;
  color:  var(--sub-font-color,  #4e5969 ) ;
}
/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
.arco-theme-dark .process-bg-color-with-config,
.arco-theme-dark .process-custom-icon-bg-color-with-config {
  color:  var(--dark-steps-process-with-config-item-icon-color,  rgba(255, 255, 255, 0.9) ) ;
}
.arco-theme-dark .wait-custom-icon-bg-color-with-config {
  background:  var(--dark-steps-wait-icon-num-background,  #2e2e30 ) ;
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .arcodesign-pc-site-footer {
  background-color:  var(--dark-card-background-color,  hsla(0, 0%, 100%, 0.08) ) ;
}
.arco-theme-dark .arcodesign-pc-site-footer-team {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark .arcodesign-pc-site-footer-copyright {
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
/********************* End *************************/

/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+less+q+jsx+tsx+typescript */
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html {
  height: 100%;
}
body {
  position: relative;
  min-height: 100%;
  background: #ffffff;
  touch-action: manipulation;
  font-family: -apple-system, PingFang SC, Helvetica Neue;
}
ul,
ol,
li {
  list-style: none;
}
img,
button {
  border: 0;
  outline: 0;
}
a {
  text-decoration: none !important;
  outline: 0;
}
a:hover,
a:active,
a:visited {
  color: inherit;
}
table,
tr,
td {
  border-collapse: collapse;
}
input {
  outline: 0;
}
code,
kbd,
pre,
samp {
  font-family: Menlo, Consolas;
}
.fade-enter-active,
.fade-leave-active {
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/**
 * @type mixin-var
 * @name GeneralMixinVars
 * @name_en General Mixin
 */
/**
 * 根据 base-font-size，设置单位尺寸为 rem
 * @desc {en} set the unit size to rem based on base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem(font-size, 14);
 *     .rem(padding, 16, 0);
 * }
 * ```
 */
/**
 * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
 * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
 * @param @property css属性名
 * @param @property {en} css property
 * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
 * @param @values {en} css property value, the values can be separated by commas when the style is composite
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .rem-with-rtl(font-size, 14);
 *     .rem-with-rtl(padding, 16, 0);
 * }
 * ```
 */
/**
 * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
 * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
 * @param @rules 对应的暗黑模式规则
 * @param @rules {en} Corresponding dark mode rules
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-dark-mode-query({
 *         background-color: #000;
 *     });
 * }
 * ```
 */
/**
 * 为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute
 * @param @property css属性名
 * @param @property {en} css property
 * @param @variables token变量名
 * @param @variables {en} token variable name
 * @param @preValues 复合属性css变量前缀
 * @param @preValues {en} prefix for Compound Attribute CSS Variables
 * @param @nextValues 复合属性css变量后缀
 * @param @nextValues {en} suffix for Compound Attribute CSS Variables
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var(background, primary-color);
 *     .use-var(border, primary-color, 1px solid);
 *     .use-var(border, cell-border-width, '', solid black);
 * }
 * ```
 */
/**
 * 为属性设置 transition 变量
 * @desc {en} set the transition variable for the attribute
 * @param @transitionVariable transition 变量名
 * @param @transitionVariable {en} transition variable name
 * @param @backupVariable 备份变量名
 * @param @backupVariable {en} backup variable name
 * @param @property css属性名
 * @param @property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
 * }
 * ```
 */
/**
 * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
 * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @variables token 变量名
 * @param @variables {en} token variable name
 * @param @preValues
 * @param @preValues {en}
 * @param @nextValues
 * @param @nextValues {en}
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
 * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @param @rules 自定义的复写规则，默认重置为initial
 * @param @rules {en} customized rewrite rules, default to initial
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-prop-with-rtl(right, auto);
 * }
 * ```
 */
/**
 * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
 * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
 * @param @property css属性名
 * @param @property {en} css property
 * @param @value css属性值
 * @param @value {en} css property value
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *   .set-value-with-rtl(text-align, left);
 * }
 * ```
 */
/**
 * 在 rtl 模式下，自定义样式规则
 * @desc {en} custom style in RTL mode
 * @param @rules 对应的rtl模式下的规则
 * @param @rules {en} property with rtl
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .style-with-rtl({
 *         transform: scale(-1);
 *     });
 * }
 * ```
 */
/**
 * 0.5px 的边框线
 * @desc {en} a border line of 0.5 pixels
 * @param @color 使用 css 变量为线设置颜色
 * @param @color {en} set border-color by CSS variable
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *     .hairline-var(line-color);
 *     .hairline-var(line-color, top);
 * }
 * ```
 */
/**
 * 字体加粗
 * @desc {en} font bold
 * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
 * @param @color {en} set color by CSS variable
 * @param @stroke 字体粗细，默认 0.3px
 * @param @stroke {en} font weight, default 0.3 pixel
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .text-medium-var();
 *    .text-medium-var(primary-color, 0.5PX);
 * }
 * ```
 */
/**
 * 1px 边框
 * @desc {en} 1 pixel border
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 使用 css 变量设置边框颜色
 * @param @borderColor {en} set border-color by CSS variable
 * @param @borderRadius border-radius，默认为 0
 * @param @borderRadius {en} border-radius, default value is 0
 * @param @borderWidth border-width，默认为 1px
 * @param @borderWidth {en} border-width, default value is 1 pixel
 * @param @borderStyle border-style，默认为 solid
 * @param @borderStyle {en} border-style, default value is solid
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .onepx-border-var(top, line-color);
 *    .onepx-border-var(all, line-color, 2, 2px, dashed);
 * }
 * ```
 */
/**
 * 元素右下 0.5px 边框
 * @desc {en} 0.5px border on bottom right
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-bottom-right-var(line-color);
 * }
 * ```
 */
/**
 * 元素左上 0.5px 边框
 * @desc {en} 0.5px border on top left
 * @param @color 使用 css 变量设置边框颜色
 * @param @color {en} set border-color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .hairline-top-left-var(line-color);
 * }
 * ```
 */
/**
 * 设置 Loading 组件颜色
 * @desc {en} set Loading component color
 * @param @color 使用 css 变量设置颜色
 * @param @color {en} set color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color-var(primary-color);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 使用 css 变量设置最小字号
 * @param @size {en} set minimum font-size by CSS variable
 * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
 * @param @scale {en} set minimum font-size down text scale，default value is 0.9
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-font-size-var(badge-font-size);
 *    .set-font-size-var(badge-font-size, 0.5);
 * }
 * ```
 */
/**
 * 设置 content-box 盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css 属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
 * }
 * ```
 */
/**
 * 设置 Steps 组件颜色
 * @desc {en} set Steps component color
 * @param @color 使用 css 变量设置主颜色
 * @param @color {en} set main step color by CSS variable
 * @param @finish-color 使用 css 变量设置已完成步骤的颜色
 * @param @finish-color {en} set finished step color by CSS variable
 * @example
 * ```
 * @import '@arco-design/mobile-react/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color-var(primary-color, lighter-primary-color);
 * }
 * ```
 */
/**
 * @type mixin
 * @name GeneralMixin
 * @name_en General Mixin
 */
/**
 * 文本溢出，支持1行/多行文本
 * @desc {en} text overflow, support single line or multiple lines
 * @param @lines 最大展示行数，默认为1行
 * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 * .demo1{
 *   .text-overflow();
 * }
 * .demo2 {
 *   .text-overflow(2);
 * }
 * ```
 */
/**
 * 禁用用户选择文本
 * @desc {en} disable user selection of text
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .noselect();
 * }
 */
/**
 * 全屏布局
 * @desc {en} full-screen layout
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .full-screen();
 * }
 */
/**
 * 文本加粗，兼容安卓设备
 * @desc {en} text-bold, compatible with Android devices
 * @param @color 文本颜色，默认为currentColor
 * @param @color {en} text color, default to currentColor
 * @param @stroke 文本字符笔触宽度，默认为0.3PX
 * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo1 {
 *   .text-medium();
 * }
 * .demo2 {
 *   .text-medium(#fff, 0.5px);
 * }
 */
/**
 * 消除文本加粗样式，兼容安卓设备
 * @desc {en} remove text-bold, compatible with Android devices
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .remove-text-medium();
 * }
 */
/**
 * 1px(物理像素)边框
 * @desc {en} a border line of 1 pixel
 * @param @direction 边框方向
 * @param @direction {en} border direction
 * @param @borderColor 边框颜色，默认inherit
 * @param @borderColor {en} border color, default to inherit
 * @param @borderRadius 边框圆角，默认0
 * @param @borderRadius {en} border radius, default to 0
 * @param @borderWidth 边框宽度，默认1px
 * @param @borderWidth {en} border width, default to 1px
 * @param @borderStyle 边框样式，默认solid
 * @param @borderStyle {en} border style, default to solid
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   .onepx-border();
 * }
 */
/**
 * 移除0.5px的边框线
 * @desc {en} remove border line of 0.5 pixels
 * @param @direction 边框方向，默认为全部方向
 * @param @direction {en} border direction，default to all directions.
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .remove-hairline(all);
 * }
 * ```
 */
/**
 * 元素右下 0.5px border
 * @desc {en} 0.5px border on bottom right
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-bottom-right(#000);
 * }
 * ```
 */
/**
 * 元素左上 0.5px border
 * @desc {en} 0.5px border on top left
 * @param @color 边框颜色
 * @param @color {en} border-color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *     .hairline-top-left(#000);
 * }
 * ```
 */
/**
 * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
 * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
 * @param @origin-property css属性名
 * @param @origin-property {en} css property
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
 * }
 * ```
 */
/**
 * 设置Loading组件颜色
 * @desc {en} set Loading component color
 * @param @color 颜色
 * @param @color {en} color
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-loading-color(#000);
 * }
 * ```
 */
/**
 * 设置最小字号
 * @desc {en} set minimum font-size
 * @param @size 最小字号
 * @param @size {en} minimum font-size
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-font-size(10px);
 * }
 * ```
 */
/**
 * 设置content-box盒模型下元素宽度
 * @desc {en} set box width in content-box
 * @param @property css属性名
 * @param @property {en} css property
 * @param @width 元素总宽度，包含内边距
 * @param @width element width, include padding
 * @param @padding-left 左侧内边距
 * @param @padding-left {en} padding-left
 * @param @padding-right 右侧内边距
 * @param @padding-right {en} padding-right
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-content-box-width(min-width, 300px, 10px, 10px);
 * }
 * ```
 */
/**
 * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
 * @desc {en} set Steps component color
 * @param @color 当前步骤背景、标题文本颜色
 * @param @color {en} color of current step background and title text
 * @param @finish-color 已完成步骤背景色
 * @param @finish-color {en} color of finished step background
 * @example
 * ```
 * @import '@arco-design/mobile-utils/style/mixin.less';
 *
 * .demo {
 *    .set-steps-color(#FFB400);
 * }
 * ```
 */
:root {
  --prefix: var(--prefix-mobile);
  --prefix-mobile: arco;
  --base-font-size: 50;
  --arco-dark-mode-selector: .arco-theme-dark;
  --background-color: #FFFFFF;
  --dark-background-color: #17171A;
  --container-background-color: #FFFFFF;
  --dark-container-background-color: #232324;
  --card-background-color: #F7F8FA;
  --dark-card-background-color: hsla(0, 0%, 100%, 0.08);
  --font-color: #1d2129;
  --dark-font-color: #f6f6f6;
  --sub-font-color: #4e5969;
  --dark-sub-font-color: #c5c5c5;
  --sub-info-font-color: #86909c;
  --dark-sub-info-font-color: #929293;
  --line-color: #e5e6eb;
  --dark-line-color: #484849;
  --lighter-line-color: #f2f3f5;
  --dark-lighter-line-color: #2e2e30;
  --primary-color: #165DFF;
  --dark-primary-color: #3C7EFF;
  --primary-disabled-color: #94BFFF;
  --dark-primary-disabled-color: #0E32A6;
  --lighter-primary-color: #E8F3FF;
  --dark-lighter-primary-color: #000D4D;
  --danger-color: #F53F3F;
  --dark-danger-color: #F76965;
  --warning-color: #FF7D00;
  --dark-warning-color: #FF9626;
  --success-color: #00B42A;
  --dark-success-color: #27C346;
  --disabled-color: #c9cdd4;
  --dark-disabled-color: #5f5f60;
  --mask-background: rgba(0, 0, 0, 0.6);
  --mask-content-color: #FFFFFF;
  --dark-mask-content-color: rgba(255, 255, 255, 0.9);
  --mask-content-background: #FFFFFF;
  --dark-mask-content-background: #2A2A2B;
  --scroller-buffer: 10PX;
  --full-screen-z-index: 1000;
  --fixed-z-index: 100;
  --popup-mask-background: var(--mask-background);
  --dark-popup-content-background: var(--dark-mask-content-background);
  --popup-content-background: var(--mask-content-background);
  --popup-enter-transition: all 450ms cubic-bezier(0.34, 0.69, 0.1, 1);
  --popup-exit-transition: all 240ms cubic-bezier(0.34, 0.69, 0.1, 1);
  --dialog-mask-background: var(--mask-background);
  --dialog-content-width: 5.4rem;
  --dialog-content-android-width: 5.6rem;
  --dark-dialog-content-background: var(--dark-mask-content-background);
  --dialog-content-background: var(--mask-content-background);
  --dialog-content-border-radius: 0.16rem;
  --dialog-content-android-border-radius: 0.08rem;
  --dialog-ios-horizontal-padding: 0.32rem;
  --dialog-ios-vertical-padding: 0.4rem;
  --dialog-ios-header-body-gutter: 0.08rem;
  --dialog-android-horizontal-padding: 0.48rem;
  --dialog-android-vertical-padding: 0.4rem;
  --dialog-android-header-body-gutter: 0.24rem;
  --dialog-android-body-footer-gutter: 0.48rem;
  --dark-dialog-body-ios-color: var(--dark-sub-font-color);
  --dialog-body-ios-color: var(--sub-font-color);
  --dialog-body-ios-font-size: 0.3rem;
  --dialog-body-ios-line-height: 0.44rem;
  --dark-dialog-body-android-color: var(--dark-sub-font-color);
  --dialog-body-android-color: var(--sub-font-color);
  --dialog-body-android-font-size: 0.3rem;
  --dialog-body-android-line-height: 0.48rem;
  --dark-dialog-header-ios-color: var(--dark-font-color);
  --dialog-header-ios-color: var(--font-color);
  --dark-dialog-header-android-color: var(--dark-font-color);
  --dialog-header-android-color: var(--font-color);
  --dialog-header-ios-font-size: 0.34rem;
  --dialog-header-ios-line-height: 0.52rem;
  --dialog-header-android-font-size: 0.34rem;
  --dialog-header-android-line-height: 0.56rem;
  --dark-dialog-footer-ios-color: var(--dark-primary-color);
  --dialog-footer-ios-color: var(--primary-color);
  --dialog-footer-ios-font-size: 0.32rem;
  --dialog-footer-ios-height: 0.88rem;
  --dialog-footer-android-color: #1a74ff;
  --dialog-footer-android-font-size: 0.3rem;
  --dialog-footer-android-line-height: 0.4rem;
  --dialog-footer-android-button-gutter: 0.56rem;
  --dark-dialog-button-footer-primary-background: var(--dark-primary-color);
  --dialog-button-footer-primary-background: var(--primary-color);
  --dark-dialog-button-footer-primary-color: var(--dark-mask-content-color);
  --dialog-button-footer-primary-color: var(--mask-content-color);
  --dark-dialog-button-footer-color: var(--dark-sub-info-font-color);
  --dialog-button-footer-color: var(--sub-info-font-color);
  --dialog-button-footer-height: 0.72rem;
  --dialog-button-footer-border-radius: 0.6rem;
  --dialog-button-footer-gutter: 0.16rem;
  --carousel-auto-transition: cubic-bezier(0.66, 0, 0.34, 1);
  --carousel-slide-transition: cubic-bezier(0.32, 0.94, 0.6, 1);
  --carousel-indicator-background: rgba(255, 255, 255, 0.5);
  --dark-carousel-indicator-active-background: var(--dark-mask-content-color);
  --carousel-indicator-active-background: var(--mask-content-color);
  --dark-carousel-indicator-inverse-background: var(--dark-line-color);
  --carousel-indicator-inverse-background: var(--line-color);
  --dark-carousel-indicator-active-inverse-background: var(--dark-primary-color);
  --carousel-indicator-active-inverse-background: var(--primary-color);
  --carousel-indicator-outside-padding: 0.16rem 0 0.1rem;
  --carousel-indicator-position: 0.24rem;
  --carousel-indicator-safe-padding: 0.32rem;
  --carousel-circle-indicator-gutter: 0.16rem;
  --carousel-square-indicator-gutter: 0.16rem;
  --carousel-circle-indicator-size: 6PX;
  --carousel-square-indicator-width: 0.24rem;
  --carousel-square-indicator-height: 3PX;
  --dark-carousel-item-text-color: var(--dark-mask-content-color);
  --carousel-item-text-color: var(--mask-content-color);
  --carousel-item-text-background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5.18%, rgba(0, 0, 0, 0.15) 100%);
  --carousel-item-text-height: 0.64rem;
  --carousel-item-text-padding: 0 0.24rem;
  --carousel-item-text-font-size: 0.32rem;
  --input-height: 1.08rem;
  --dark-input-disabled-color: var(--dark-disabled-color);
  --input-disabled-color: var(--disabled-color);
  --dark-input-placeholder-color: var(--dark-disabled-color);
  --input-placeholder-color: var(--disabled-color);
  --dark-input-clear-icon-color: var(--dark-disabled-color);
  --input-clear-icon-color: var(--disabled-color);
  --input-clear-icon-font-size: 16PX;
  --input-label-gutter: 0.48rem;
  --input-horizontal-padding: 0.32rem;
  --input-vertical-padding: 0.24rem;
  --dark-input-caret-color: var(--dark-primary-color);
  --input-caret-color: var(--primary-color);
  --input-label-min-width: 1.28rem;
  --input-text-font-size: 0.32rem;
  --input-text-line-height: 0.44rem;
  --textarea-font-size: 0.32rem;
  --textarea-line-height: 0.44rem;
  --textarea-padding: 0.32rem;
  --textarea-has-stat-padding: 0.32rem 0.32rem 0.88rem;
  --dark-textarea-statistic-color: var(--dark-sub-info-font-color);
  --textarea-statistic-color: var(--sub-info-font-color);
  --textarea-statistic-font-size: 0.28rem;
  --avatar-size-map: large, medium, small, smaller, ultra-small;
  --avatar-large-size: 1.12rem;
  --avatar-medium-size: 0.96rem;
  --avatar-small-size: 0.8rem;
  --avatar-smaller-size: 0.64rem;
  --avatar-ultra-small-size: 0.48rem;
  --avatar-default-overlap-large-size: 0.56rem;
  --avatar-default-overlap-medium-size: 0.48rem;
  --avatar-default-overlap-small-size: 0.4rem;
  --avatar-default-overlap-smaller-size: 0.32rem;
  --avatar-default-overlap-ultra-small-size: 0.24rem;
  --avatar-background: #4080FF;
  --dark-avatar-background: #306FFF;
  --dark-avatar-default-overlap-background: var(--dark-disabled-color);
  --avatar-default-overlap-background: var(--disabled-color);
  --dark-avatar-text-font-color: var(--dark-mask-content-color);
  --avatar-text-font-color: var(--mask-content-color);
  --avatar-large-text-font-size: 0.32rem;
  --avatar-medium-text-font-size: 0.32rem;
  --avatar-small-text-font-size: 0.28rem;
  --avatar-smaller-text-font-size: 0.24rem;
  --avatar-ultra-small-text-font-size: 0.2rem;
  --avatar-group-large-size-offset: -0.24rem;
  --avatar-group-large-size-border: 0.03rem;
  --avatar-group-medium-size-offset: -0.24rem;
  --avatar-group-medium-size-border: 0.03rem;
  --avatar-group-small-size-offset: -0.24rem;
  --avatar-group-small-size-border: 0.03rem;
  --avatar-group-smaller-size-offset: -0.16rem;
  --avatar-group-smaller-size-border: 0.02rem;
  --avatar-group-ultra-small-size-offset: -0.16rem;
  --avatar-group-ultra-small-size-border: 0.02rem;
  --dark-avatar-group-border-color: var(--dark-background-color);
  --avatar-group-border-color: var(--background-color);
  --avatar-info-box-large-size: 1.76rem;
  --avatar-info-box-medium-size: 1.6rem;
  --avatar-info-box-small-size: 1.6rem;
  --avatar-info-box-smaller-size: 1.28rem;
  --avatar-info-box-ultra-small-size: 1.12rem;
  --avatar-name-large-font-size: 0.36rem;
  --avatar-name-large-line-height: 0.52rem;
  --avatar-desc-large-font-size: 0.28rem;
  --avatar-desc-large-line-height: 0.4rem;
  --avatar-desc-large-margin-top: 0.04rem;
  --avatar-name-medium-font-size: 0.36rem;
  --avatar-name-medium-line-height: 0.52rem;
  --avatar-desc-medium-font-size: 0.28rem;
  --avatar-desc-medium-line-height: 0.4rem;
  --avatar-desc-medium-margin-top: 0.04rem;
  --avatar-name-small-font-size: 0.32rem;
  --avatar-name-small-line-height: 0.48rem;
  --avatar-desc-small-font-size: 0.24rem;
  --avatar-desc-small-line-height: 0.32rem;
  --avatar-desc-small-margin-top: 0;
  --avatar-name-smaller-font-size: 0.28rem;
  --avatar-name-smaller-line-height: 0.4rem;
  --avatar-desc-smaller-font-size: 0.24rem;
  --avatar-desc-smaller-line-height: 0.32rem;
  --avatar-desc-smaller-margin-top: 0;
  --avatar-name-ultra-small-font-size: 0.26rem;
  --avatar-name-ultra-small-line-height: 0.36rem;
  --avatar-desc-ultra-small-font-size: 0.2rem;
  --avatar-desc-ultra-small-line-height: 0.28rem;
  --avatar-desc-ultra-small-margin-top: 0.04rem;
  --dark-avatar-name-color: var(--dark-font-color);
  --avatar-name-color: var(--font-color);
  --dark-avatar-desc-color: var(--dark-sub-info-font-color);
  --avatar-desc-color: var(--sub-info-font-color);
  --button-line-height: 1.2;
  --button-radius: 2PX;
  --button-icon-text-gutter: 0.08rem;
  --dark-button-primary-background: var(--dark-primary-color);
  --button-primary-background: var(--primary-color);
  --button-primary-clicked-background: #0E42D2;
  --dark-button-primary-clicked-background: #689FFF;
  --dark-button-primary-disabled-background: var(--dark-primary-disabled-color);
  --button-primary-disabled-background: var(--primary-disabled-color);
  --dark-button-primary-text-color: var(--dark-mask-content-color);
  --button-primary-text-color: var(--mask-content-color);
  --dark-button-primary-disabled-text-color: var(--dark-lighter-primary-color);
  --button-primary-disabled-text-color: var(--lighter-primary-color);
  --dark-button-default-background: var(--dark-lighter-primary-color);
  --button-default-background: var(--lighter-primary-color);
  --dark-button-default-clicked-background: var(--dark-primary-disabled-color);
  --button-default-clicked-background: var(--primary-disabled-color);
  --dark-button-default-disabled-background: var(--dark-lighter-primary-color);
  --button-default-disabled-background: var(--lighter-primary-color);
  --dark-button-default-text-color: var(--dark-primary-color);
  --button-default-text-color: var(--primary-color);
  --dark-button-default-disabled-text-color: var(--dark-primary-disabled-color);
  --button-default-disabled-text-color: var(--primary-disabled-color);
  --button-ghost-background: transparent;
  --dark-button-ghost-clicked-background: var(--dark-lighter-primary-color);
  --button-ghost-clicked-background: var(--lighter-primary-color);
  --button-ghost-disabled-background: transparent;
  --dark-button-ghost-text-color: var(--dark-primary-color);
  --button-ghost-text-color: var(--primary-color);
  --dark-button-ghost-disabled-text-color: var(--dark-primary-disabled-color);
  --button-ghost-disabled-text-color: var(--primary-disabled-color);
  --button-huge-padding: 0 0.32rem;
  --button-huge-height: 0.88rem;
  --button-huge-text-size: 0.32rem;
  --button-large-padding: 0 0.32rem;
  --button-large-height: 0.72rem;
  --button-large-text-size: 0.3rem;
  --button-medium-padding: 0 0.32rem;
  --button-medium-height: 0.64rem;
  --button-medium-text-size: 0.28rem;
  --button-small-padding: 0 0.16rem;
  --button-small-height: 0.56rem;
  --button-small-text-size: 0.28rem;
  --button-mini-padding: 0 0.16rem;
  --button-mini-height: 0.48rem;
  --button-mini-text-size: 0.24rem;
  --ellipsis-default-text-size: 0.32rem;
  --ellipsis-float-ellipsis-node-background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff);
  --dark-ellipsis-float-ellipsis-node-background: linear-gradient(90deg, rgba(35, 35, 36, 0), #232324 20PX, #232324);
  --ellipsis-float-ellipsis-node-padding-left: 20PX;
  --dark-checkbox-icon-color: var(--dark-line-color);
  --checkbox-icon-color: var(--line-color);
  --checkbox-icon-font-size: 20PX;
  --checkbox-icon-margin-right: 0.16rem;
  --dark-checkbox-icon-checked-color: var(--dark-primary-color);
  --checkbox-icon-checked-color: var(--primary-color);
  --dark-checkbox-icon-disabled-color: var(--dark-card-background-color);
  --checkbox-icon-disabled-color: var(--card-background-color);
  --dark-checkbox-icon-checked-disabled-color: var(--dark-lighter-primary-color);
  --checkbox-icon-checked-disabled-color: var(--lighter-primary-color);
  --checkbox-text-font-size: 0.32rem;
  --checkbox-text-disabled-opacity: 0.5;
  --checkbox-group-gutter: 0.48rem;
  --tabs-tab-bar-font-size: 0.3rem;
  --dark-tabs-tab-bar-background: var(--dark-background-color);
  --tabs-tab-bar-background: var(--background-color);
  --tabs-tab-bar-height: 0.84rem;
  --tabs-tab-bar-width: 1.56rem;
  --tabs-tab-bar-horizontal-height: 1.08rem;
  --tabs-tab-bar-card-height: 0.8rem;
  --dark-tabs-tab-bar-card-color: var(--dark-primary-color);
  --tabs-tab-bar-card-color: var(--primary-color);
  --dark-tabs-tab-bar-card-text-color: var(--dark-mask-content-color);
  --tabs-tab-bar-card-text-color: var(--mask-content-color);
  --tabs-tab-bar-card-border-radius: 2PX;
  --dark-tabs-tab-bar-line-active-color: var(--dark-primary-color);
  --tabs-tab-bar-line-active-color: var(--primary-color);
  --tabs-tab-bar-line-gutter: 0.8rem;
  --tabs-tab-bar-tag-gutter: 0.32rem;
  --tabs-tab-bar-tag-height: 1.2rem;
  --tabs-tab-bar-tag-vertical-padding: 0.24rem;
  --dark-tabs-tab-bar-tag-background: var(--dark-card-background-color);
  --tabs-tab-bar-tag-background: var(--card-background-color);
  --dark-tabs-tab-bar-tag-text-color: var(--dark-font-color);
  --tabs-tab-bar-tag-text-color: var(--font-color);
  --dark-tabs-tab-bar-tag-active-background: var(--dark-primary-color);
  --tabs-tab-bar-tag-active-background: var(--primary-color);
  --dark-tabs-tab-bar-tag-active-text-color: var(--dark-mask-content-color);
  --tabs-tab-bar-tag-active-text-color: var(--mask-content-color);
  --tabs-tab-bar-tag-padding: 0 0.32rem;
  --dark-tabs-underline-color: var(--dark-primary-color);
  --tabs-underline-color: var(--primary-color);
  --tabs-underline-thick: 2PX;
  --tabs-underline-size: 0.48rem;
  --tabs-underline-border-radius: 2PX;
  --tab-bar-height: 1rem;
  --tab-bar-font-size: 0.2rem;
  --tab-bar-icon-size: 0.4rem;
  --tab-bar-only-title-font-size: 0.32rem;
  --dark-tab-bar-color: var(--dark-sub-info-font-color);
  --tab-bar-color: var(--sub-info-font-color);
  --dark-tab-bar-active-color: var(--dark-primary-color);
  --tab-bar-active-color: var(--primary-color);
  --tab-bar-title-line-height: 0.28rem;
  --tab-bar-only-title-line-height: 0.44rem;
  --tab-bar-title-margin: 0 0 0.1rem 0;
  --tab-bar-item-icon-margin: 0.14rem 0 0.08rem;
  --nav-bar-height: 0.88rem;
  --dark-nav-bar-bottom-border-color: var(--dark-line-color);
  --nav-bar-bottom-border-color: var(--line-color);
  --dark-nav-bar-background: var(--dark-background-color);
  --nav-bar-background: var(--background-color);
  --dark-nav-bar-font-color: var(--dark-font-color);
  --nav-bar-font-color: var(--font-color);
  --nav-bar-two-sides-font-size: 0.32rem;
  --nav-bar-two-sides-padding: 0 0.32rem;
  --nav-bar-title-font-size: 0.34rem;
  --nav-bar-title-text-font-size: 0.34rem;
  --nav-bar-title-padding: 0 0.92rem;
  --nav-bar-back-icon-height: 0.32rem;
  --dark-image-placeholder-background: var(--dark-card-background-color);
  --image-placeholder-background: var(--card-background-color);
  --dark-image-loading-icon-color: var(--dark-mask-content-color);
  --image-loading-icon-color: var(--mask-content-color);
  --dark-image-retry-icon-color: var(--dark-mask-content-color);
  --image-retry-icon-color: var(--mask-content-color);
  --image-mask-background: var(--mask-background);
  --image-transition-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  --image-inner-font-size: 0.32rem;
  --image-retry-font-size: 0.32rem;
  --dark-switch-text-color: var(--dark-sub-font-color);
  --switch-text-color: var(--sub-font-color);
  --dark-switch-text-checked-color: var(--dark-mask-content-color);
  --switch-text-checked-color: var(--mask-content-color);
  --switch-inner-background: #FFFFFF;
  --switch-inner-transition: all 0.2s;
  --switch-inner-fully-border-radius: 50%;
  --switch-inner-semi-border-radius: 1PX;
  --switch-android-width: 40PX;
  --switch-android-height: 24PX;
  --switch-android-padding: 2PX;
  --switch-android-inner-diameter-size: 20PX;
  --switch-android-inner-box-shadow: 0 2PX 4PX 0 rgba(0, 0, 0, 0.08);
  --switch-android-fully-border-radius: 20PX;
  --switch-android-semi-border-radius: 2PX;
  --switch-android-checked-inner-transform: translateX(16PX);
  --switch-android-text-font-size: 12PX;
  --switch-android-text-gap-size: 5PX;
  --dark-switch-android-background: var(--dark-line-color);
  --switch-android-background: var(--line-color);
  --dark-switch-android-checked-background: var(--dark-primary-color);
  --switch-android-checked-background: var(--primary-color);
  --dark-switch-android-disabled-checked-background: var(--dark-primary-disabled-color);
  --switch-android-disabled-checked-background: var(--primary-disabled-color);
  --dark-switch-android-disabled-background: var(--dark-lighter-line-color);
  --switch-android-disabled-background: var(--lighter-line-color);
  --switch-ios-width: 1.02rem;
  --switch-ios-height: 0.62rem;
  --switch-ios-padding: 0.04rem;
  --switch-ios-inner-diameter-size: 0.54rem;
  --switch-ios-inner-border-color: rgba(0, 0, 0, 0.04);
  --switch-ios-inner-box-shadow: 0 3PX 2PX 0 rgba(0, 0, 0, 0.12);
  --switch-ios-fully-border-radius: 0.32rem;
  --switch-ios-semi-border-radius: 0.04rem;
  --switch-ios-checked-inner-transform: translateX(0.4rem);
  --switch-ios-text-font-size: 0.28rem;
  --switch-ios-text-gap-size: 0.12rem;
  --switch-ios-background: rgba(17, 17, 17, 0.15);
  --switch-ios-checked-background: #34C759;
  --switch-ios-disabled-checked-background: #4DD865;
  --switch-ios-disabled-checked-opacity: 0.3;
  --switch-ios-disabled-background: rgba(120, 120, 128, 0.16);
  --toast-background: rgba(0, 0, 0, 0.8);
  --dark-toast-text-color: var(--dark-mask-content-color);
  --toast-text-color: var(--mask-content-color);
  --toast-font-size: 0.32rem;
  --toast-line-height: 0.48rem;
  --toast-border-radius: 0.08rem;
  --toast-loading-arc-background-color: #666666;
  --toast-loading-inner-font-size: 0.24rem;
  --toast-safe-padding: 0 0.32rem;
  --toast-from-top-position: 30%;
  --toast-from-bottom-position: 30%;
  --toast-horizontal-padding: 0.16rem 0.32rem;
  --toast-horizontal-icon-size: 0.32rem;
  --toast-horizontal-icon-content-gutter: 0.16rem;
  --toast-vertical-padding: 0.32rem;
  --toast-vertical-icon-size: 0.48rem;
  --toast-vertical-icon-content-gutter: 0.16rem;
  --dark-loading-color: var(--dark-primary-color);
  --loading-color: var(--primary-color);
  --dark-loading-arc-background-color: var(--dark-line-color);
  --loading-arc-background-color: var(--line-color);
  --loading-dot-size: 6PX;
  --loading-dot-gutter: 0.12rem;
  --picker-view-font-size: 0.32rem;
  --picker-view-cell-height: 0.88rem;
  --picker-view-wrapper-height: 4.4rem;
  --picker-view-mask-top-background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%);
  --dark-picker-view-mask-top-background: linear-gradient(to bottom, #2a2a2b 0%, rgba(42, 42, 43, 0.7) 65%);
  --picker-view-mask-bottom-background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%);
  --dark-picker-view-mask-bottom-background: linear-gradient(to top, #2a2a2b 0%, rgba(42, 42, 43, 0.7) 65%);
  --dark-picker-view-selection-border-color: var(--dark-line-color);
  --picker-view-selection-border-color: var(--line-color);
  --picker-wrapper-shadow: 0 2PX 8PX rgba(0, 0, 0, 0.15);
  --picker-wrapper-border-radius: 0.08rem;
  --picker-header-height: 1.08rem;
  --dark-picker-header-background: var(--dark-mask-content-background);
  --picker-header-background: var(--mask-content-background);
  --picker-title-font-size: 0.32rem;
  --picker-title-padding: 0 1.2rem;
  --picker-button-font-size: 0.3rem;
  --picker-button-padding: 0.32rem;
  --dark-picker-left-btn-color: var(--dark-primary-color);
  --picker-left-btn-color: var(--primary-color);
  --dark-picker-right-btn-color: var(--dark-primary-color);
  --picker-right-btn-color: var(--primary-color);
  --popover-arrow-size: 9PX;
  --popover-arrow-border-radius: 1PX;
  --popover-inner-border-radius: 4PX;
  --popover-inner-opacity: 0.8;
  --popover-inner-transition: opacity 0.3s ease-in-out;
  --popover-inner-white-theme-opacity: 1;
  --popover-inner-background-shadow: 0 2PX 8PX 0 rgba(0, 0, 0, 0.1);
  --popover-inner-top-arrow-shadow: 6PX 6PX 8PX 0 rgba(0, 0, 0, 0.04);
  --popover-inner-bottom-arrow-shadow: -6PX -6PX 8PX 0 rgba(0, 0, 0, 0.04);
  --popover-background-color: #000000;
  --dark-popover-white-theme-background-color: var(--dark-mask-content-background);
  --popover-white-theme-background-color: var(--mask-content-background);
  --dark-popover-content-color: var(--dark-mask-content-color);
  --popover-content-color: var(--mask-content-color);
  --popover-content-padding: 0.16rem 0.24rem;
  --popover-content-android-padding: 0.2rem 0.24rem 0.12rem;
  --popover-content-font-size: 0.28rem;
  --popover-content-line-height: 0.4rem;
  --popover-content-disabled-color: rgba(255, 255, 255, 0.3);
  --dark-popover-content-white-theme-color: var(--dark-font-color);
  --popover-content-white-theme-color: var(--font-color);
  --dark-popover-content-white-theme-disabled-color: var(--dark-disabled-color);
  --popover-content-white-theme-disabled-color: var(--disabled-color);
  --popover-content-border-color: rgba(247, 248, 250, 0.1);
  --dark-popover-content-white-theme-border-color: var(--dark-line-color);
  --popover-content-white-theme-border-color: var(--line-color);
  --popover-shadow-color: rgba(0, 0, 0, 0.1);
  --popover-menu-content-padding: 0 0.24rem;
  --dark-popover-menu-icon-white-theme-color: var(--dark-sub-font-color);
  --popover-menu-icon-white-theme-color: var(--sub-font-color);
  --popover-menu-active-background: #242425;
  --dark-popover-menu-active-white-theme-background: var(--dark-card-background-color);
  --popover-menu-active-white-theme-background: var(--card-background-color);
  --popover-horizontal-menu-max-width: 5.76rem;
  --popover-horizontal-menu-item-size: 1.44rem;
  --popover-horizontal-menu-item-padding: 0.24rem 0;
  --popover-horizontal-menu-icon-margin: 0 0 0.16rem 0;
  --popover-icon-divider-color: rgba(255, 255, 255, 0.3);
  --popover-icon-divider-height: 0.24rem;
  --popover-icon-size: 0.32rem;
  --popover-icon-padding: 0 0.2rem 0 0.22rem;
  --popover-text-suffix-edge: 0.24rem;
  --popover-mask-background: var(--mask-background);
  --load-more-font-size: 0.28rem;
  --dark-load-more-text-color: var(--dark-sub-info-font-color);
  --load-more-text-color: var(--sub-info-font-color);
  --dark-cell-text-color: var(--dark-sub-info-font-color);
  --cell-text-color: var(--sub-info-font-color);
  --dark-cell-label-color: var(--dark-font-color);
  --cell-label-color: var(--font-color);
  --dark-cell-label-icon-color: var(--dark-sub-font-color);
  --cell-label-icon-color: var(--sub-font-color);
  --dark-cell-desc-color: var(--dark-sub-info-font-color);
  --cell-desc-color: var(--sub-info-font-color);
  --cell-desc-font-size: 0.28rem;
  --cell-desc-margin-top: 0.04rem;
  --cell-content-font-size: 0.28rem;
  --dark-cell-arrow-color: var(--dark-disabled-color);
  --cell-arrow-color: var(--disabled-color);
  --cell-arrow-gutter: 0.16rem;
  --cell-arrow-font-size: 0.24rem;
  --dark-cell-background-color: var(--dark-container-background-color);
  --cell-background-color: var(--container-background-color);
  --cell-font-size: 0.32rem;
  --cell-horizontal-padding: 0.32rem;
  --cell-item-height: 1.08rem;
  --cell-item-has-desc-height: 1.48rem;
  --cell-label-gutter: 0.48rem;
  --cell-label-icon-gutter: 0.24rem;
  --cell-label-icon-font-size: 0.4rem;
  --cell-extra-font-size: 0.28rem;
  --cell-extra-line-height: 0.4rem;
  --cell-extra-padding: 0.24rem 0.32rem;
  --tag-font-size: 0.24rem;
  --tag-icon-font-size: 0.24rem;
  --tag-icon-margin-right: 0.04rem;
  --tag-icon-close-margin-left: 0.08rem;
  --tag-small-size-height: 0.36rem;
  --tag-small-size-padding: 0.08rem;
  --tag-medium-size-height: 0.4rem;
  --tag-medium-size-padding: 0.08rem;
  --tag-large-size-height: 0.48rem;
  --tag-large-size-padding: 0.12rem;
  --tag-filleted-padding: 0.16rem;
  --tag-border-radius: 2PX;
  --dark-tag-primary-color: var(--dark-primary-color);
  --tag-primary-color: var(--primary-color);
  --dark-tag-primary-background-color: var(--dark-lighter-primary-color);
  --tag-primary-background-color: var(--lighter-primary-color);
  --dark-tag-primary-border-color: var(--dark-primary-color);
  --tag-primary-border-color: var(--primary-color);
  --dark-tag-hollow-color: var(--dark-primary-color);
  --tag-hollow-color: var(--primary-color);
  --dark-tag-hollow-border-color: var(--dark-primary-color);
  --tag-hollow-border-color: var(--primary-color);
  --dark-tag-solid-color: var(--dark-mask-content-color);
  --tag-solid-color: var(--mask-content-color);
  --dark-tag-solid-background-color: var(--dark-primary-color);
  --tag-solid-background-color: var(--primary-color);
  --dark-tag-solid-border-color: var(--dark-primary-color);
  --tag-solid-border-color: var(--primary-color);
  --tag-list-horizontal-gutter: 0.16rem;
  --tag-list-vertical-gutter: 0;
  --dark-tag-list-add-border-color: var(--dark-line-color);
  --tag-list-add-border-color: var(--line-color);
  --dark-tag-list-add-background: var(--dark-lighter-line-color);
  --tag-list-add-background: var(--lighter-line-color);
  --dark-tag-list-add-color: var(--dark-sub-font-color);
  --tag-list-add-color: var(--sub-font-color);
  --image-preview-mask-background: rgba(0, 0, 0, 0.9);
  --image-preview-indicator-font-size: 0.28rem;
  --image-preview-indicator-padding: 0.24rem 0.4rem;
  --image-preview-indicator-background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
  --image-preview-thumb-transition: all cubic-bezier(0.34, 0.69, 0.1, 1);
  --dropdown-menu-padding: 0.3rem;
  --dropdown-menu-font-size: 0.32rem;
  --dropdown-menu-line-height: 0.44rem;
  --dark-dropdown-menu-color: var(--dark-font-color);
  --dropdown-menu-color: var(--font-color);
  --dark-dropdown-menu-selected-color: var(--dark-primary-color);
  --dropdown-menu-selected-color: var(--primary-color);
  --dark-dropdown-menu-disabled-color: var(--dark-disabled-color);
  --dropdown-menu-disabled-color: var(--disabled-color);
  --dark-dropdown-menu-tip-color: var(--dark-sub-info-font-color);
  --dropdown-menu-tip-color: var(--sub-info-font-color);
  --dropdown-menu-tip-min-width: 0.36rem;
  --dropdown-menu-tip-padding-right: 0.32rem;
  --dropdown-menu-label-max-width: 1.92rem;
  --dropdown-menu-icon-size: 12PX;
  --dark-dropdown-menu-icon-color: var(--dark-disabled-color);
  --dropdown-menu-icon-color: var(--disabled-color);
  --dark-dropdown-menu-icon-selected-color: var(--dark-primary-color);
  --dropdown-menu-icon-selected-color: var(--primary-color);
  --dropdown-menu-icon-margin-left: 4PX;
  --dark-dropdown-options-background-color: var(--dark-container-background-color);
  --dropdown-options-background-color: var(--container-background-color);
  --dropdown-options-item-padding: 0.32rem;
  --dropdown-options-item-font-size: 0.32rem;
  --dropdown-options-item-line-height: 0.44rem;
  --dark-dropdown-options-item-color: var(--dark-font-color);
  --dropdown-options-item-color: var(--font-color);
  --dark-dropdown-options-item-selected-color: var(--dark-primary-color);
  --dropdown-options-item-selected-color: var(--primary-color);
  --dark-dropdown-options-item-disabled-color: var(--dark-disabled-color);
  --dropdown-options-item-disabled-color: var(--disabled-color);
  --dropdown-options-item-icon-right: 0.32rem;
  --dropdown-mask-background-color: var(--mask-background);
  --dropdown-multi-rows-options-gutter: 0.24rem;
  --dropdown-multi-rows-options-item-padding: 0.16rem;
  --dropdown-multi-rows-options-item-font-size: 0.28rem;
  --dropdown-multi-rows-options-item-line-height: 0.4rem;
  --dark-dropdown-multi-rows-options-item-color: var(--dark-sub-font-color);
  --dropdown-multi-rows-options-item-color: var(--sub-font-color);
  --dropdown-multi-rows-options-item-border-radius: 2PX;
  --dark-dropdown-multi-rows-options-item-background: var(--dark-card-background-color);
  --dropdown-multi-rows-options-item-background: var(--card-background-color);
  --dark-dropdown-multi-rows-options-item-selected-background: var(--dark-lighter-primary-color);
  --dropdown-multi-rows-options-item-selected-background: var(--lighter-primary-color);
  --dark-dropdown-multi-rows-options-item-selected-color: var(--dark-primary-color);
  --dropdown-multi-rows-options-item-selected-color: var(--primary-color);
  --dropdown-multi-rows-options-container-padding: 0.32rem;
  --dropdown-multi-rows-options-container-margin: 0 -0.24rem -0.24rem 0;
  --dark-collapse-disabled-header-color: var(--dark-disabled-color);
  --collapse-disabled-header-color: var(--disabled-color);
  --dark-collapse-header-background: var(--dark-container-background-color);
  --collapse-header-background: var(--container-background-color);
  --collapse-header-height: 1.08rem;
  --collapse-header-font-size: 0.32rem;
  --collapse-header-margin-left: 0.32rem;
  --collapse-header-padding: 0.32rem 0.32rem 0.32rem 0;
  --dark-collapse-header-color: var(--dark-font-color);
  --collapse-header-color: var(--font-color);
  --collapse-header-line-height: 0.44rem;
  --dark-collapse-header-icon-color: var(--dark-disabled-color);
  --collapse-header-icon-color: var(--disabled-color);
  --collapse-content-padding: 0.24rem 0.32rem;
  --collapse-content-font-size: 0.28rem;
  --dark-collapse-content-color: var(--dark-sub-info-font-color);
  --collapse-content-color: var(--sub-info-font-color);
  --collapse-content-line-height: 0.44rem;
  --dark-pull-refresh-label-background-color: var(--dark-card-background-color);
  --pull-refresh-label-background-color: var(--card-background-color);
  --pull-refresh-label-font-size: 0.24rem;
  --dark-pull-refresh-content-background-color: var(--dark-background-color);
  --pull-refresh-content-background-color: var(--background-color);
  --dark-pull-refresh-label-text-color: var(--dark-sub-info-font-color);
  --pull-refresh-label-text-color: var(--sub-info-font-color);
  --dark-pull-refresh-label-loading-color: var(--dark-sub-info-font-color);
  --pull-refresh-label-loading-color: var(--sub-info-font-color);
  --slider-padding: 0.22rem 0.32rem;
  --slider-mask-padding: 0.3rem;
  --slider-has-mark-padding-bottom: 0.7rem;
  --slider-label-font-size: 0.32rem;
  --slider-label-gutter: 0.24rem;
  --dark-slider-text-color: var(--dark-sub-info-font-color);
  --slider-text-color: var(--sub-info-font-color);
  --dark-slider-line-color: var(--dark-line-color);
  --slider-line-color: var(--line-color);
  --slider-line-border-radius: 0.08rem;
  --dark-slider-line-activated-color: var(--dark-primary-color);
  --slider-line-activated-color: var(--primary-color);
  --dark-slider-line-disabled-color: var(--dark-primary-disabled-color);
  --slider-line-disabled-color: var(--primary-disabled-color);
  --slider-thumb-width: 0.48rem;
  --slider-thumb-height: 0.48rem;
  --slider-thumb-border-radius: 50%;
  --slider-thumb-box-shadow: 0 2PX 8PX rgba(0, 0, 0, 0.1);
  --dark-slider-thumb-background: var(--dark-mask-content-background);
  --slider-thumb-background: var(--mask-content-background);
  --slider-popover-arrow-size: 6PX;
  --slider-popover-font-size: 0.24rem;
  --slider-popover-line-height: 0.34rem;
  --slider-popover-gutter: 0.28rem;
  --slider-mark-width: 6PX;
  --slider-mark-height: 6PX;
  --slider-mark-border-radius: 50%;
  --slider-mark-label-font-size: 0.28rem;
  --slider-mark-label-line-height: 0.4rem;
  --slider-horizontal-mark-label-top: 0.38rem;
  --slider-vertical-mark-label-right: 0.26rem;
  --dark-swipe-load-label-background: var(--dark-card-background-color);
  --swipe-load-label-background: var(--card-background-color);
  --swipe-load-label-border-radius: 50%;
  --swipe-load-label-text-margin-left: 0.4rem;
  --swipe-load-label-text-width: 0.4rem;
  --dark-swipe-load-label-text-color: var(--dark-font-color);
  --swipe-load-label-text-color: var(--font-color);
  --swipe-load-label-text-font-size: 0.24rem;
  --notice-bar-wrapper-padding: 0 0.32rem;
  --notice-bar-background: #FFF7E8;
  --dark-notice-bar-background: #4D1B00;
  --dark-notice-bar-color: var(--dark-warning-color);
  --notice-bar-color: var(--warning-color);
  --notice-bar-gradient-background: linear-gradient(to right, #fff7e8, rgba(255, 247, 232, 0));
  --dark-notice-bar-gradient-background: linear-gradient(to right, #4D1B00, rgba(77, 27, 0, 0));
  --notice-bar-line-height: 0.4rem;
  --notice-bar-text-font-size: 0.28rem;
  --notice-bar-icon-font-size: 16PX;
  --notice-bar-single-line-height: 0.72rem;
  --notice-bar-vertical-padding: 0.16rem;
  --notice-bar-horizontal-padding: 0.16rem;
  --notice-bar-gradient-width: 0.16rem;
  --dark-notify-success-background: var(--dark-success-color);
  --notify-success-background: var(--success-color);
  --dark-notify-error-background: var(--dark-danger-color);
  --notify-error-background: var(--danger-color);
  --dark-notify-warn-background: var(--dark-warning-color);
  --notify-warn-background: var(--warning-color);
  --dark-notify-font-color: var(--dark-mask-content-color);
  --notify-font-color: var(--mask-content-color);
  --dark-notify-info-font-color: var(--dark-primary-color);
  --notify-info-font-color: var(--primary-color);
  --notify-font-size: 0.28rem;
  --notify-min-height: 0.72rem;
  --steps-padding: 0.32rem 0;
  --steps-tail-border-radius: 2PX;
  --steps-tail-horizontal-gutter: 18PX;
  --steps-tail-vertical-gutter: 14PX;
  --steps-tail-horizontal-padding: 0 var(--steps-tail-horizontal-gutter);
  --steps-tail-vertical-padding: var(--steps-tail-vertical-gutter) 0;
  --steps-tail-horizontal-left: 9PX;
  --steps-tail-vertical-top: 9PX;
  --steps-tail-standard-size: 1PX;
  --dark-steps-tail-standard-background: var(--dark-line-color);
  --steps-tail-standard-background: var(--line-color);
  --dark-steps-tail-finish-background: var(--dark-primary-color);
  --steps-tail-finish-background: var(--primary-color);
  --dark-steps-finish-icon-num-background: var(--dark-lighter-primary-color);
  --steps-finish-icon-num-background: var(--lighter-primary-color);
  --dark-steps-process-icon-num-background: var(--dark-primary-color);
  --steps-process-icon-num-background: var(--primary-color);
  --dark-steps-wait-icon-num-background: var(--dark-lighter-line-color);
  --steps-wait-icon-num-background: var(--lighter-line-color);
  --dark-steps-error-icon-num-background: var(--dark-danger-color);
  --steps-error-icon-num-background: var(--danger-color);
  --steps-icon-svg-standard-font-size: 10PX;
  --dark-steps-finish-icon-svg-color: var(--dark-primary-color);
  --steps-finish-icon-svg-color: var(--primary-color);
  --dark-steps-error-icon-svg-color: var(--dark-mask-content-color);
  --steps-error-icon-svg-color: var(--mask-content-color);
  --steps-error-icon-svg-font-size: 8PX;
  --steps-icon-num-font-size: 12PX;
  --steps-icon-num-line-height: 18PX;
  --dark-steps-icon-num-color: var(--dark-sub-info-font-color);
  --steps-icon-num-color: var(--sub-info-font-color);
  --dark-steps-process-icon-num-color: var(--dark-mask-content-color);
  --steps-process-icon-num-color: var(--mask-content-color);
  --dark-steps-finish-dot-border-color: var(--dark-primary-color);
  --steps-finish-dot-border-color: var(--primary-color);
  --dark-steps-process-dot-background: var(--dark-primary-color);
  --steps-process-dot-background: var(--primary-color);
  --dark-steps-wait-dot-border-color: var(--dark-sub-info-font-color);
  --steps-wait-dot-border-color: var(--sub-info-font-color);
  --dark-steps-finish-title-color: var(--dark-font-color);
  --steps-finish-title-color: var(--font-color);
  --dark-steps-error-title-color: var(--dark-danger-color);
  --steps-error-title-color: var(--danger-color);
  --dark-steps-process-title-color: var(--dark-primary-color);
  --steps-process-title-color: var(--primary-color);
  --dark-steps-wait-title-color: var(--dark-sub-info-font-color);
  --steps-wait-title-color: var(--sub-info-font-color);
  --dark-steps-description-color: var(--dark-sub-font-color);
  --steps-description-color: var(--sub-font-color);
  --dark-steps-wait-description-color: var(--dark-sub-info-font-color);
  --steps-wait-description-color: var(--sub-info-font-color);
  --steps-icon-width: 18PX;
  --steps-icon-height: 18PX;
  --steps-dot-width: 8PX;
  --steps-dot-height: 8PX;
  --steps-dot-border-width: 1.5PX;
  --steps-horizontal-content-margin-top: 0.1rem;
  --steps-vertical-content-margin-left: 0.26rem;
  --steps-vertical-content-padding-bottom: 0.5rem;
  --steps-title-font-size: 0.28rem;
  --steps-title-line-height: 0.4rem;
  --steps-description-font-size: 0.24rem;
  --steps-description-line-height: 0.36rem;
  --steps-description-margin-top: 0.04rem;
  --steps-vertical-padding-bottom: 0;
  --steps-vertical-padding-left: 0.4rem;
  --dark-steps-process-with-config-item-icon-color: var(--dark-mask-content-color);
  --steps-process-with-config-item-icon-color: var(--mask-content-color);
  --swipe-action-open-transition: cubic-bezier(0.2, 0.8, 0.32, 1.28);
  --swipe-action-close-transition: cubic-bezier(0.34, 0.69, 0.1, 1);
  --swipe-action-info-padding: 0.32rem;
  --swipe-action-info-bounce-buffer: 0.6rem;
  --swipe-action-text-font-size: 0.32rem;
  --swipe-action-text-line-height: 0.44rem;
  --dark-swipe-action-text-color: var(--dark-mask-content-color);
  --swipe-action-text-color: var(--mask-content-color);
  --swipe-action-icon-width: 0.4rem;
  --swipe-action-icon-height: 0.4rem;
  --swipe-action-icon-margin-right: 0.08rem;
  --dark-badge-background-color: var(--dark-danger-color);
  --badge-background-color: var(--danger-color);
  --dark-badge-text-color: var(--dark-mask-content-color);
  --badge-text-color: var(--mask-content-color);
  --badge-font-size: 12PX;
  --badge-dot-width: 8PX;
  --badge-text-width: 16PX;
  --badge-text-padding: 4PX;
  --badge-text-deviation: -8PX;
  --badge-dot-deviation: -4PX;
  --badge-border-radius: 100PX;
  --dark-badge-border-color: var(--dark-background-color);
  --badge-border-color: var(--background-color);
  --circle-progress-font-size: 0.28rem;
  --dark-circle-progress-primary-color: var(--dark-primary-color);
  --circle-progress-primary-color: var(--primary-color);
  --dark-circle-progress-track-color: var(--dark-lighter-line-color);
  --circle-progress-track-color: var(--lighter-line-color);
  --dark-circle-progress-disabled-color: var(--dark-disabled-color);
  --circle-progress-disabled-color: var(--disabled-color);
  --dark-circle-progress-mini-track-color: var(--dark-lighter-primary-color);
  --circle-progress-mini-track-color: var(--lighter-primary-color);
  --circle-progress-linear-gradient-start-color: #4776E6;
  --circle-progress-linear-gradient-end-color: #14CAFF;
  --circle-progress-linear-gradient-text-color: #3C89EC;
  --dark-progress-primary-color: var(--dark-primary-color);
  --progress-primary-color: var(--primary-color);
  --dark-progress-track-color: var(--dark-lighter-line-color);
  --progress-track-color: var(--lighter-line-color);
  --dark-progress-disabled-color: var(--dark-disabled-color);
  --progress-disabled-color: var(--disabled-color);
  --dark-progress-disabled-text-color: var(--dark-sub-info-font-color);
  --progress-disabled-text-color: var(--sub-info-font-color);
  --progress-linear-gradient-start-color: #4776E6;
  --progress-linear-gradient-end-color: #14CAFF;
  --progress-linear-gradient-text-color: #3C89EC;
  --progress-nav-track-color: transparent;
  --progress-nav-track-height: 2PX;
  --progress-track-height: 4PX;
  --progress-inner-track-height: 18PX;
  --pagination-padding: 0.22rem 0.32rem;
  --pagination-center-field-gutter: 0.48rem;
  --pagination-field-font-size: 0.3rem;
  --pagination-field-line-height: 0.44rem;
  --pagination-field-button-min-height: 0.64rem;
  --pagination-field-button-border-radius: 0.04rem;
  --pagination-field-button-padding: 0.12rem 0.32rem;
  --pagination-field-btn-text-font-size: 0.28rem;
  --pagination-field-btn-icon-text-gutter: 0.22rem;
  --dark-pagination-field-primary-background: var(--dark-primary-color);
  --pagination-field-primary-background: var(--primary-color);
  --dark-pagination-field-primary-text-color: var(--dark-mask-content-color);
  --pagination-field-primary-text-color: var(--mask-content-color);
  --dark-pagination-field-default-background: var(--dark-card-background-color);
  --pagination-field-default-background: var(--card-background-color);
  --dark-pagination-field-default-text-color: var(--dark-font-color);
  --pagination-field-default-text-color: var(--font-color);
  --dark-pagination-field-disabled-background: var(--dark-card-background-color);
  --pagination-field-disabled-background: var(--card-background-color);
  --dark-pagination-field-disabled-text-color: var(--dark-disabled-color);
  --pagination-field-disabled-text-color: var(--disabled-color);
  --dark-pagination-field-text-color: var(--dark-font-color);
  --pagination-field-text-color: var(--font-color);
  --dark-pagination-field-text-primary-text-color: var(--dark-primary-color);
  --pagination-field-text-primary-text-color: var(--primary-color);
  --pagination-item-font-size: 0.36rem;
  --pagination-item-line-height: 0.44rem;
  --dark-pagination-item-primary-text-color: var(--dark-primary-color);
  --pagination-item-primary-text-color: var(--primary-color);
  --dark-pagination-item-default-text-color: var(--dark-font-color);
  --pagination-item-default-text-color: var(--font-color);
  --dark-progress-text-inner-color: var(--dark-mask-content-color);
  --progress-text-inner-color: var(--mask-content-color);
  --progress-text-gutter: 0.16rem;
  --progress-text-font-size: 0.28rem;
  --progress-text-follow-font-size: 0.26rem;
  --progress-text-follow-border-radius: 0.4rem;
  --progress-text-follow-width: 0.72rem;
  --progress-text-follow-height: 0.4rem;
  --transition-fade-duration: 300ms;
  --rate-icon-size: 24PX;
  --rate-icon-offset: 6PX;
  --rate-icon-active-color: #FFB400;
  --dark-rate-icon-normal-color: var(--dark-line-color);
  --rate-icon-normal-color: var(--line-color);
  --dark-rate-icon-disabled-active-color: var(--dark-disabled-color);
  --rate-icon-disabled-active-color: var(--disabled-color);
  --count-down-font-size: 0.32rem;
  --count-down-line-height: 0.44rem;
  --dark-count-down-color: var(--dark-font-color);
  --count-down-color: var(--font-color);
  --grid-icon-width: 0.64rem;
  --grid-icon-height: 0.64rem;
  --grid-vertical-text-margin-top: 0.16rem;
  --grid-vertical-title-font-size: 0.32rem;
  --grid-vertical-title-line-height: 0.4rem;
  --grid-vertical-content-margin-top: 0.04rem;
  --grid-vertical-content-font-size: 0.24rem;
  --grid-vertical-content-line-height: 0.32rem;
  --grid-horizontal-text-margin-left: 0.24rem;
  --grid-horizontal-content-margin-top: 0;
  --dark-grid-border-color: var(--dark-line-color);
  --grid-border-color: var(--line-color);
  --grid-border-size: 66.66%;
  --action-sheet-item-height: 1.08rem;
  --action-sheet-item-font-size: 0.32rem;
  --action-sheet-border-radius: 0.16rem;
  --dark-action-sheet-cancel-border-color: var(--dark-lighter-line-color);
  --action-sheet-cancel-border-color: var(--lighter-line-color);
  --action-sheet-cancel-border-width: 0.16rem;
  --action-sheet-header-padding: 0.32rem;
  --action-sheet-title-font-size: 0.32rem;
  --action-sheet-sub-title-font-size: 0.28rem;
  --search-bar-padding: 0.32rem;
  --dark-search-bar-background-color: var(--dark-background-color);
  --search-bar-background-color: var(--background-color);
  --search-bar-square-shape-border-radius: 0.04rem;
  --search-bar-round-shape-border-radius: 199.98rem;
  --search-bar-input-wrapper-height: 0.72rem;
  --search-bar-input-wrapper-padding: 0.16rem 0.28rem;
  --dark-search-bar-input-wrapper-background-color: var(--dark-lighter-line-color);
  --search-bar-input-wrapper-background-color: var(--lighter-line-color);
  --search-bar-input-wrapper-font-size: 0.28rem;
  --search-bar-input-height: 0.4rem;
  --dark-search-bar-input-caret-color: var(--dark-primary-color);
  --search-bar-input-caret-color: var(--primary-color);
  --dark-search-bar-input-placeholder-color: var(--dark-disabled-color);
  --search-bar-input-placeholder-color: var(--disabled-color);
  --search-bar-prefix-margin-right: 0.18rem;
  --dark-search-bar-clear-icon-color: var(--dark-disabled-color);
  --search-bar-clear-icon-color: var(--disabled-color);
  --search-bar-clear-icon-font-size: 16PX;
  --search-bar-clear-icon-padding-left: 0.32rem;
  --dark-search-bar-search-icon-color: var(--dark-sub-info-font-color);
  --search-bar-search-icon-color: var(--sub-info-font-color);
  --search-bar-search-icon-font-size: 0.32rem;
  --dark-search-bar-cancel-btn-color: var(--dark-primary-color);
  --search-bar-cancel-btn-color: var(--primary-color);
  --search-bar-cancel-btn-font-size: 0.3rem;
  --search-bar-cancel-btn-margin-left: 0.32rem;
  --dark-search-bar-association-background-color: var(--dark-container-background-color);
  --search-bar-association-background-color: var(--container-background-color);
  --search-bar-association-item-height: 1.04rem;
  --search-bar-association-item-padding: 0.32rem;
  --search-bar-association-item-font-size: 0.3rem;
  --dark-search-bar-association-item-color: var(--dark-font-color);
  --search-bar-association-item-color: var(--font-color);
  --dark-search-bar-association-item-highlight-color: var(--dark-primary-color);
  --search-bar-association-item-highlight-color: var(--primary-color);
  --image-picker-font-size: 0.28rem;
  --image-picker-disabled-opacity: 0.7;
  --image-picker-border-radius: 0.04rem;
  --dark-image-picker-add-background: var(--dark-card-background-color);
  --image-picker-add-background: var(--card-background-color);
  --image-picker-add-icon-font-size: 0.6rem;
  --dark-image-picker-add-icon-color: var(--dark-disabled-color);
  --image-picker-add-icon-color: var(--disabled-color);
  --image-picker-add-text-font-size: 0.24rem;
  --dark-image-picker-add-text-color: var(--dark-sub-info-font-color);
  --image-picker-add-text-color: var(--sub-info-font-color);
  --dark-image-picker-error-color: var(--dark-mask-content-color);
  --image-picker-error-color: var(--mask-content-color);
  --image-picker-error-background: rgba(0, 0, 0, 0.5);
  --dark-image-picker-close-color: var(--dark-mask-content-color);
  --image-picker-close-color: var(--mask-content-color);
  --image-picker-close-font-size: 0.24rem;
  --image-picker-close-width: 0.36rem;
  --image-picker-close-height: 0.36rem;
  --image-picker-close-background: rgba(0, 0, 0, 0.3);
  --image-picker-close-border-radius: 0 0.04rem;
  --dark-index-bar-background: var(--dark-background-color);
  --index-bar-background: var(--background-color);
  --dark-index-bar-group-active-color: var(--dark-primary-color);
  --index-bar-group-active-color: var(--primary-color);
  --index-bar-group-left-spacing: 0.32rem;
  --index-bar-group-title-height: 0.48rem;
  --index-bar-group-title-background: #f7f8fa;
  --dark-index-bar-group-title-background: #2e2e30;
  --dark-index-bar-group-title-font-color: var(--dark-sub-info-font-color);
  --index-bar-group-title-font-color: var(--sub-info-font-color);
  --index-bar-group-title-font-size: 0.28rem;
  --index-bar-group-item-height: 1.08rem;
  --index-bar-group-item-font-size: 0.32rem;
  --dark-index-bar-sidebar-active-color: var(--dark-primary-color);
  --index-bar-sidebar-active-color: var(--primary-color);
  --index-bar-sidebar-item-font-size: 0.2rem;
  --index-bar-sidebar-item-line-height: 0.28rem;
  --index-bar-sidebar-item-padding: 0.04rem 0.16rem;
  --index-bar-sidebar-item-width: 0.2rem;
  --index-bar-sidebar-sweat-padding: 0 0.16rem;
  --index-bar-sidebar-sweat-background: #333333;
  --dark-index-bar-sidebar-sweat-color: var(--dark-mask-content-color);
  --index-bar-sidebar-sweat-color: var(--mask-content-color);
  --index-bar-sidebar-sweat-right: 0.72rem;
  --index-bar-sidebar-sweat-font-size: 0.48rem;
  --index-bar-sidebar-sweat-radius: 1rem;
  --index-bar-sidebar-sweat-triangle-position: -0.56rem;
  --index-bar-sidebar-sweat-triangle-border: 0.36rem solid transparent;
  --index-bar-sidebar-toast-background: rgba(0, 0, 0, 0.8);
  --dark-index-bar-sidebar-toast-color: var(--dark-mask-content-color);
  --index-bar-sidebar-toast-color: var(--mask-content-color);
  --index-bar-sidebar-toast-height: 0.96rem;
  --index-bar-sidebar-toast-radius: 0.08rem;
  --index-bar-sidebar-toast-padding: 0 0.16rem;
  --index-bar-sidebar-toast-font-size: 0.48rem;
  --stepper-width: 1.96rem;
  --stepper-font-size: 0.28rem;
  --dark-stepper-square-border-color: var(--dark-lighter-line-color);
  --stepper-square-border-color: var(--lighter-line-color);
  --stepper-square-border-radius: 0.04rem;
  --stepper-square-background-color: transparent;
  --stepper-round-button-border-radius: 50%;
  --stepper-round-input-background-color: transparent;
  --stepper-button-size: 0.56rem;
  --stepper-button-icon-size: 0.2rem;
  --dark-stepper-default-background-color: var(--dark-card-background-color);
  --stepper-default-background-color: var(--card-background-color);
  --dark-stepper-content-color: var(--dark-font-color);
  --stepper-content-color: var(--font-color);
  --dark-stepper-disable-color: var(--dark-disabled-color);
  --stepper-disable-color: var(--disabled-color);
  --stepper-input-width: 0.8rem;
  --stepper-input-height: 0.56rem;
  --stepper-input-margin: 0 1PX;
  --form-item-label-item-font-size: 0.32rem;
  --form-item-label-item-line-height: 1.08rem;
  --dark-form-item-label-item-color: var(--dark-font-color);
  --form-item-label-item-color: var(--font-color);
  --form-item-label-item-gutter: 0.32rem;
  --form-item-label-item-width: 1.92rem;
  --dark-form-item-border-divider-color: var(--dark-line-color);
  --form-item-border-divider-color: var(--line-color);
  --dark-form-item-label-item-required-asterisk-color: var(--dark-danger-color);
  --form-item-label-item-required-asterisk-color: var(--danger-color);
  --dark-form-item-error-message-color: var(--dark-danger-color);
  --form-item-error-message-color: var(--danger-color);
  --dark-form-item-warning-message-color: var(--dark-warning-color);
  --form-item-warning-message-color: var(--warning-color);
  --time-line-dot-width: 0.18rem;
  --dark-time-line-dot-border-color: var(--dark-primary-color);
  --time-line-dot-border-color: var(--primary-color);
  --dark-time-line-dot-background-color: var(--dark-background-color);
  --time-line-dot-background-color: var(--background-color);
  --time-line-axis-width: 0.02rem;
  --dark-time-line-axis-color: var(--dark-line-color);
  --time-line-axis-color: var(--line-color);
  --time-line-label-font-size: 0.24rem;
  --dark-time-line-label-color: var(--dark-sub-info-font-color);
  --time-line-label-color: var(--sub-info-font-color);
  --time-line-content-margin-top: 0.14rem;
  --time-line-content-margin-bottom: 0.38rem;
  --time-line-content-margin-left: 0.16rem;
  --time-line-content-border-radius: 0.08rem;
  --time-line-content-font-size: 0.32rem;
  --dark-time-line-content-background-color: var(--dark-line-color);
  --time-line-content-background-color: var(--line-color);
  --dark-time-line-content-color: var(--dark-font-color);
  --time-line-content-color: var(--font-color);
  --keyboard-background: #f2f3f5;
  --dark-keyboard-background: #232324;
  --keyboard-content-padding: 0.16rem;
  --keyboard-unified-margin: 0.16rem;
  --dark-keyboard-confirm-key-background: var(--dark-primary-color);
  --keyboard-confirm-key-background: var(--primary-color);
  --dark-keyboard-confirm-key-color: var(--dark-mask-content-color);
  --keyboard-confirm-key-color: var(--mask-content-color);
  --keyboard-confirm-key-font-size: 0.36rem;
  --keyboard-key-font-weight: 500;
  --keyboard-key-font-size: 0.44rem;
  --keyboard-key-icon-size: 0.52rem;
  --keyboard-key-line-height: 0.6rem;
  --keyboard-key-background: #ffffff;
  --dark-keyboard-key-background: #2e2e30;
  --dark-keyboard-key-active-background: var(--dark-line-color);
  --keyboard-key-active-background: var(--line-color);
  --keyboard-key-border-radius: 0.08rem;
  --keyboard-key-height: 0.96rem;
  --dark-keyboard-key-color: var(--dark-font-color);
  --keyboard-key-color: var(--font-color);
  --divider-line-thickness: 1PX;
  --dark-divider-line-color: var(--dark-line-color);
  --divider-line-color: var(--line-color);
  --divider-content-font-size: 0.28rem;
  --dark-divider-content-font-color: var(--dark-sub-font-color);
  --divider-content-font-color: var(--sub-font-color);
  --divider-left-width: 0.56rem;
  --divider-right-width: 0.56rem;
  --divider-content-padding: 0.24rem;
  --divider-padding: 0.32rem;
  --skeleton-border-radius: 0;
  --dark-skeleton-background-color: var(--dark-lighter-line-color);
  --skeleton-background-color: var(--lighter-line-color);
  --skeleton-gradient-animation-color: rgba(255, 255, 255, 0.6);
  --dark-skeleton-gradient-animation-color: hsla(0, 0%, 100%, 0.08);
  --skeleton-breath-opacity: 0.4;
  --skeleton-gradient-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  --skeleton-gradient-animation-duration: 1.5s;
  --skeleton-breath-animation-duration: 1.5s;
  --skeleton-title-height: 0.32rem;
  --skeleton-paragraph-height: 0.32rem;
  --skeleton-paragraph-margin-top: 0.24rem;
  --skeleton-avatar-size: 0.64rem;
  --skeleton-grid-icon-size: 0.64rem;
  --skeleton-grid-text-width: 1.28rem;
  --skeleton-grid-text-height: 0.32rem;
  --skeleton-medium-gutter: 0.16rem;
  --skeleton-large-gutter: 0.4rem;
  --uploader-item-height: 0.72rem;
  --uploader-item-margin-top: 0.32rem;
  --uploader-item-padding: 0 0.24rem;
  --dark-uploader-item-background-color: var(--dark-card-background-color);
  --uploader-item-background-color: var(--card-background-color);
  --uploader-file-icon-font-size: 0.32rem;
  --uploader-file-icon-margin-right: 0.24rem;
  --dark-uploader-file-icon-color: var(--dark-sub-font-color);
  --uploader-file-icon-color: var(--sub-font-color);
  --uploader-item-text-font-size: 0.28rem;
  --uploader-item-border-radius: 0.04rem;
  --dark-uploader-item-text-color: var(--dark-font-color);
  --uploader-item-text-color: var(--font-color);
  --uploader-loaded-icon-font-size: 0.32rem;
  --dark-uploader-loaded-icon-color: var(--dark-success-color);
  --uploader-loaded-icon-color: var(--success-color);
  --uploader-error-text-font-size: 0.24rem;
  --dark-uploader-error-text-color: var(--dark-primary-color);
  --uploader-error-text-color: var(--primary-color);
  --uploader-delete-icon-font-size: 0.24rem;
  --uploader-delete-icon-padding-left: 0.24rem;
  --dark-uploader-delete-icon-color: var(--dark-sub-font-color);
  --uploader-delete-icon-color: var(--sub-font-color);
  --dark-uploader-disabled-delete-icon-color: var(--dark-disabled-color);
  --uploader-disabled-delete-icon-color: var(--disabled-color);
  --dark-uploader-item-text-error-color: var(--dark-danger-color);
  --uploader-item-text-error-color: var(--danger-color);
  --date-picker-range-font-size: 0.32rem;
  --date-picker-range-background-color: #FBFCFC;
  --dark-date-picker-range-background-color: #1E1E1E;
  --dark-date-picker-range-font-color: var(--dark-font-color);
  --date-picker-range-font-color: var(--font-color);
  --dark-date-picker-range-disabled-font-color: var(--dark-disabled-color);
  --date-picker-range-disabled-font-color: var(--disabled-color);
  --date-picker-range-show-padding: 0 0.32rem;
  --date-picker-range-show-min-height: 0.96rem;
  --date-picker-range-separate-min-width: 0.96rem;
}
* {
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  padding: 0;
  border: 0;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
}
button,
input,
optgroup,
select,
textarea {
  font: inherit;
  color: inherit;
}
ul,
ol,
li {
  list-style: none;
}
img,
button {
  border: 0;
  outline: 0;
}
a {
  text-decoration: none;
  outline: 0;
}
table,
tr,
td {
  border-collapse: collapse;
}
input,
textarea {
  border: 0;
  outline: 0;
  appearance: auto;
  -webkit-appearance: none;
}
code,
kbd,
pre,
samp {
  font-family: Menlo, Consolas;
}
.all-border-box,
.all-border-box * {
  box-sizing: border-box;
}
[tabIndex='0']:focus {
  outline: none;
}
body {
  background-color: var(--background-color);
}
body[arco-theme=dark] {
  background-color: var(--dark-background-color);
}
.arcodesign-pc-site-wrap {
  height: 100%;
}
.arcodesign-pc-site-wrap .arco-resource .demo-nav-intro {
  min-height: auto;
}
.arcodesign-pc-site-wrap .demo-nav-intro,
.arcodesign-pc-site-wrap .demo-doc-intro {
  min-height: 194px;
  padding: 36px 56px 20px;
  width: 100%;
}
.arcodesign-pc-site-wrap .demo-nav-intro .demo-comp-type,
.arcodesign-pc-site-wrap .demo-doc-intro .demo-comp-type,
.arcodesign-pc-site-wrap .demo-nav-intro .demo-doc-type,
.arcodesign-pc-site-wrap .demo-doc-intro .demo-doc-type {
  line-height: 20px;
  color:  var(--sub-info-font-color,  #86909c ) ;
}
.arcodesign-pc-site-wrap .demo-nav-intro .demo-comp-type .separator,
.arcodesign-pc-site-wrap .demo-doc-intro .demo-comp-type .separator,
.arcodesign-pc-site-wrap .demo-nav-intro .demo-doc-type .separator,
.arcodesign-pc-site-wrap .demo-doc-intro .demo-doc-type .separator {
  color:  var(--sub-info-font-color,  #86909c ) ;
  padding: 0 5px;
  font-weight: 900;
}
.arcodesign-pc-site-wrap .demo-nav-intro .demo-comp-type strong,
.arcodesign-pc-site-wrap .demo-doc-intro .demo-comp-type strong,
.arcodesign-pc-site-wrap .demo-nav-intro .demo-doc-type strong,
.arcodesign-pc-site-wrap .demo-doc-intro .demo-doc-type strong {
  color:  var(--font-color,  #1d2129 ) ;
  font-weight: 600;
}
.arcodesign-pc-site-wrap .demo-nav-intro .demo-comp-name,
.arcodesign-pc-site-wrap .demo-doc-intro .demo-comp-name,
.arcodesign-pc-site-wrap .demo-nav-intro .demo-doc-name,
.arcodesign-pc-site-wrap .demo-doc-intro .demo-doc-name {
  margin: 20px 0 0;
  font-size: 36px;
  font-weight: 500;
  color:  var(--font-color,  #1d2129 ) ;
}
.arcodesign-pc-site-wrap .demo-nav-intro .demo-comp-desc,
.arcodesign-pc-site-wrap .demo-doc-intro .demo-comp-desc,
.arcodesign-pc-site-wrap .demo-nav-intro .demo-doc-desc,
.arcodesign-pc-site-wrap .demo-doc-intro .demo-doc-desc {
  color:  var(--sub-font-color,  #4e5969 ) ;
  margin-top: 12px;
  line-height: 20px;
}
.arcodesign-pc-site-wrap .demo-doc-description {
  padding: 0 43px 140px 56px;
  color:  var(--font-color,  #1d2129 ) ;
  width: 100%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.arcodesign-pc-site-wrap .demo-doc-description.no-padding {
  padding: 0;
}
.arcodesign-pc-site-wrap .demo-doc-description h1,
.arcodesign-pc-site-wrap .demo-doc-description h2 {
  margin: 24px 0 16px;
}
.arcodesign-pc-site-wrap .demo-doc-description h3 {
  margin: 12px 0;
}
.arcodesign-pc-site-wrap .demo-doc-description p,
.arcodesign-pc-site-wrap .demo-doc-description ul {
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.5;
  color:  var(--sub-font-color,  #4e5969 ) ;
}
.arcodesign-pc-site-wrap .demo-doc-description li {
  margin-bottom: 12px;
}
.arcodesign-pc-site-wrap .demo-doc-description .demo-code-content {
  font-family: Menlo, Consolas;
  font-size: 12px;
  color:  var(--sub-font-color,  #4e5969 ) ;
  background-color:  var(--lighter-line-color,  #f2f3f5 ) ;
  border-radius: 3px;
  line-height: 1.45;
  padding: 24px;
  margin: 16px 0;
  border: 1px solid;
  border-color:  var(--line-color,  #e5e6eb ) ;
}
.arcodesign-pc-site-wrap .demo-doc-description .demo-code-content .demo-code {
  white-space: pre-wrap;
}
.arcodesign-pc-site-wrap .pc-site-wrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.arcodesign-pc-site-wrap .pc-site-wrapper a {
  color: #165DFF;
}
.arcodesign-pc-site-wrap .pc-site-wrapper h2 > code,
.arcodesign-pc-site-wrap .pc-site-wrapper p > code {
  background-color:  var(--lighter-line-color,  #f2f3f5 ) ;
  color:  var(--sub-font-color,  #4e5969 ) ;
  border-radius: 2px;
  padding: 3px 8px;
  margin: 0 2px;
}
.arcodesign-pc-site-wrap .pc-site-wrapper p > code {
  font-size: 12px;
  line-height: 14px;
}
.arcodesign-pc-site-wrap .pc-site-content {
  padding: 0 43px 140px 56px;
  color:  var(--font-color,  #1d2129 ) ;
  width: 100%;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-code-wrapper .arco-tabs-content {
  padding-top: 0;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-code-wrapper .demo-code-title {
  font-size: 20px;
  margin-bottom: 12px;
  font-weight: 500;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-code-wrapper .demo-code-title:nth-child(n + 2) {
  margin-top: 24px;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-code-wrapper .demo-code-desc {
  line-height: 1.5;
  color:  var(--sub-font-color,  #4e5969 ) ;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-code-wrapper .demo-code-content {
  position: relative;
  overflow: hidden;
  max-height: 240px;
  background-color:  var(--card-background-color,  #F7F8FA ) ;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-code-wrapper .demo-code-content .demo-code {
  color:  var(--sub-font-color,  #4e5969 ) ;
  width: 100%;
  display: block;
  word-break: normal;
  padding: 12px 24px;
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 13px;
  line-height: 22px;
  font-family: Menlo, Consolas;
  box-sizing: border-box;
  white-space: pre-wrap;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-code-title:nth-child(n + 2) {
  margin-top: 20px;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap {
  padding-top: 24px;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props .demo-attr,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap .demo-attr {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color:  var(--font-color,  #1d2129 ) ;
  margin-top: 24px;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props .demo-desc,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap .demo-desc {
  margin-top: 12px;
  font-size: 14px;
  color:  var(--sub-font-color,  #4e5969 ) ;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props table,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table {
  text-align: left;
  width: 100%;
  border-radius: 0 0 2px 2px;
  border: 1px solid;
  border-color:  var(--line-color,  #e5e6eb ) ;
  color:  var(--font-color,  #1d2129 ) ;
  font-size: 13px;
  margin-top: 24px;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props table thead,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table thead {
  background-color:  var(--lighter-line-color,  #f2f3f5 ) ;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props table thead th,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table thead th {
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 1px solid;
  border-bottom-color:  var(--line-color,  #e5e6eb ) ;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props table thead th:not(:last-of-type),
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table thead th:not(:last-of-type) {
  border-right: 1px solid;
  border-right-color:  var(--line-color,  #e5e6eb ) ;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props table tbody,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table tbody {
  background-color:  var(--background-color,  #FFFFFF ) ;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props table tbody tr,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table tbody tr {
  border-bottom: 1px solid;
  border-bottom-color:  var(--line-color,  #e5e6eb ) ;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props table th,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table th,
.arcodesign-pc-site-wrap .pc-site-content .demo-props table td,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table td {
  padding: 11px 24px;
  max-width: 300px;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props table th.props-names,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table th.props-names {
  width: 22%;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props table th.props-type,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table th.props-type {
  width: 28%;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props table th.props-type:last-child,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table th.props-type:last-child {
  width: 50%;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props table td.special,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table td.special {
  color:  var(--primary-color,  #165DFF ) ;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props pre,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap pre {
  background-color:  var(--card-background-color,  #F7F8FA ) ;
  border: 1px solid;
  border-color:  var(--line-color,  #e5e6eb ) ;
  padding: 12px 20px;
  overflow: auto;
  margin-top: 24px;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-props code,
.arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap code {
  line-height: 22px;
  font-size: 13px;
  font-family: Menlo, Consolas;
  white-space: pre-wrap;
  word-break: normal;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-title {
  margin-top: 20px;
  font-size: 18px;
  line-height: 28px;
  font-weight: bold;
  border-radius: 2px 2px 0 0;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-desc code,
.arcodesign-pc-site-wrap .pc-site-content td code {
  background-color:  var(--lighter-line-color,  #f2f3f5 ) ;
  padding: 0 8px;
  font-size: 13px;
  display: inline-block;
  line-height: 22px;
  color:  var(--sub-font-color,  #4e5969 ) ;
  margin: 0 2px;
  border-radius: 2px;
}
.arcodesign-pc-site-wrap .pc-site-content td code {
  margin-bottom: 2px;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-content {
  background-color:  var(--card-background-color,  #F7F8FA ) ;
  padding: 24px 28px;
  border-radius: 0 0 2px 2px;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-content pre {
  overflow-x: auto;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-desc + .demo-content {
  margin-top: -2px;
}
.arcodesign-pc-site-wrap .pc-site-content .demo-title + .demo-desc {
  padding-top: 0;
  margin-top: -16px;
}
.arco-menu-group .arco-menu-group-title .arco-menu-indent {
  width: 0;
}
/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
.arco-theme-dark .process-bg-color-with-config,
.arco-theme-dark .process-custom-icon-bg-color-with-config {
  color:  var(--dark-steps-process-with-config-item-icon-color,  rgba(255, 255, 255, 0.9) ) ;
}
.arco-theme-dark .wait-custom-icon-bg-color-with-config {
  background:  var(--dark-steps-wait-icon-num-background,  #2e2e30 ) ;
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .demo-nav-intro .demo-comp-type,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-intro .demo-comp-type,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-nav-intro .demo-doc-type,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-intro .demo-doc-type {
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .demo-nav-intro .demo-comp-type .separator,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-intro .demo-comp-type .separator,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-nav-intro .demo-doc-type .separator,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-intro .demo-doc-type .separator {
  color:  var(--dark-sub-info-font-color,  #929293 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .demo-nav-intro .demo-comp-type strong,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-intro .demo-comp-type strong,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-nav-intro .demo-doc-type strong,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-intro .demo-doc-type strong {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .demo-nav-intro .demo-comp-name,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-intro .demo-comp-name,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-nav-intro .demo-doc-name,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-intro .demo-doc-name {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .demo-nav-intro .demo-comp-desc,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-intro .demo-comp-desc,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-nav-intro .demo-doc-desc,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-intro .demo-doc-desc {
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-description {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-description p,
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-description ul {
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .demo-doc-description .demo-code-content {
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
  background-color:  var(--dark-lighter-line-color,  #2e2e30 ) ;
  border-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-wrapper h2 > code,
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-wrapper p > code {
  background-color:  var(--dark-lighter-line-color,  #2e2e30 ) ;
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-code-wrapper .demo-code-desc {
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-code-wrapper .demo-code-content {
  background-color:  var(--dark-card-background-color,  hsla(0, 0%, 100%, 0.08) ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-code-wrapper .demo-code-content .demo-code {
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-props .demo-attr,
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap .demo-attr {
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-props .demo-desc,
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap .demo-desc {
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-props table,
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table {
  border-color:  var(--dark-line-color,  #484849 ) ;
  color:  var(--dark-font-color,  #f6f6f6 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-props table thead,
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table thead {
  background-color:  var(--dark-lighter-line-color,  #2e2e30 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-props table thead th,
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table thead th {
  border-bottom-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-props table thead th:not(:last-of-type),
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table thead th:not(:last-of-type) {
  border-right-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-props table tbody,
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table tbody {
  background-color:  var(--dark-background-color,  #17171A ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-props table tbody tr,
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table tbody tr {
  border-bottom-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-props table td.special,
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap table td.special {
  color:  var(--dark-primary-color,  #3C7EFF ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-props pre,
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .token-page-table-wrap pre {
  background-color:  var(--dark-card-background-color,  hsla(0, 0%, 100%, 0.08) ) ;
  border-color:  var(--dark-line-color,  #484849 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-desc code,
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content td code {
  background-color:  var(--dark-lighter-line-color,  #2e2e30 ) ;
  color:  var(--dark-sub-font-color,  #c5c5c5 ) ;
}
.arco-theme-dark .arcodesign-pc-site-wrap .pc-site-content .demo-content {
  background-color:  var(--dark-card-background-color,  hsla(0, 0%, 100%, 0.08) ) ;
}
/********************* End *************************/