/**
 * @type mixin-var
 * @name GeneralMixinVars
 * @name_en General Mixin
 */
/**
 * @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);
 * }
 * ```
 */
/**
 * 根据 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);
 * }
 * ```
 */
* {
  -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;
  -moz-appearance: auto;
       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;
}

/**
 * @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-tabs {
  display: flex;
  overflow: hidden;
  color:  #1d2129 ;
}
.arco-tabs-top {
  flex-direction: column;
}
.arco-tabs-bottom {
  flex-direction: column-reverse;
}
.arco-tabs-top.full-screen,
.arco-tabs-bottom.full-screen {
  height: 100%;
}
.arco-tabs-left,
.arco-tabs-right {
  height: 100%;
}
.arco-tabs-left {
  flex-direction: row;
}
.arco-tabs-right {
  flex-direction: row-reverse;
}
.arco-tab-cell-container {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  visibility: hidden;
  width: inherit;
  height: inherit;
}
.arco-tab-cell-container-wrap {
  flex: 0 0 auto;
  position: relative;
  background:  #FFFFFF ;
}
.arco-tab-cell-container-wrap.horizontal {
  width:  1.56rem ;
  height: 100%;
}
.arco-tab-cell-container-wrap.vertical {
  height:  0.84rem ;
  width: 100%;
}
.arco-tab-cell-container-wrap.vertical.type-card {
  height:  0.8rem ;
}
.arco-tab-cell-container-wrap.vertical.type-tag,
.arco-tab-cell-container-wrap.vertical.type-tag-divide {
  height:  1.2rem ;
}
.arco-tab-cell-container-inner {
  width: inherit;
  height: inherit;
  overflow: hidden;
}
.arco-tab-cell-container-inner.has-divider.pos-top {
  box-shadow: 0 -1PX 0 0 #e5e6eb inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-tab-cell-container-inner.has-divider.pos-top {
    box-shadow: 0 -0.5PX 0 0 #e5e6eb inset;
  }
}
.ios .arco-tab-cell-container-inner.has-divider.pos-top,
.arco-tab-cell-container-inner.has-divider.pos-top.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid #e5e6eb;
}
.arco-tab-cell-container-inner.has-divider.pos-bottom {
  box-shadow: 0 1PX 0 0 #e5e6eb inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-tab-cell-container-inner.has-divider.pos-bottom {
    box-shadow: 0 0.5PX 0 0 #e5e6eb inset;
  }
}
.ios .arco-tab-cell-container-inner.has-divider.pos-bottom,
.arco-tab-cell-container-inner.has-divider.pos-bottom.ios {
  box-shadow: none;
  border-top: 0.5PX solid #e5e6eb;
}
.arco-tab-cell-container-inner.has-divider.pos-left {
  box-shadow: -1PX 0 0 0 #e5e6eb inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-tab-cell-container-inner.has-divider.pos-left {
    box-shadow: -0.5PX 0 0 0 #e5e6eb inset;
  }
}
.ios .arco-tab-cell-container-inner.has-divider.pos-left,
.arco-tab-cell-container-inner.has-divider.pos-left.ios {
  box-shadow: none;
  border-right: 0.5PX solid #e5e6eb;
}
.arco-tab-cell-container-inner.has-divider.pos-right {
  box-shadow: 1PX 0 0 0 #e5e6eb inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-tab-cell-container-inner.has-divider.pos-right {
    box-shadow: 0.5PX 0 0 0 #e5e6eb inset;
  }
}
.ios .arco-tab-cell-container-inner.has-divider.pos-right,
.arco-tab-cell-container-inner.has-divider.pos-right.ios {
  box-shadow: none;
  border-left: 0.5PX solid #e5e6eb;
}
.arco-tab-cell-container-inner.fixed {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 100;
  background: inherit;
}
.arco-tab-cell-container-inner.fixed.pos-top {
  top: 0;
}
.arco-tab-cell-container-inner.fixed.pos-bottom {
  bottom: 0;
}
.arco-tab-cell-container-inner.type-tag.vertical,
.arco-tab-cell-container-inner.type-tag-divide.vertical {
  padding:  0.24rem 0;
}
.arco-tab-cell-container.horizontal {
  flex-direction: column;
}
.arco-tab-cell-container.vertical.arrange-start,
.arco-tab-cell-container.vertical.overflow {
  justify-content: flex-start;
}
.arco-tab-cell-container.vertical.arrange-center:not(.overflow) {
  justify-content: center;
}
.arco-tab-cell-container.vertical.arrange-end:not(.overflow) {
  justify-content: flex-end;
}
.arco-tab-cell-container.vertical .fake-padding {
  height: 100%;
  flex: 0 0 auto;
}
.arco-tab-cell-container.shown {
  visibility: visible;
}
.arco-tab-cell-container.type-line,
.arco-tab-cell-container.type-tag {
  overflow: scroll;
}
.arco-tab-cell-container.type-line::-webkit-scrollbar,
.arco-tab-cell-container.type-tag::-webkit-scrollbar {
  display: none;
}
.arco-tab-cell-container.type-line.vertical,
.arco-tab-cell-container.type-tag.vertical {
  box-sizing: content-box;
  padding-bottom:  10PX ;
}
.arco-tab-cell-container.type-card {
  border: 1PX solid #165DFF ;
  border-radius:  2PX ;
}
.arco-tab-cell-container.type-tag.vertical,
.arco-tab-cell-container.type-tag-divide.vertical {
  height: 100%;
}
.arco-tab-cell-underline {
  position: absolute;
  z-index: 1;
  transform: translateZ(0);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  overflow: visible;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes caterpillarX {
  0% {
    transform: scaleX(1) translateZ(0);
  }
  50% {
    transform: scaleX(2) translateZ(0);
  }
  100% {
    transform: scaleX(1) translateZ(0);
  }
}
@keyframes caterpillarY {
  0% {
    transform: scaleY(1) translateZ(0);
  }
  50% {
    transform: scaleY(2) translateZ(0);
  }
  100% {
    transform: scaleY(1) translateZ(0);
  }
}
.arco-tab-cell-underline.show {
  opacity: 1;
}
.pos-top .arco-tab-cell-underline,
.pos-bottom .arco-tab-cell-underline {
  left: 0;
  width:  0.48rem ;
  height:  2PX ;
}
.pos-top .arco-tab-cell-underline {
  bottom: 0;
}
.pos-top.type-line .arco-tab-cell-underline {
  bottom:  10PX ;
}
.pos-bottom .arco-tab-cell-underline {
  top: 0;
}
.pos-left .arco-tab-cell-underline,
.pos-right .arco-tab-cell-underline {
  top: 0;
  height:  0.48rem ;
  width:  2PX ;
}
.pos-left .arco-tab-cell-underline {
  left: 0;
}
.pos-right .arco-tab-cell-underline {
  right: 0;
}
.arco-tab-cell-underline-inner {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  transition: inherit;
  border-radius:  2PX ;
  background-color:  #165DFF ;
}
.arco-tab-cell-underline-inner.caterpillar {
  animation-timing-function: linear;
}
.arco-tab-cell-underline-inner.caterpillar:not(.custom-animate).vertical {
  animation-name: caterpillarX;
}
.arco-tab-cell-underline-inner.caterpillar:not(.custom-animate).horizontal {
  animation-name: caterpillarY;
}
.arco-tab-cell {
  font-size:  0.3rem ;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}
.arco-tab-cell.no-shrink {
  flex-shrink: 0;
}
.arco-tab-cell.vertical {
  height: 100%;
}
.arco-tab-cell.vertical.line,
.arco-tab-cell.vertical.tag {
  display: inline-flex;
  vertical-align: middle;
}
.arco-tab-cell.vertical.line-divide,
.arco-tab-cell.vertical.card,
.arco-tab-cell.vertical.tag-divide {
  flex: 1;
}
.arco-tab-cell.vertical:not(.custom).line:not(.last) {
  margin-right:  0.8rem ;
}
[dir="rtl"] .arco-tab-cell.vertical:not(.custom).line:not(.last) {
  margin-right: initial;
  margin-left:  0.8rem ;
}
.arco-tab-cell.vertical:not(.custom).line.active,
.arco-tab-cell.vertical:not(.custom).line-divide.active {
  font-weight: bold;
  color:  #165DFF ;
}
.android .arco-tab-cell.vertical:not(.custom).line.active,
.android .arco-tab-cell.vertical:not(.custom).line-divide.active,
.arco-tab-cell.vertical:not(.custom).line.active.android,
.arco-tab-cell.vertical:not(.custom).line-divide.active.android,
.arco-tab-cell.vertical:not(.custom).line.active.system-android,
.arco-tab-cell.vertical:not(.custom).line-divide.active.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.arco-tab-cell.vertical:not(.custom).card {
  color:  #165DFF ;
}
.arco-tab-cell.vertical:not(.custom).card.active {
  background:  #165DFF ;
  color:  #FFFFFF ;
  font-weight: bold;
}
.android .arco-tab-cell.vertical:not(.custom).card.active,
.arco-tab-cell.vertical:not(.custom).card.active.android,
.arco-tab-cell.vertical:not(.custom).card.active.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
  border-right: 1PX solid #165DFF ;
}
[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
  border-right: initial;
  border-left: 1PX solid #165DFF ;
}
.arco-tab-cell.vertical:not(.custom).card:first-of-type {
  border-top-left-radius:  2PX ;
  border-bottom-left-radius:  2PX ;
}
[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:first-of-type {
  border-top-left-radius: initial;
  border-top-right-radius:  2PX ;
}
[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:first-of-type {
  border-bottom-left-radius: initial;
  border-bottom-right-radius:  2PX ;
}
.arco-tab-cell.vertical:not(.custom).card:last-of-type {
  border-top-right-radius:  2PX ;
  border-bottom-right-radius:  2PX ;
}
[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:last-of-type {
  border-top-right-radius: initial;
  border-top-left-radius:  2PX ;
}
[dir="rtl"] .arco-tab-cell.vertical:not(.custom).card:last-of-type {
  border-bottom-right-radius: initial;
  border-bottom-left-radius:  2PX ;
}
.arco-tab-cell.vertical:not(.custom).card.android,
.arco-tab-cell.vertical:not(.custom).tag-divide.android {
  padding-top: 0.04rem;
}
.arco-tab-cell.vertical:not(.custom).tag,
.arco-tab-cell.vertical:not(.custom).tag-divide {
  padding:  0 0.32rem ;
  border-radius: 2rem;
  background:  #F7F8FA ;
  color:  #1d2129 ;
}
.arco-tab-cell.vertical:not(.custom).tag:not(.last),
.arco-tab-cell.vertical:not(.custom).tag-divide:not(.last) {
  margin-right:  0.32rem ;
}
[dir="rtl"] .arco-tab-cell.vertical:not(.custom).tag:not(.last),
[dir="rtl"] .arco-tab-cell.vertical:not(.custom).tag-divide:not(.last) {
  margin-right: initial;
  margin-left:  0.32rem ;
}
.arco-tab-cell.vertical:not(.custom).tag.active,
.arco-tab-cell.vertical:not(.custom).tag-divide.active {
  background:  #165DFF ;
  color:  #FFFFFF ;
  font-weight: bold;
}
.android .arco-tab-cell.vertical:not(.custom).tag.active,
.android .arco-tab-cell.vertical:not(.custom).tag-divide.active,
.arco-tab-cell.vertical:not(.custom).tag.active.android,
.arco-tab-cell.vertical:not(.custom).tag-divide.active.android,
.arco-tab-cell.vertical:not(.custom).tag.active.system-android,
.arco-tab-cell.vertical:not(.custom).tag-divide.active.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.arco-tab-cell.horizontal {
  height:  1.08rem ;
}
.arco-tab-cell.horizontal.active {
  font-weight: bold;
  color:  #165DFF ;
}
.android .arco-tab-cell.horizontal.active,
.arco-tab-cell.horizontal.active.android,
.arco-tab-cell.horizontal.active.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.arco-tab-pane-container.mode-swipe {
  display: flex;
  align-items: flex-start;
  transition-property: all;
  transition-timing-function: ease-out;
}
.arco-tab-pane-container.mode-swipe-energy-saving {
  position: relative;
  overflow: hidden;
}
.arco-tab-pane-container.full-screen {
  flex: 1;
  overflow: hidden;
}
.arco-tab-pane-container.horizontal {
  flex: 1;
  flex-direction: column;
}
.arco-tab-pane-container.mode-scroll-horizontal {
  overflow-x: auto;
  white-space: nowrap;
}
.arco-tab-pane {
  width: 100%;
  flex: 1;
  overflow: auto;
}
.mode-scroll-horizontal .arco-tab-pane {
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.arco-tab-pane.mode-swipe.full-screen {
  height: 100%;
}
.arco-tab-pane-extra {
  position: absolute;
}

/**
 * @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);
 * }
 * ```
 */


/**
 * @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-steps {
  display: flex;
  padding:  0.32rem 0 ;
}
.arco-steps.reverse-order {
  flex-direction: row-reverse;
}
.arco-steps-item {
  position: relative;
  display: flex;
  flex: 1;
}
.arco-steps-item.horizontal {
  flex-direction: column;
}
.arco-steps-item-align-center {
  align-items: center;
}
.arco-steps-item-align-start {
  align-items: flex-start;
}
.arco-steps-item-align-center.vertical {
  padding-bottom:  0.5rem ;
}
.arco-steps-item:first-child .arco-steps-item-tail::before,
.arco-steps-item:last-child .arco-steps-item-tail::after {
  visibility: hidden;
}
.reverse-order .arco-steps-item:first-child .arco-steps-item-tail::after,
.reverse-order .arco-steps-item:last-child .arco-steps-item-tail::before {
  visibility: hidden;
}
.reverse-order .arco-steps-item:first-child .arco-steps-item-tail::before,
.reverse-order .arco-steps-item:last-child .arco-steps-item-tail::after {
  visibility: visible;
}
.arco-steps-item-tail {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.horizontal .arco-steps-item-tail {
  width: 100%;
  height:  18PX ;
}
.horizontal .arco-steps-item-tail::before,
.horizontal .arco-steps-item-tail::after {
  height:  1PX ;
}
.horizontal .arco-steps-item-tail-align-start {
  left:  9PX ;
  padding:  0 18PX ;
}
[dir="rtl"] .horizontal .arco-steps-item-tail-align-start {
  left: initial;
  right:  9PX ;
}
.horizontal .arco-steps-item-tail-align-start::after {
  content: '';
  width: 100%;
  border-radius:  2PX ;
}
.horizontal .arco-steps-item-tail-align-center::before,
.horizontal .arco-steps-item-tail-align-center::after {
  content: '';
  width: 50%;
}
.horizontal .arco-steps-item-tail-align-center::before {
  margin-right:  18PX ;
  border-top-right-radius:  2PX ;
  border-bottom-right-radius:  2PX ;
}
[dir="rtl"] .horizontal .arco-steps-item-tail-align-center::before {
  margin-right: initial;
  margin-left:  18PX ;
}
[dir="rtl"] .horizontal .arco-steps-item-tail-align-center::before {
  border-top-right-radius: initial;
  border-top-left-radius:  2PX ;
}
[dir="rtl"] .horizontal .arco-steps-item-tail-align-center::before {
  border-bottom-right-radius: initial;
  border-bottom-left-radius:  2PX ;
}
.horizontal .arco-steps-item-tail-align-center::after {
  margin-left:  18PX ;
  border-top-left-radius:  2PX ;
  border-bottom-left-radius:  2PX ;
}
[dir="rtl"] .horizontal .arco-steps-item-tail-align-center::after {
  margin-left: initial;
  margin-right:  18PX ;
}
[dir="rtl"] .horizontal .arco-steps-item-tail-align-center::after {
  border-top-left-radius: initial;
  border-top-right-radius:  2PX ;
}
[dir="rtl"] .horizontal .arco-steps-item-tail-align-center::after {
  border-bottom-left-radius: initial;
  border-bottom-right-radius:  2PX ;
}
.vertical .arco-steps-item-tail {
  height: 100%;
  width:  18PX ;
  flex-direction: column;
}
.vertical .arco-steps-item-tail::before,
.vertical .arco-steps-item-tail::after {
  width:  1PX ;
}
.vertical .arco-steps-item-tail-align-start {
  top:  9PX ;
  padding:  14PX 0 ;
}
.vertical .arco-steps-item-tail-align-start::after {
  content: '';
  height: 100%;
  border-radius:  2PX ;
}
.vertical .arco-steps-item-tail-align-center::before,
.vertical .arco-steps-item-tail-align-center::after {
  content: '';
  height: 50%;
}
.vertical .arco-steps-item-tail-align-center::before {
  margin-bottom:  14PX ;
  border-bottom-left-radius:  2PX ;
  border-bottom-right-radius:  2PX ;
}
.vertical .arco-steps-item-tail-align-center::after {
  margin-top:  14PX ;
  border-top-left-radius:  2PX ;
  border-top-right-radius:  2PX ;
}
.arco-steps-item-tail::after,
.arco-steps-item-tail::before {
  display: inline-block;
  background:  #e5e6eb ;
}
.arco-steps-item-tail-status-finish::before,
.arco-steps-item-tail-status-finish::after,
.arco-steps-item-tail-align-center.arco-steps-item-tail-status-process::before,
.arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
  background:  #165DFF ;
}
.reverse-order .arco-steps-item-tail-status-finish::before,
.reverse-order .arco-steps-item-tail-status-process::after,
.reverse-order .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::after {
  background:  #165DFF ;
}
.reverse-order .arco-steps-item-tail-status-process::before,
.reverse-order .arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
  background:  #e5e6eb ;
}
.arco-steps-item-custom-icon,
.arco-steps-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  18PX ;
  height:  18PX ;
}
.arco-steps-item-icon {
  border-radius: 50%;
}
.number.finish .arco-steps-item-icon {
  background:  #E8F3FF ;
}
.number.process .arco-steps-item-icon {
  background:  #165DFF ;
}
.number.wait .arco-steps-item-icon {
  background:  #f2f3f5 ;
}
.number.error .arco-steps-item-icon {
  background:  #F53F3F ;
}
.arco-steps-item-icon svg {
  font-size:  10PX ;
}
.finish .arco-steps-item-icon svg {
  color:  #165DFF ;
}
.error .arco-steps-item-icon svg {
  color:  #FFFFFF ;
  font-size:  8PX ;
}
.arco-steps-item-icon-num {
  font-size:  12PX ;
  line-height:  18PX ;
  color:  #86909c ;
  font-weight: bold;
}
.android .arco-steps-item-icon-num,
.arco-steps-item-icon-num.android,
.arco-steps-item-icon-num.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.process .arco-steps-item-icon-num {
  color:  #FFFFFF ;
}
.arco-steps-item-icon-dot {
  position: relative;
  display: inline-block;
  width:  8PX ;
  height:  8PX ;
  border-radius: 50%;
  border-width:  1.5PX ;
  border-style: solid;
}
.finish .arco-steps-item-icon-dot {
  border-color:  #165DFF ;
}
.wait .arco-steps-item-icon-dot {
  border-color:  #86909c ;
}
.process .arco-steps-item-icon-dot {
  border: none;
  background:  #165DFF ;
}
.horizontal .arco-steps-item-content {
  margin-top:  0.1rem ;
}
.horizontal .arco-steps-item-content-align-center {
  text-align: center;
}
.vertical .arco-steps-item-content {
  margin-left:  0.26rem ;
  flex: 1;
}
[dir="rtl"] .vertical .arco-steps-item-content {
  margin-left: initial;
  margin-right:  0.26rem ;
}
.vertical .arco-steps-item-content-align-start {
  padding-bottom:  0.5rem ;
}
.arco-steps-item-title {
  font-size:  0.28rem ;
  line-height:  0.4rem ;
}
.finish .arco-steps-item-title {
  color:  #1d2129 ;
}
.error .arco-steps-item-title {
  color:  #F53F3F ;
}
.process .arco-steps-item-title {
  color:  #165DFF ;
  font-weight: 500;
}
.wait .arco-steps-item-title {
  color:  #86909c ;
}
.arco-steps-item-description {
  font-size:  0.24rem ;
  line-height:  0.36rem ;
  color:  #4e5969 ;
}
.wait .arco-steps-item-description {
  color:  #86909c ;
}
.vertical .arco-steps-item-description {
  margin-top:  0.04rem ;
}
.arco-steps.vertical {
  flex-direction: column;
  padding-bottom:  0 ;
  padding-left:  0.4rem ;
}
.arco-steps.vertical.reverse-order {
  flex-direction: column-reverse;
}
[dir="rtl"] .arco-steps.vertical {
  padding-left: initial;
  padding-right:  0.4rem ;
}

/**
 * @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-fade-enter {
  opacity: 0;
}
.arco-fade-enter-active {
  opacity: 1;
  transition-property: opacity;
  transition-duration: var(--builtin-transition-fade-enter-duration,  300ms );
}
.arco-fade-exit {
  opacity: 1;
}
.arco-fade-exit-active {
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--builtin-transition-fade-exit-duration,  300ms );
}
.arco-fade-exit-done {
  display: none;
}

/**
 * @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-masking-mask.pre-mount:not([class*="-enter"]):not([class*="-exit"]),
.arco-masking-content.pre-mount:not([class*="-enter"]):not([class*="-exit"]),
.arco-masking-mask[class*="-exit-done"],
.arco-masking-content[class*="-exit-done"] {
  opacity: 0;
  pointer-events: none;
}
.arco-masking-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
  background:  rgba(0, 0, 0, 0.6) ;
}
.arco-masking-content {
  position: fixed;
  z-index: 1001;
}
.arco-masking-content.at-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/**
 * @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-popup .arco-slide-from-left-enter,
.arco-popup .arco-slide-from-left-exit-active,
.arco-popup .arco-slide-from-left-exit-done {
  transform: translate(-100%, 0);
}
.arco-popup .arco-slide-from-left-enter.translateZ,
.arco-popup .arco-slide-from-left-exit-active.translateZ,
.arco-popup .arco-slide-from-left-exit-done.translateZ {
  transform: translate(-100%, 0) translateZ(2PX);
}
.arco-popup .arco-slide-from-right-enter,
.arco-popup .arco-slide-from-right-exit-active,
.arco-popup .arco-slide-from-right-exit-done {
  transform: translate(100%, 0);
}
.arco-popup .arco-slide-from-right-enter.translateZ,
.arco-popup .arco-slide-from-right-exit-active.translateZ,
.arco-popup .arco-slide-from-right-exit-done.translateZ {
  transform: translate(100%, 0) translateZ(2PX);
}
.arco-popup .arco-slide-from-top-enter,
.arco-popup .arco-slide-from-top-exit-active,
.arco-popup .arco-slide-from-top-exit-done {
  transform: translate(0, -100%);
}
.arco-popup .arco-slide-from-top-enter.translateZ,
.arco-popup .arco-slide-from-top-exit-active.translateZ,
.arco-popup .arco-slide-from-top-exit-done.translateZ {
  transform: translate(0, -100%) translateZ(2PX);
}
.arco-popup .arco-slide-from-bottom-enter,
.arco-popup .arco-slide-from-bottom-exit-active,
.arco-popup .arco-slide-from-bottom-exit-done {
  transform: translate(0, 100%);
}
.arco-popup .arco-slide-from-bottom-enter.translateZ,
.arco-popup .arco-slide-from-bottom-exit-active.translateZ,
.arco-popup .arco-slide-from-bottom-exit-done.translateZ {
  transform: translate(0, 100%) translateZ(2PX);
}
.arco-popup-content[class*="-enter-active"],
.arco-popup-mask[class*="-enter-active"] {
  transform: translate(0, 0);
  transition:  all 450ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
}
.arco-popup-content[class*="-enter-active"].translateZ,
.arco-popup-mask[class*="-enter-active"].translateZ {
  transform: translateZ(2PX);
}
.arco-popup [class*="-exit-active"] {
  transition:  all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
}
.arco-popup-content {
  background:  #FFFFFF ;
  position: fixed;
  z-index: 1001;
}
.arco-popup-content[class*="-enter-active"] {
  transition-duration: var(--builtin-transition-popup-slide-enter-duration, 450ms);
}
.arco-popup-content[class*="-exit-active"] {
  transition-duration: var(--builtin-transition-popup-slide-exit-duration, 240ms);
}
.arco-popup-content.need-bottom-offset {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.arco-popup-content.left {
  left: 0;
  top: 0;
  height: 100%;
}
.arco-popup-content.top {
  left: 0;
  top: 0;
  width: 100%;
}
.arco-popup-content.right {
  right: 0;
  top: 0;
  height: 100%;
}
.arco-popup-content.bottom {
  left: 0;
  bottom: 0;
  width: 100%;
}
.arco-popup-content.translateZ {
  transform: translateZ(2PX);
}
.arco-popup-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
  background:  rgba(0, 0, 0, 0.6) ;
}
.arco-popup-mask[class*="-enter-active"] {
  transition-duration: var(--builtin-transition-fade-enter-duration, 450ms);
}
.arco-popup-mask[class*="-exit-active"] {
  transition-duration: var(--builtin-transition-fade-exit-duration, 240ms);
}
.arco-popup-mask.translateZ {
  transform: translateZ(1PX);
}

/**
 * @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-action-sheet {
  color:  #1d2129 ;
}
.arco-action-sheet-header {
  padding:  0.32rem ;
  text-align: center;
  position: relative;
  border-width: 0;
}
.arco-action-sheet-header::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-action-sheet-header::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-action-sheet-header::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-action-sheet-title {
  font-size:  0.32rem ;
  font-weight: bold;
}
.android .arco-action-sheet-title,
.arco-action-sheet-title.android,
.arco-action-sheet-title.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.arco-action-sheet-sub-title {
  color:  #86909c ;
  font-size:  0.28rem ;
}
.arco-action-sheet-title + .arco-action-sheet-sub-title {
  margin-top: 0.08rem;
}
.arco-action-sheet-content {
  border-top-left-radius:  0.16rem ;
  border-top-right-radius:  0.16rem ;
}
.arco-action-sheet-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height:  1.08rem ;
  font-size:  0.32rem ;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
}
.arco-action-sheet-item:not(:last-child) {
  position: relative;
  border-width: 0;
}
.arco-action-sheet-item:not(:last-child)::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-action-sheet-item:not(:last-child)::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-action-sheet-item:not(:last-child)::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-action-sheet-item.disabled {
  color:  #c9cdd4 ;
}
.arco-action-sheet-item.danger {
  color:  #F53F3F ;
}
.arco-action-sheet-item.cancel-item {
  border-top-style: solid;
  border-top-color:  #f2f3f5 ;
  border-top-width:  0.16rem ;
}

/**
 * @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-loading {
  display: inline-block;
  font-size: 0;
  line-height: 0;
  position: relative;
}
.arco-loading .bg-color-with-config {
  background: #165DFF;
}
.arco-loading .stop-color-with-config {
  stop-color: #165DFF;
}
.arco-loading .fill-color-with-config {
  fill: #165DFF;
}
.arco-loading .stroke-color-with-config {
  stroke: #165DFF;
}
@keyframes changDeg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.arco-loading.circle,
.arco-loading.arc,
.arco-loading.spin {
  animation: changDeg 1s infinite linear;
}
.arco-loading.circle .loading-circle-middle {
  stop-opacity: 0.5;
}
.arco-loading.circle .loading-circle-end {
  stop-opacity: 0;
}
.arco-loading.dot .dot-cell {
  display: inline-block;
  width:  6PX ;
  height:  6PX ;
  margin-left:  0.12rem ;
}
.arco-loading.dot .dot-cell:first-of-type {
  margin-left: 0;
}
.arco-loading.dot .dot-cell.filleted {
  border-radius: 50%;
}
.arco-loading.spin {
  height: 0.44rem;
  width: 0.44rem;
  position: relative;
}
.arco-loading.spin .spin-cell {
  position: absolute;
  left: 0.2rem;
  top: 0.02rem;
  display: inline-block;
  height: 0.2rem;
  padding-bottom: 0.08rem;
  overflow: hidden;
  transform-origin: 50% bottom;
}
.arco-loading.spin .spin-cell-inner {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  transform: scale(0.5);
  transform-origin: top left;
  height: 0.24rem;
}
.arco-loading.arc .arc-bg {
  stroke:  #e5e6eb ;
}
.arco-loading.line {
  width: 100%;
}
.arco-loading.line .loading-line-start,
.arco-loading.line .loading-line-end {
  stop-color:  #165DFF ;
}
.arco-loading.line .loading-line-start {
  stop-opacity: 0;
}

/**
 * @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-image {
  display: inline-block;
  position: relative;
}
.arco-image.preview {
  transition: all 0.3s ease-in-out;
}
.arco-image.preview .image-container,
.arco-image.preview .image-loading-container .image-loading,
.arco-image.preview .image-error-container .image-retry-load {
  background-color: transparent;
}
.arco-image.preview .image-container::after {
  border-color: transparent;
}
.arco-image .image-bottom-overlap,
.arco-image .image-top-overlap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.arco-image .image-bottom-overlap {
  z-index: 0;
  overflow: hidden;
}
.arco-image .image-placeholder {
  background-color:  #F7F8FA ;
  width: 100%;
  height: 100%;
}
.arco-image .image-top-overlap {
  z-index: 10;
}
.arco-image .image-loading-container,
.arco-image .image-error-container {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size:  0.32rem ;
}
.arco-image .image-container {
  position: relative;
  font-size: 0;
  opacity: 0;
  z-index: 1;
  overflow: hidden;
}
.arco-image .image-container.static-label,
.arco-image .image-container.loaded,
.arco-image .image-container.error,
.arco-image .image-container.has-loaded {
  opacity: 1;
}
.arco-image .image-container.animate {
  transition-property: opacity;
  transition-timing-function:  cubic-bezier(0.39, 0.575, 0.565, 1) ;
}
.arco-image .image-container .bordered {
  box-shadow: 0 0 0 1PX #e5e6eb inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-image .image-container .bordered {
    box-shadow: 0 0 0 0.5PX #e5e6eb inset;
  }
}
.ios .arco-image .image-container .bordered,
.arco-image .image-container .bordered.ios {
  box-shadow: none;
  border: 0.5PX solid #e5e6eb;
}
.arco-image .image-container,
.arco-image .image-container img {
  width: inherit;
  height: inherit;
  min-width: inherit;
  min-height: inherit;
  max-width: inherit;
  max-height: inherit;
}
.arco-image .image-container .preview-fit-contain-y {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.arco-image .image-container .preview-fit-contain-x {
  height: 100%;
  width: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.arco-image .image-error-container .image-retry-load {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color:  rgba(0, 0, 0, 0.6) ;
  font-size:  0.32rem ;
  color:  #FFFFFF ;
}
.arco-image .image-loading-container .image-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color:  #FFFFFF ;
  background-color:  rgba(0, 0, 0, 0.6) ;
}
.arco-image .image-loading-container .image-loading .bg-color-with-config {
  background: #FFFFFF;
}
.arco-image .image-loading-container .image-loading .stop-color-with-config {
  stop-color: #FFFFFF;
}
.arco-image .image-loading-container .image-loading .fill-color-with-config {
  fill: #FFFFFF;
}
.arco-image .image-loading-container .image-loading .stroke-color-with-config {
  stroke: #FFFFFF;
}

/**
 * @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-avatar {
  position: relative;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color:  #FFFFFF ;
  background-color:  #4080FF ;
}
.arco-avatar-mode-image {
  background-color: transparent !important;
}
.arco-avatar-default-overlap {
  background-color:  #c9cdd4 ;
}
.arco-avatar-shape-circle {
  border-radius: 50%;
}
.arco-avatar-shape-circle .arco-avatar-img .image-content {
  border-radius: 50%;
}
.arco-avatar-shape-square {
  border-radius: 0.08rem;
}
.arco-avatar-shape-square .arco-avatar-img .image-content {
  border-radius: 0.08rem;
}
.arco-avatar-size-ultra-small {
  width:  0.48rem ;
  height:  0.48rem ;
}
.arco-avatar-default-icon-size-ultra-small {
  font-size:  0.24rem ;
}
.arco-avatar-text-size-ultra-small {
  font-size:  0.2rem ;
}
.arco-avatar-wrapper-with-info-size-ultra-small {
  height:  1.12rem ;
}
.arco-avatar-name-size-ultra-small {
  font-size:  0.26rem ;
  line-height:  0.36rem ;
}
.arco-avatar-desc-size-ultra-small {
  margin-top:  0.04rem ;
  font-size:  0.2rem ;
  line-height:  0.28rem ;
}
.arco-avatar-size-smaller {
  width:  0.64rem ;
  height:  0.64rem ;
}
.arco-avatar-default-icon-size-smaller {
  font-size:  0.32rem ;
}
.arco-avatar-text-size-smaller {
  font-size:  0.24rem ;
}
.arco-avatar-wrapper-with-info-size-smaller {
  height:  1.28rem ;
}
.arco-avatar-name-size-smaller {
  font-size:  0.28rem ;
  line-height:  0.4rem ;
}
.arco-avatar-desc-size-smaller {
  margin-top:  0 ;
  font-size:  0.24rem ;
  line-height:  0.32rem ;
}
.arco-avatar-size-small {
  width:  0.8rem ;
  height:  0.8rem ;
}
.arco-avatar-default-icon-size-small {
  font-size:  0.4rem ;
}
.arco-avatar-text-size-small {
  font-size:  0.28rem ;
}
.arco-avatar-wrapper-with-info-size-small {
  height:  1.6rem ;
}
.arco-avatar-name-size-small {
  font-size:  0.32rem ;
  line-height:  0.48rem ;
}
.arco-avatar-desc-size-small {
  margin-top:  0 ;
  font-size:  0.24rem ;
  line-height:  0.32rem ;
}
.arco-avatar-size-medium {
  width:  0.96rem ;
  height:  0.96rem ;
}
.arco-avatar-default-icon-size-medium {
  font-size:  0.48rem ;
}
.arco-avatar-text-size-medium {
  font-size:  0.32rem ;
}
.arco-avatar-wrapper-with-info-size-medium {
  height:  1.6rem ;
}
.arco-avatar-name-size-medium {
  font-size:  0.36rem ;
  line-height:  0.52rem ;
}
.arco-avatar-desc-size-medium {
  margin-top:  0.04rem ;
  font-size:  0.28rem ;
  line-height:  0.4rem ;
}
.arco-avatar-size-large {
  width:  1.12rem ;
  height:  1.12rem ;
}
.arco-avatar-default-icon-size-large {
  font-size:  0.56rem ;
}
.arco-avatar-text-size-large {
  font-size:  0.32rem ;
}
.arco-avatar-wrapper-with-info-size-large {
  height:  1.76rem ;
}
.arco-avatar-name-size-large {
  font-size:  0.36rem ;
  line-height:  0.52rem ;
}
.arco-avatar-desc-size-large {
  margin-top:  0.04rem ;
  font-size:  0.28rem ;
  line-height:  0.4rem ;
}
.arco-avatar-img {
  width: 100%;
  height: 100%;
}
.arco-avatar-decoration {
  position: absolute;
}
.arco-avatar-text {
  flex: 0 0 auto;
  font-weight: bold;
}
.arco-avatar-wrapper {
  display: inline-block;
}
.arco-avatar-wrapper-with-info {
  display: flex;
  align-items: center;
}
.arco-avatar-info {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 0.32rem;
}
[dir="rtl"] .arco-avatar-info {
  margin-left: initial;
  margin-right: 0.32rem;
}
.arco-avatar-name {
  color:  #1d2129 ;
}
.arco-avatar-desc {
  color:  #86909c ;
}
.arco-avatar-group .arco-avatar-wrapper-shape-circle {
  position: relative;
}
.arco-avatar-group .arco-avatar-wrapper-shape-circle:first-child {
  margin-left: 0;
}
.arco-avatar-group .arco-avatar {
  border-style: solid;
  border-color:  #FFFFFF ;
}
.arco-avatar-group-size-ultra-small .arco-avatar-wrapper {
  margin-left:  -0.16rem ;
}
[dir="rtl"] .arco-avatar-group-size-ultra-small .arco-avatar-wrapper {
  margin-left: initial;
  margin-right:  -0.16rem ;
}
.arco-avatar-group-size-ultra-small .arco-avatar {
  border-width:  0.02rem ;
}
.arco-avatar-group-size-smaller .arco-avatar-wrapper {
  margin-left:  -0.16rem ;
}
[dir="rtl"] .arco-avatar-group-size-smaller .arco-avatar-wrapper {
  margin-left: initial;
  margin-right:  -0.16rem ;
}
.arco-avatar-group-size-smaller .arco-avatar {
  border-width:  0.02rem ;
}
.arco-avatar-group-size-small .arco-avatar-wrapper {
  margin-left:  -0.24rem ;
}
[dir="rtl"] .arco-avatar-group-size-small .arco-avatar-wrapper {
  margin-left: initial;
  margin-right:  -0.24rem ;
}
.arco-avatar-group-size-small .arco-avatar {
  border-width:  0.03rem ;
}
.arco-avatar-group-size-medium .arco-avatar-wrapper {
  margin-left:  -0.24rem ;
}
[dir="rtl"] .arco-avatar-group-size-medium .arco-avatar-wrapper {
  margin-left: initial;
  margin-right:  -0.24rem ;
}
.arco-avatar-group-size-medium .arco-avatar {
  border-width:  0.03rem ;
}
.arco-avatar-group-size-large .arco-avatar-wrapper {
  margin-left:  -0.24rem ;
}
[dir="rtl"] .arco-avatar-group-size-large .arco-avatar-wrapper {
  margin-left: initial;
  margin-right:  -0.24rem ;
}
.arco-avatar-group-size-large .arco-avatar {
  border-width:  0.03rem ;
}

/**
 * @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);
 * }
 * ```
 */
@keyframes scale-on {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-off {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
.arco-scale-enter-active {
  animation: scale-on cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
  animation-duration: var(--builtin-transition-scale-enter-duration, 0.4s);
}
.arco-scale-exit-active {
  animation: scale-off cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
  animation-duration: var(--builtin-transition-scale-exit-duration, 0.4s);
}
.arco-badge {
  cursor: pointer;
  box-sizing: content-box;
  display: inline-block;
  z-index: 2;
  color:  #FFFFFF ;
  background-color:  #F53F3F ;
  white-space: nowrap;
  border-radius:  100PX ;
  height:  16PX ;
  line-height:  16PX ;
  min-width: 8PX;
  padding: 0 4PX ;
}
.arco-badge-text {
  display: block;
  font-weight: 500;
  font-size: 12PX;
}
.arco-badge-dot {
  width:  8PX ;
  height:  8PX ;
  padding: 0;
  min-width: auto;
}
.arco-badge-bordered {
  border: 1PX solid #FFFFFF ;
}
.arco-badge-absolute {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left:  -8PX ;
  margin-top:  -8PX ;
}
[dir="rtl"] .arco-badge-absolute {
  left: initial;
  right: 100%;
}
[dir="rtl"] .arco-badge-absolute {
  margin-left: initial;
  margin-right:  -8PX ;
}
.arco-badge-absolute.arco-badge-dot {
  margin-left:  -4PX ;
  margin-top:  -4PX ;
}
[dir="rtl"] .arco-badge-absolute.arco-badge-dot {
  margin-left: initial;
  margin-right:  -4PX ;
}

/**
 * @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-button {
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  font-size: 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
  line-height:  1.2 ;
  border-radius:  2PX ;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
}
.arco-button.arco-button-inline {
  width: auto;
  display: inline-block;
}
.arco-button.arco-button-type-primary {
  background:  #165DFF ;
  color:  #FFFFFF ;
}
.arco-button.arco-button-type-primary-disabled {
  background:  #94BFFF ;
  color:  #E8F3FF ;
}
.arco-button.arco-button-type-primary-active {
  background:  #0E42D2 ;
}
.arco-button-type-primary .bg-color-with-config {
  background: #FFFFFF;
}
.arco-button-type-primary .stop-color-with-config {
  stop-color: #FFFFFF;
}
.arco-button-type-primary .fill-color-with-config {
  fill: #FFFFFF;
}
.arco-button-type-primary .stroke-color-with-config {
  stroke: #FFFFFF;
}
.arco-button.arco-button-type-default {
  background:  #E8F3FF ;
  color:  #165DFF ;
}
.arco-button.arco-button-type-default-disabled {
  background:  #E8F3FF ;
  color:  #94BFFF ;
}
.arco-button.arco-button-type-default-active {
  background:  #94BFFF ;
}
.arco-button-type-default .bg-color-with-config {
  background: #165DFF;
}
.arco-button-type-default .stop-color-with-config {
  stop-color: #165DFF;
}
.arco-button-type-default .fill-color-with-config {
  fill: #165DFF;
}
.arco-button-type-default .stroke-color-with-config {
  stroke: #165DFF;
}
.arco-button.arco-button-type-ghost {
  background:  transparent ;
  color:  #165DFF ;
}
.arco-button.arco-button-type-ghost-disabled {
  background:  transparent ;
  color:  #94BFFF ;
}
.arco-button.arco-button-type-ghost-active {
  background:  #E8F3FF ;
}
.arco-button-type-ghost .bg-color-with-config {
  background: #165DFF;
}
.arco-button-type-ghost .stop-color-with-config {
  stop-color: #165DFF;
}
.arco-button-type-ghost .fill-color-with-config {
  fill: #165DFF;
}
.arco-button-type-ghost .stroke-color-with-config {
  stroke: #165DFF;
}
.arco-button.arco-button-type-ghost {
  border: 1PX solid currentColor;
}
.arco-button.arco-button-type-ghost.half-border {
  border-width: 0;
  box-shadow: 0 0 0 1PX currentColor inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-button.arco-button-type-ghost.half-border {
    box-shadow: 0 0 0 0.5PX currentColor inset;
  }
}
.ios .arco-button.arco-button-type-ghost.half-border,
.arco-button.arco-button-type-ghost.half-border.ios {
  box-shadow: none;
  border: 0.5PX solid currentColor;
}
.arco-button.arco-button-size-mini {
  padding:  0 0.16rem ;
  height:  0.48rem ;
}
.arco-button.arco-button-size-mini-is-round {
  border-radius:  0.48rem ;
}
.arco-button.arco-button-size-mini-is-square {
  border-radius: 0;
}
.arco-button.arco-button-size-mini .arco-button-icon,
.arco-button.arco-button-size-mini i,
.arco-button.arco-button-size-mini .arco-button-text,
.arco-button.arco-button-size-mini svg {
  font-size:  0.24rem ;
}
.arco-button.arco-button-size-small {
  padding:  0 0.16rem ;
  height:  0.56rem ;
}
.arco-button.arco-button-size-small-is-round {
  border-radius:  0.56rem ;
}
.arco-button.arco-button-size-small-is-square {
  border-radius: 0;
}
.arco-button.arco-button-size-small .arco-button-icon,
.arco-button.arco-button-size-small i,
.arco-button.arco-button-size-small .arco-button-text,
.arco-button.arco-button-size-small svg {
  font-size:  0.28rem ;
}
.arco-button.arco-button-size-medium {
  padding:  0 0.32rem ;
  height:  0.64rem ;
}
.arco-button.arco-button-size-medium-is-round {
  border-radius:  0.64rem ;
}
.arco-button.arco-button-size-medium-is-square {
  border-radius: 0;
}
.arco-button.arco-button-size-medium .arco-button-icon,
.arco-button.arco-button-size-medium i,
.arco-button.arco-button-size-medium .arco-button-text,
.arco-button.arco-button-size-medium svg {
  font-size:  0.28rem ;
}
.arco-button.arco-button-size-large {
  padding:  0 0.32rem ;
  height:  0.72rem ;
}
.arco-button.arco-button-size-large-is-round {
  border-radius:  0.72rem ;
}
.arco-button.arco-button-size-large-is-square {
  border-radius: 0;
}
.arco-button.arco-button-size-large .arco-button-icon,
.arco-button.arco-button-size-large i,
.arco-button.arco-button-size-large .arco-button-text,
.arco-button.arco-button-size-large svg {
  font-size:  0.3rem ;
}
.arco-button.arco-button-size-huge {
  padding:  0 0.32rem ;
  height:  0.88rem ;
}
.arco-button.arco-button-size-huge-is-round {
  border-radius:  0.88rem ;
}
.arco-button.arco-button-size-huge-is-square {
  border-radius: 0;
}
.arco-button.arco-button-size-huge .arco-button-icon,
.arco-button.arco-button-size-huge i,
.arco-button.arco-button-size-huge .arco-button-text,
.arco-button.arco-button-size-huge svg {
  font-size:  0.32rem ;
}
.arco-button-text-android {
  padding-top: 0.04rem;
}
.arco-button-icon {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.arco-button-text {
  display: inline-block;
  vertical-align: middle;
}
.arco-button-text-has-icon {
  margin-left:  0.08rem ;
}
[dir="rtl"] .arco-button-text-has-icon {
  margin-left: initial;
  margin-right:  0.08rem ;
}
.arco-button-loading-icon {
  display: inline-block;
  vertical-align: middle;
}
.arco-button.has-custom-border {
  border: 1PX solid;
}

/**
 * @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-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: height 0.3s;
  box-sizing: content-box;
}
.arco-carousel-wrap {
  position: relative;
  font-size: 0;
  width: 100%;
}
.arco-carousel.wrap-placeholder {
  display: none;
}
.arco-carousel-inner {
  overflow: visible;
}
.arco-carousel-inner:not(.vertical) {
  white-space: nowrap;
}
.arco-carousel-inner.auto,
.arco-carousel-inner.auto .arco-carousel-inner-item-inner {
  transition-timing-function:  cubic-bezier(0.66, 0, 0.34, 1) ;
}
.arco-carousel-inner.slide,
.arco-carousel-inner.slide .arco-carousel-inner-item-inner {
  transition-timing-function:  cubic-bezier(0.32, 0.94, 0.6, 1) ;
}
.arco-carousel-item {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  position: relative;
}
.arco-carousel-item.ssr-float {
  max-height: 0;
  overflow: visible;
}
.arco-carousel-item.vertical > *,
.arco-carousel-item.vertical .arco-carousel-item-inner > * {
  height: 100%;
}
.arco-carousel-item > img,
.arco-carousel-item-inner > img,
.arco-carousel-item .carousel-item-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.arco-carousel-item .carousel-item-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding:  0 0.24rem ;
  font-size:  0.32rem ;
  height:  0.64rem ;
  color:  #FFFFFF ;
  background:  linear-gradient(180deg, rgba(0, 0, 0, 0) 5.18%, rgba(0, 0, 0, 0.15) 100%) ;
}
.arco-carousel-item-inner {
  width: 100%;
  height: 100%;
}
.arco-carousel-item-inner {
  width: 100%;
  height: 100%;
}
.arco-carousel-indicator {
  position: absolute;
  bottom:  0.24rem ;
  z-index: 1;
  will-change: transform;
  box-sizing: border-box;
}
.arco-carousel-indicator.pos-start {
  left:  0.32rem ;
  text-align: left;
}
[dir="rtl"] .arco-carousel-indicator.pos-start {
  left: initial;
  right:  0.32rem ;
}
[dir="rtl"] .arco-carousel-indicator.pos-start {
  text-align: right;
}
.arco-carousel-indicator.pos-center {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  text-align: center;
}
.arco-carousel-indicator.pos-end {
  right:  0.32rem ;
  text-align: right;
}
[dir="rtl"] .arco-carousel-indicator.pos-end {
  right: initial;
  left:  0.32rem ;
}
[dir="rtl"] .arco-carousel-indicator.pos-end {
  text-align: left;
}
.arco-carousel-indicator-vertical .indicator {
  display: block;
  box-sizing: border-box;
  height:  0.24rem ;
  width:  3PX ;
}
.arco-carousel-indicator-vertical .indicator:not(:last-of-type) {
  margin: 0;
  margin-bottom:  0.16rem ;
}
.arco-carousel-indicator-vertical .indicator.type-circle:not(:last-of-type) {
  margin: 0;
  margin-bottom:  0.16rem ;
}
.arco-carousel-indicator-vertical.pos-start {
  top:  0.32rem ;
}
.arco-carousel-indicator-vertical.pos-center {
  bottom: 50%;
  transform: translate3d(0, 50%, 0);
}
.arco-carousel-indicator-vertical.pos-end {
  bottom:  0.32rem ;
}
.arco-carousel-indicator-vertical.ver-pos-left {
  left: auto;
  right: auto;
  left:  0.24rem ;
}
[dir="rtl"] .arco-carousel-indicator-vertical.ver-pos-left {
  left: initial;
  right:  0.24rem ;
}
.arco-carousel-indicator-vertical.ver-pos-right {
  left: auto;
  right: auto;
  right:  0.24rem ;
}
[dir="rtl"] .arco-carousel-indicator-vertical.ver-pos-right {
  right: initial;
  left:  0.24rem ;
}
.arco-carousel-indicator.inverse .indicator {
  background-color:  #e5e6eb ;
}
.arco-carousel-indicator.inverse .indicator.active {
  background-color:  #165DFF ;
}
.arco-carousel-indicator.outside {
  position: relative;
  left: 0;
  transform: none;
  bottom: 0;
  padding:  0.16rem 0 0.1rem ;
}
.arco-carousel-indicator .indicator {
  transition: all 0.2s;
  background-color:  rgba(255, 255, 255, 0.5) ;
}
.arco-carousel-indicator .indicator.active {
  background-color:  #FFFFFF ;
}
.arco-carousel-indicator-horizontal .indicator {
  display: inline-block;
  width:  0.24rem ;
  height:  3PX ;
}
.arco-carousel-indicator-horizontal .indicator:not(:last-of-type) {
  margin-right:  0.16rem ;
}
[dir="rtl"] .arco-carousel-indicator-horizontal .indicator:not(:last-of-type) {
  margin-right: initial;
  margin-left:  0.16rem ;
}
.arco-carousel-indicator .circle-indicator,
.arco-carousel-indicator .indicator.type-circle {
  width:  6PX ;
  height:  6PX ;
  border-radius: 50%;
}
.arco-carousel-indicator .circle-indicator:not(:last-of-type),
.arco-carousel-indicator .indicator.type-circle:not(:last-of-type) {
  margin-right:  0.16rem ;
}
[dir="rtl"] .arco-carousel-indicator .circle-indicator:not(:last-of-type),
[dir="rtl"] .arco-carousel-indicator .indicator.type-circle:not(:last-of-type) {
  margin-right: initial;
  margin-left:  0.16rem ;
}

/**
 * @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-cell {
  color:  #86909c ;
  font-size:  0.32rem ;
  margin-left:  0.32rem ;
  padding-right:  0.32rem ;
}
.arco-cell:not(:first-of-type).bordered {
  position: relative;
  border-width: 0;
}
.arco-cell:not(:first-of-type).bordered::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-cell:not(:first-of-type).bordered::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-cell:not(:first-of-type).bordered::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-cell-clickable {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  position: relative;
}
.arco-cell-clickable.arco-cell-pressed {
  background-color:  #F7F8FA ;
}
.arco-cell-clickable::after {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width:  0.32rem ;
  height: 100%;
  background-color: inherit;
  pointer-events: none;
}
.arco-cell-clickable.arco-cell-pressed::after {
  background-color:  #F7F8FA ;
}
.arco-cell-without-group {
  background-color:  #FFFFFF ;
  padding-left:  0.32rem ;
  margin-left: 0;
}
.arco-cell-without-group.bordered {
  position: relative;
  border-width: 0;
}
.arco-cell-without-group.bordered::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-cell-without-group.bordered::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-cell-without-group.bordered::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-cell-without-group.bordered::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-cell-without-group.bordered::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-cell-without-group.bordered::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-cell-inner {
  display: flex;
  align-items: center;
  height:  1.08rem ;
}
.arco-cell-inner.has-desc {
  height:  1.48rem ;
}
.arco-cell .cell-label {
  color:  #1d2129 ;
  margin-right:  0.48rem ;
}
[dir="rtl"] .arco-cell .cell-label {
  margin-right: initial;
  margin-left:  0.48rem ;
}
.arco-cell .cell-desc {
  color:  #86909c ;
  font-size:  0.28rem ;
  margin-top:  0.04rem ;
}
.arco-cell .cell-content {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
}
.arco-cell .cell-content.has-label {
  justify-content: flex-end;
}
.arco-cell .cell-content .cell-text {
  width: 100%;
  text-align: right;
  font-size:  0.28rem ;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  white-space: normal;
}
[dir="rtl"] .arco-cell .cell-content .cell-text {
  text-align: left;
}
.arco-cell .cell-label-icon {
  margin-right:  0.24rem ;
  font-size: 0;
}
[dir="rtl"] .arco-cell .cell-label-icon {
  margin-right: initial;
  margin-left:  0.24rem ;
}
.arco-cell .cell-label-icon .arco-icon {
  line-height: initial;
  font-size:  0.4rem ;
  color:  #4e5969 ;
}
.arco-cell .cell-arrow-icon {
  margin-left:  0.16rem ;
  font-size: 0;
}
[dir="rtl"] .arco-cell .cell-arrow-icon {
  transform: scale(-1);
}
[dir="rtl"] .arco-cell .cell-arrow-icon {
  margin-left: initial;
  margin-right:  0.16rem ;
}
.arco-cell .cell-arrow-icon .arco-icon {
  font-size:  0.24rem ;
  color:  #c9cdd4 ;
}
.arco-cell .cell-arrow-icon .arrow-icon-svg {
  width: 0.16rem;
}
.arco-cell .cell-arrow-icon .arrow-icon-svg path {
  fill:  #c9cdd4 ;
}
.arco-cell .arco-input-wrap {
  padding-left: 0;
}
[dir="rtl"] .arco-cell .arco-input-wrap {
  padding-left:  0.32rem ;
  padding-right: 0;
}
.arco-cell-group .cell-group-header,
.arco-cell-group .cell-group-footer {
  color:  #86909c ;
  font-size:  0.28rem ;
  line-height:  0.4rem ;
  padding:  0.24rem 0.32rem ;
}
.arco-cell-group .cell-group-body {
  background-color:  #FFFFFF ;
}
.arco-cell-group .cell-group-body.bordered {
  position: relative;
  border-width: 0;
}
.arco-cell-group .cell-group-body.bordered::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-cell-group .cell-group-body.bordered::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-cell-group .cell-group-body.bordered::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-cell-group .cell-group-body.bordered::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-cell-group .cell-group-body.bordered::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-cell-group .cell-group-body.bordered::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}

/**
 * @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-checkbox {
  display: inline-flex;
  align-items: center;
}
.arco-checkbox .checkbox-icon {
  display: inline-flex;
  align-items: center;
  font-size:  20PX ;
  color:  #e5e6eb ;
}
.arco-checkbox .checkbox-icon.checked {
  color:  #165DFF ;
}
.arco-checkbox .checkbox-icon.disabled {
  color:  #F7F8FA ;
}
.arco-checkbox .checkbox-icon.checked.disabled {
  color:  #E8F3FF ;
}
.arco-checkbox .checkbox-icon .arco-icon-circle-disabled path {
  stroke:  #e5e6eb ;
}
.arco-checkbox .checkbox-text {
  font-size:  0.32rem ;
  color:  #1d2129 ;
}
.arco-checkbox .checkbox-icon + .checkbox-text {
  margin-left:  0.16rem ;
}
[dir="rtl"] .arco-checkbox .checkbox-icon + .checkbox-text {
  margin-left: initial;
  margin-right:  0.16rem ;
}
.arco-checkbox.disabled .checkbox-text {
  opacity:  0.5 ;
}
.arco-checkbox.block {
  width: 100%;
}
.arco-checkbox.justify {
  width: 100%;
  justify-content: space-between;
}
.arco-checkbox-group .arco-checkbox:not(:last-child) {
  margin-right:  0.48rem ;
}
[dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child) {
  margin-right: initial;
  margin-left:  0.48rem ;
}
.arco-checkbox-group .arco-checkbox:not(:last-child).block,
.arco-checkbox-group .arco-checkbox:not(:last-child).justify {
  margin-right: 0;
}
[dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child).block,
[dir="rtl"] .arco-checkbox-group .arco-checkbox:not(:last-child).justify {
  margin-right: initial;
  margin-left: 0;
}

/**
 * @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-circle-progress {
  position: relative;
}
.arco-circle-progress-text {
  position: absolute;
  font-size:  0.28rem ;
}
.arco-circle-progress-text-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.arco-circle-progress-text-bottom {
  bottom: -0.4rem;
  left: 50%;
  transform: translateX(-50%);
}
.arco-circle-progress .track-color {
  stroke:  #f2f3f5 ;
}
.arco-circle-progress .color {
  stroke:  #165DFF ;
  color:  #165DFF ;
}
.arco-circle-progress .mini {
  stroke:  #E8F3FF ;
}
.arco-circle-progress .disabled {
  color:  #c9cdd4 ;
  stroke:  #c9cdd4 ;
}
.arco-circle-progress .linear-gradient-start {
  stop-color:  #4776E6 ;
}
.arco-circle-progress .linear-gradient-text {
  color:  #3C89EC ;
}
.arco-circle-progress .linear-gradient-end {
  stop-color:  #14CAFF ;
}

/**
 * @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-collapse-item {
  padding: 0;
  margin: 0;
}
.arco-collapse-item .arco-collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:  #FFFFFF ;
  height:  1.08rem ;
  margin-left:  0.32rem ;
  padding:  0.32rem 0.32rem 0.32rem 0 ;
  color:  #1d2129 ;
  line-height:  0.44rem ;
  font-size:  0.32rem ;
  position: relative;
  border-width: 0;
}
.arco-collapse-item .arco-collapse-header::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-collapse-item .arco-collapse-header::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-collapse-item .arco-collapse-header::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-collapse-item .arco-collapse-icon {
  color:  #c9cdd4 ;
  display: inline-flex;
  align-items: center;
}
.arco-collapse-item .arco-collapse-icon svg,
.arco-collapse-item .arco-collapse-icon i {
  font-size:  0.32rem ;
  width:  0.32rem ;
}
.arco-collapse-item .arco-collapse-icon-arrow {
  transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}
.arco-collapse-item .arco-collapse-content {
  height: 0;
  line-height:  0.44rem ;
  font-size:  0.28rem ;
  color:  #86909c ;
  overflow: hidden;
  transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}
.arco-collapse-item .arco-collapse-content-container {
  padding:  0.24rem 0.32rem ;
}
.arco-collapse-item.disabled .arco-collapse-header {
  color:  #c9cdd4 ;
}


/**
 * @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-count-down {
  font-size:  0.32rem ;
  line-height:  0.44rem ;
  color:  #1d2129 ;
}

/**
 * @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-picker-view {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
  height:  4.4rem ;
  position: relative;
}
.arco-picker-multi {
  color:  #1d2129 ;
  font-size:  0.32rem ;
  line-height:  0.88rem ;
}
.arco-picker-multi,
.arco-picker-selection {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.arco-picker-column {
  flex: 1;
  height: 100%;
  overflow: hidden;
  text-align: center;
}
.arco-picker-column-item-wrap {
  box-sizing: content-box;
  will-change: transform;
}
.arco-picker-column-item {
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}
.arco-picker-column-item::-webkit-scrollbar {
  display: none;
}
.arco-picker-selection {
  will-change: transform;
  flex-direction: column;
  pointer-events: none;
}
.arco-picker-selection-mask-top {
  width: 100%;
  flex: 1;
  background:  linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%) ;
}
.arco-picker-selection-mask-bottom {
  width: 100%;
  flex: 1;
  background:  linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.7) 65%) ;
}
.arco-picker-selection-bar {
  width: 100%;
  height:  0.88rem ;
  flex: 0 0 auto;
  position: relative;
  border-width: 0;
}
.arco-picker-selection-bar::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-picker-selection-bar::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-picker-selection-bar::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-picker-selection-bar::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-picker-selection-bar::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-picker-selection-bar::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}

/**
 * @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-picker .arco-popup-content {
  box-shadow:  0 2PX 8PX rgba(0, 0, 0, 0.15) ;
  border-top-left-radius:  0.08rem ;
  border-top-right-radius:  0.08rem ;
}
.arco-picker-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:  #FFFFFF ;
  height:  1.08rem ;
  border-top-left-radius:  0.08rem ;
  border-top-right-radius:  0.08rem ;
}
.arco-picker-header-title {
  flex: 1;
  text-align: center;
  font-size:  0.32rem ;
  padding:  0 1.2rem ;
  color:  #1d2129 ;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.arco-picker-header-btn {
  position: absolute;
  font-size:  0.3rem ;
  padding:  0.32rem ;
}
.arco-picker-header-btn.left {
  left: 0;
  color:  #165DFF ;
}
[dir="rtl"] .arco-picker-header-btn.left {
  left: initial;
  right: 0;
}
.arco-picker-header-btn.right {
  right: 0;
  color:  #165DFF ;
}
[dir="rtl"] .arco-picker-header-btn.right {
  right: initial;
  left: 0;
}

/**
 * @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-date-picker-show {
  display: flex;
  font-size:  0.32rem ;
  padding:  0 0.32rem ;
  color:  #c9cdd4 ;
  min-height:  0.96rem ;
  background-color:  #FBFCFC ;
}
.arco-date-picker-show > span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.arco-date-picker-show-separate {
  flex: 0 1 auto;
  min-width:  0.96rem ;
}
.arco-date-picker-range-item {
  flex: 1 0 auto;
}
.arco-date-picker-range-item-active {
  color:  #1d2129 ;
}

/**
 * @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);
 * }
 * ```
 */
@keyframes fade-scale-on {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fade-scale-off {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
.arco-fade-scale-enter-active {
  animation: fade-scale-on cubic-bezier(0.2, 1.23, 0.25, 1) forwards;
  animation-duration: var(--builtin-transition-fade-scale-enter-duration, 0.45s);
}
.arco-fade-scale-exit-active {
  animation: fade-scale-off cubic-bezier(0.48, 0.04, 0.52, 0.96) forwards;
  animation-duration: var(--builtin-transition-fade-scale-exit-duration, 0.15s);
}
.arco-dialog-mask,
.arco-dialog-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.arco-dialog-mask {
  z-index: 1000;
  background:  rgba(0, 0, 0, 0.6) ;
}
.arco-dialog-container {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  pointer-events: none;
}
.arco-dialog-content {
  position: relative;
  width:  5.4rem ;
  pointer-events: visible;
}
.arco-dialog-content.android {
  width:  5.6rem ;
}
.arco-dialog-container.pre-mount .arco-dialog-content,
.arco-dialog-container[class*="-exit-done"] .arco-dialog-content {
  pointer-events: none;
}
.arco-dialog-part {
  background:  #FFFFFF ;
}
.arco-dialog-part.android:first-of-type {
  border-top-left-radius:  0.08rem ;
  border-top-right-radius:  0.08rem ;
}
.arco-dialog-part.android:last-of-type {
  border-bottom-left-radius:  0.08rem ;
  border-bottom-right-radius:  0.08rem ;
}
.arco-dialog-part.ios:first-of-type {
  border-top-left-radius:  0.16rem ;
  border-top-right-radius:  0.16rem ;
}
.arco-dialog-part.ios:last-of-type {
  border-bottom-left-radius:  0.16rem ;
  border-bottom-right-radius:  0.16rem ;
}
.arco-dialog-header {
  position: relative;
}
.arco-dialog-header.ios {
  text-align: center;
  padding-top:  0.4rem ;
  padding-left:  0.32rem ;
  padding-right:  0.32rem ;
  font-size:  0.34rem ;
  line-height:  0.52rem ;
  font-weight: bold;
}
.android .arco-dialog-header.ios,
.arco-dialog-header.ios.android,
.arco-dialog-header.ios.system-android {
  font-weight: 400;
  -webkit-text-stroke: 0.3PX currentColor;
  text-stroke: 0.3PX currentColor;
}
.arco-dialog-header.ios.only-title {
  padding-bottom:  0.4rem ;
}
.arco-dialog-header.android {
  color:  #1d2129 ;
}
.arco-dialog-body.ios {
  padding-top:  0.08rem ;
  padding-left:  0.32rem ;
  padding-right:  0.32rem ;
  padding-bottom:  0.4rem ;
  color:  #4e5969 ;
  font-size:  0.3rem ;
  line-height:  0.44rem ;
}
.arco-dialog-body.ios.sub-title {
  padding-top:  0.4rem ;
}
.arco-dialog-body.android {
  padding-top:  0.24rem ;
  padding-left:  0.48rem ;
  padding-right:  0.48rem ;
  color:  #4e5969 ;
  font-size:  0.3rem ;
  line-height:  0.48rem ;
}
.arco-dialog-header.left,
.arco-dialog-body.left {
  text-align: left;
}
[dir="rtl"] .arco-dialog-header.left,
[dir="rtl"] .arco-dialog-body.left {
  text-align: right;
}
.arco-dialog-header.center,
.arco-dialog-body.center {
  text-align: center;
}
.arco-dialog-header.right,
.arco-dialog-body.right {
  text-align: right;
}
[dir="rtl"] .arco-dialog-header.right,
[dir="rtl"] .arco-dialog-body.right {
  text-align: left;
}
.arco-dialog-header.android,
.arco-dialog-body.sub-title.android {
  padding-top:  0.4rem ;
  padding-left:  0.48rem ;
  padding-right:  0.48rem ;
  font-size:  0.34rem ;
  line-height:  0.56rem ;
}
.arco-dialog-header.ios,
.arco-dialog-body.sub-title.ios {
  color:  #1d2129 ;
}
.arco-dialog-footer {
  display: flex;
  align-items: center;
}
.arco-dialog-footer.android {
  padding-left:  0.48rem ;
  padding-right:  0.48rem ;
  padding-top:  0.48rem ;
  padding-bottom:  0.4rem ;
  justify-content: flex-end;
  text-align: right;
}
[dir="rtl"] .arco-dialog-footer.android {
  text-align: left;
}
.arco-dialog-footer.android .dialog-footer-button {
  color:  #1a74ff ;
  font-size:  0.3rem ;
  line-height:  0.4rem ;
}
.arco-dialog-footer.android .dialog-footer-button:not(:last-child) {
  margin-right:  0.56rem ;
}
[dir="rtl"] .arco-dialog-footer.android .dialog-footer-button:not(:last-child) {
  margin-right: initial;
  margin-left:  0.56rem ;
}
.arco-dialog-footer.ios {
  overflow: hidden;
}
.arco-dialog-footer.ios .dialog-footer-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height:  0.88rem ;
  font-size:  0.32rem ;
  color:  #165DFF ;
}
.arco-dialog-footer.ios:not(.collapsed):not(.type-button) {
  position: relative;
  border-width: 0;
}
.arco-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button {
  flex: 1;
}
.arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child) {
  position: relative;
  border-width: 0;
}
.arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
  content: '';
  width: 1PX;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  border-right-style: solid;
  border-right-width: 1PX;
  border-right-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: right top;
  -webkit-transform-origin: right top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
    transform: scaleX(0.5);
    -webkit-transform: scaleX(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
    transform: scaleX(0.33333333);
    -webkit-transform: scaleX(0.33333333);
    border-radius: 0;
  }
}
[dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child) {
  position: relative;
  border-width: 0;
}
[dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
  content: '';
  width: 1PX;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-left-style: solid;
  border-left-width: 1PX;
  border-left-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
    transform: scaleX(0.5);
    -webkit-transform: scaleX(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
    transform: scaleX(0.33333333);
    -webkit-transform: scaleX(0.33333333);
    border-radius: 0;
  }
}
[dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
  display: none;
}
.arco-dialog-footer.ios.collapsed {
  flex-direction: column;
}
.arco-dialog-footer.ios.collapsed .dialog-footer-button {
  width: 100%;
  position: relative;
  border-width: 0;
}
.arco-dialog-footer.ios.collapsed .dialog-footer-button::before {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-top-style: solid;
  border-top-width: 1PX;
  border-top-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-dialog-footer.ios.collapsed .dialog-footer-button::before {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-dialog-footer.ios.collapsed .dialog-footer-button::before {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-dialog-footer.ios.type-button {
  flex-direction: column;
  padding-left:  0.32rem ;
  padding-right:  0.32rem ;
  padding-bottom:  0.4rem ;
}
.arco-dialog-footer.ios.type-button .dialog-footer-button {
  width: 100%;
  border-radius:  0.6rem ;
  height:  0.72rem ;
}
.arco-dialog-footer.ios.type-button .dialog-footer-button:first-child {
  color:  #FFFFFF ;
  background:  #165DFF ;
}
.arco-dialog-footer.ios.type-button .dialog-footer-button:not(:first-child) {
  color:  #86909c ;
  margin-top:  0.16rem ;
}
.arco-dialog-footer.ios.type-button .dialog-footer-button:last-child {
  margin-bottom: -0.14rem;
}

/**
 * @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-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding:  0.32rem 0;
  border-color:  #e5e6eb ;
  border-width: 0;
  border-style: solid;
}
.arco-divider::before,
.arco-divider::after {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: inherit;
  border-width: 0;
  border-color: inherit;
  border-style: inherit;
  border-top-width:  1PX ;
}
.arco-divider::before {
  content: '';
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-divider--hairline::before,
  .arco-divider--hairline::after {
    transform: scaleY(0.5);
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-divider--hairline::before,
  .arco-divider--hairline::after {
    transform: scaleY(0.33333333);
  }
}
.arco-divider--with-text {
  font-size:  0.28rem ;
  color:  #4e5969 ;
}
.arco-divider--with-text::before {
  margin-right:  0.24rem ;
}
[dir="rtl"] .arco-divider--with-text::before {
  margin-right: initial;
  margin-left:  0.24rem ;
}
.arco-divider--with-text::after {
  content: '';
  margin-left:  0.24rem ;
}
[dir="rtl"] .arco-divider--with-text::after {
  margin-left: initial;
  margin-right:  0.24rem ;
}
.arco-divider--with-width::before,
.arco-divider--with-width::after {
  flex-shrink: 0;
  flex-grow: 0;
}
.arco-divider--text-left::before {
  max-width:  0.56rem ;
}
.arco-divider--text-right::after {
  max-width:  0.56rem ;
}

/**
 * @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-dropdown {
  position: fixed;
  overflow: hidden;
  left: 0;
  right: 0;
  z-index: 1000;
}
.arco-dropdown-options {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1001;
  will-change: transform;
  background-color:  #FFFFFF ;
}
.drop-up .arco-dropdown-options {
  bottom: 0;
}
.arco-dropdown-options-container {
  height: auto;
}
.arco-dropdown-options-wrap.use-column {
  display: flex;
  flex-wrap: wrap;
  padding:  0.32rem ;
  margin:  0 -0.24rem -0.24rem 0 ;
}
.arco-dropdown-options-item {
  padding:  0.32rem ;
  font-size:  0.32rem ;
  line-height:  0.44rem ;
  color:  #1d2129 ;
  text-align: left;
  position: relative;
}
[dir="rtl"] .arco-dropdown-options-item {
  text-align: right;
}
.arco-dropdown-options-item.selected {
  color:  #165DFF ;
}
.arco-dropdown-options-item.selected .arco-dropdown-options-item-icon {
  color:  #165DFF ;
}
.arco-dropdown-options-item.disabled {
  color:  #c9cdd4 ;
}
.arco-dropdown-options-item-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right:  0.32rem ;
  color: transparent;
}
[dir="rtl"] .arco-dropdown-options-item-icon {
  right: initial;
  left:  0.32rem ;
}
.arco-dropdown-options-item-fake-col,
.arco-dropdown-options-item-col {
  flex: 1;
  margin-right:  0.24rem ;
  margin-bottom:  0.24rem ;
  padding:  0.16rem ;
}
.arco-dropdown-options-item-col {
  text-align: center;
  font-size:  0.28rem ;
  line-height:  0.4rem ;
  color:  #4e5969 ;
  border-radius:  2PX ;
  background:  #F7F8FA ;
}
.arco-dropdown-options-item-col.selected {
  color:  #165DFF ;
  background:  #E8F3FF ;
}
.arco-dropdown-options-item-col.disabled {
  color:  #c9cdd4 ;
}
.arco-dropdown-options-item-col .arco-dropdown-options-item-icon {
  display: none;
}
.arco-dropdown-mask {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color:  rgba(0, 0, 0, 0.6) ;
}
.arco-dropdown-mask.is-show {
  opacity: 1;
}

/**
 * @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-dropdown-menu .arco-select {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  border-width: 0;
}
.arco-dropdown-menu .arco-select::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-dropdown-menu .arco-select::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-dropdown-menu .arco-select::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-dropdown-menu .arco-select-item {
  position: relative;
  padding:  0.3rem ;
  font-size:  0.32rem ;
  line-height:  0.44rem ;
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  color:  #1d2129 ;
}
.arco-dropdown-menu .arco-select-item.is-disabled {
  color:  #c9cdd4 ;
}
.arco-dropdown-menu .arco-select-item.is-selected {
  color:  #165DFF ;
}
.arco-dropdown-menu .arco-select-item-tip {
  display: inline-block;
  white-space: nowrap;
  color:  #86909c ;
  padding-right:  0.32rem ;
}
[dir="rtl"] .arco-dropdown-menu .arco-select-item-tip {
  padding-right: initial;
  padding-left:  0.32rem ;
}
.arco-dropdown-menu .arco-select-item-label {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.arco-dropdown-menu .arco-select-item-label-text {
  flex: auto;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width:  1.92rem ;
  text-overflow: ellipsis;
}
.arco-dropdown-menu .arco-select-item-icon {
  flex: none;
  color:  #c9cdd4 ;
  width:  12PX ;
  height:  12PX ;
  margin-left:  4PX ;
  transform: rotate(0deg);
  transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}
[dir="rtl"] .arco-dropdown-menu .arco-select-item-icon {
  margin-left: initial;
  margin-right:  4PX ;
}
.arco-dropdown-menu .arco-select-item-icon.is-show {
  color:  #165DFF ;
  transform: rotate(180deg);
}

/**
 * @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-ellipsis {
  font-size:  0.32rem ;
}
.arco-ellipsis-native.ellipsis,
.arco-ellipsis-js-content-initial {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-box-orient: vertical;
  position: relative;
}
.arco-ellipsis-native-ellipsis-node {
  position: absolute;
  right: 0;
  bottom: 0;
  background:  linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff) ;
  padding-left:  20PX ;
}
.arco-ellipsis-js-content-text-pre {
  white-space: pre-line;
}
.arco-ellipsis-js-content-ellipsis {
  display: none;
}

/**
 * @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-form-item {
  display: flex;
  align-items: flex-start;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color:  #e5e6eb ;
}
.arco-form-item:first-child {
  border: none;
}
.arco-form-label-item {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  font-size:  0.32rem ;
  line-height:  1.08rem ;
  color:  #1d2129 ;
  padding-right:  0.32rem ;
  width:  1.92rem ;
}
[dir="rtl"] .arco-form-label-item {
  padding-right: initial;
  padding-left:  0.32rem ;
}
.arco-form-label-item-required-asterisk {
  position: absolute;
  left: -0.6em;
  top: 0;
  font-size:  0.32rem ;
  line-height:  1.08rem ;
  color:  #F53F3F ;
}
[dir="rtl"] .arco-form-label-item-required-asterisk {
  left: initial;
  right: -0.6em;
}
.disabled .arco-form-label-item {
  color:  #c9cdd4 ;
}
.arco-form-item-control {
  padding: 16px 0;
}
.arco-form-item-control .arco-input-wrap,
.arco-form-item-control .arco-input {
  padding: 0;
}
.arco-form-item-control .arco-input-wrap.textarea {
  padding: 0;
}
.arco-form-item-control-wrapper {
  width: 100%;
  flex: 1;
  position: relative;
}
.arco-form-item-control-wrapper .arco-input-wrap.single-line {
  height:  0.44rem ;
}
.arco-form-item-message {
  font-size: 0.24rem;
  color:  #F53F3F ;
  margin-top: -0.1rem;
  margin-bottom: 16px;
}
.arco-form-item-message svg,
.arco-form-item-message span {
  vertical-align: middle;
}
.arco-form-item-message svg {
  margin-right: 0.08rem;
}
[dir="rtl"] .arco-form-item-message svg {
  margin-right: initial;
  margin-left: 0.08rem;
}
.arco-form-item-error-message {
  color:  #F53F3F ;
}
.arco-form-item-warning-message {
  color:  #FF7D00 ;
}
.arco-form-item.arco-form-item-vertical {
  display: block;
}
.arco-form-item.arco-form-item-vertical .arco-input-wrap {
  padding-left: 0;
}
[dir="rtl"] .arco-form-item.arco-form-item-vertical .arco-input-wrap {
  padding-left: initial;
  padding-right: 0;
}
.arco-form-item.arco-form-item-vertical .arco-form-label-item {
  width: auto;
  margin-top: 16px;
  height:  0.32rem ;
  line-height:  0.32rem ;
}
.arco-form-item.arco-form-item-vertical .arco-form-label-item-required-asterisk {
  height:  0.32rem ;
  line-height:  0.32rem ;
}
.arco-form-picker-link-container {
  font-size: 0.32rem;
  color:  #1d2129 ;
}
.arco-form-picker-link-container-placeholder {
  color:  #c9cdd4 ;
}

/**
 * @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-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.arco-grid-rows {
  display: flex;
}
.arco-grid-rows-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.arco-grid-rows-item-icon {
  width:  0.64rem ;
  height:  0.64rem ;
}
.arco-grid-rows-item-icon.circle {
  border-radius: 50%;
}
.arco-grid-rows-item-text {
  display: flex;
  flex-direction: column;
  margin-top:  0.16rem ;
  text-align: center;
}
.arco-grid-rows-item-title {
  font-size:  0.32rem ;
  line-height:  0.4rem ;
}
.arco-grid-rows-item-content {
  font-size:  0.24rem ;
  line-height:  0.32rem ;
  margin-top:  0.04rem ;
  color:  #86909c ;
}
.arco-grid-rows-item.horizontal {
  flex-direction: row;
}
.arco-grid-rows-item.horizontal .arco-grid-rows-item-text {
  margin-left:  0.24rem ;
  margin-top: 0;
  text-align: left;
}
[dir="rtl"] .arco-grid-rows-item.horizontal .arco-grid-rows-item-text {
  margin-left: initial;
  margin-right:  0.24rem ;
}
[dir="rtl"] .arco-grid-rows-item.horizontal .arco-grid-rows-item-text {
  text-align: right;
}
.arco-grid-rows-item.horizontal .arco-grid-rows-item-content {
  margin-top:  0 ;
}
.arco-grid-rows-item.border {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arco-grid-rows-item.border .vertical-border:after {
  content: "";
  width: 1px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: scaleX(0.5) translateY(-50%);
  height:  66.66% ;
  background-color:  #e5e6eb ;
}
.arco-grid-rows-item.border .horizontal-border:after {
  content: "";
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: scaleY(0.5) translateX(-50%);
  width:  66.66% ;
  background-color:  #e5e6eb ;
}
.arco-grid.sliding {
  display: inline-block;
  overflow-x: auto;
}
.arco-grid.sliding::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}
.arco-grid .arco-image-picker {
  width: 100%;
  /* 兼容grid和image-picker组合使用 */
}

/**
 * @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-image-picker {
  font-size:  0.28rem ;
}
.arco-image-picker-container {
  display: flex;
  flex-wrap: wrap;
}
.arco-image-picker-image {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 100%;
  border-radius:  0.04rem ;
  overflow: hidden;
}
.arco-image-picker-image-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
}
.arco-image-picker-image .arco-image {
  height: 100%;
  width: 100%;
}
.arco-image-picker-image-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.arco-image-picker-add {
  background-color:  #F7F8FA ;
  border-radius:  0.04rem ;
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 100%;
}
.arco-image-picker-add-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size:  0.24rem ;
  color:  #86909c ;
}
.arco-image-picker-add-icon {
  font-size:  0.6rem ;
  color:  #c9cdd4 ;
}
.arco-image-picker-add-icon svg {
  display: block;
}
.arco-image-picker-add-disabled {
  pointer-events: none;
}
.arco-image-picker-add-disabled .arco-image-picker-add-icon {
  opacity:  0.7 ;
}
.arco-image-picker-add input {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.arco-image-picker-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.arco-image-picker-close-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:  0.24rem ;
  width:  0.36rem ;
  height:  0.36rem ;
  color:  #FFFFFF ;
  background:  rgba(0, 0, 0, 0.3) ;
  border-radius:  0 0.04rem ;
}
.arco-image-picker-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background:  rgba(0, 0, 0, 0.5) ;
  color:  #FFFFFF ;
  font-size:  0.28rem ;
}
.arco-image-picker-disabled {
  pointer-events: none;
}

/**
 * @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-image-preview,
.image-preview-lock-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.image-preview-lock-modal {
  transform: translateZ(2PX);
}
.arco-image-preview {
  background:  rgba(0, 0, 0, 0.9) ;
}
.arco-image-preview.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
}
.arco-image-preview .preview-image-wrap-container,
.arco-image-preview .preview-image-wrap {
  width: 100%;
  height: 100%;
}
.arco-image-preview .arco-carousel-wrap,
.arco-image-preview .arco-carousel,
.arco-image-preview .arco-carousel-inner {
  height: 100%;
}
.arco-image-preview .carousel-item {
  overflow: hidden;
}
.arco-image-preview .carousel-item::-webkit-scrollbar {
  display: none;
}
.arco-image-preview .preview-image {
  width: 100%;
  height: 100%;
  will-change: transform;
}
.arco-image-preview .preview-image .image-container {
  overflow: visible;
}
.arco-image-preview .preview-image.preview-hidden {
  pointer-events: none;
}
.arco-image-preview .preview-image.preview-hidden .image-container {
  visibility: hidden;
}
.arco-image-preview .preview-image .image-bottom-overlap {
  overflow: visible;
}
.image-preview-indicator {
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 1003;
  position: fixed;
  box-sizing: border-box;
  font-size:  0.28rem ;
  color:  #FFFFFF ;
  padding:  0.24rem 0.4rem ;
  background:  linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3)) ;
}
.image-preview-fake-rect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.arco-image-preview .image-container img.closing-animation,
.image-preview-fake-trans-image {
  position: fixed;
  left: 0;
  top: 0;
  -o-object-fit: cover;
     object-fit: cover;
  transition:  all cubic-bezier(0.34, 0.69, 0.1, 1) ;
  will-change: transform;
  pointer-events: none;
  height: auto !important;
}
.image-preview-loading-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.image-preview-loading-area .loading-icon .bg-color-with-config {
  background: #FFFFFF;
}
.image-preview-loading-area .loading-icon .stop-color-with-config {
  stop-color: #FFFFFF;
}
.image-preview-loading-area .loading-icon .fill-color-with-config {
  fill: #FFFFFF;
}
.image-preview-loading-area .loading-icon .stroke-color-with-config {
  stroke: #FFFFFF;
}

/**
 * @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-index-bar {
  position: relative;
  background:  #FFFFFF ;
  overflow: hidden;
}
.arco-index-bar-container {
  height: 100%;
  overflow-y: auto;
}
.arco-index-bar-container::-webkit-scrollbar {
  display: none;
}
.arco-index-bar-group-active {
  color:  #165DFF ;
}
.arco-index-bar-group-title {
  padding-left:  0.32rem ;
  height:  0.48rem ;
  background:  #f7f8fa ;
  font-size:  0.28rem ;
  color:  #86909c ;
  display: flex;
  align-items: center;
}
[dir="rtl"] .arco-index-bar-group-title {
  padding-left: initial;
  padding-right:  0.32rem ;
}
.arco-index-bar-group-item {
  height:  1.08rem ;
  display: flex;
  align-items: center;
  margin-left:  0.32rem ;
  font-size:  0.32rem ;
}
[dir="rtl"] .arco-index-bar-group-item {
  margin-left: initial;
  margin-right:  0.32rem ;
}
.arco-index-bar-group-item:not(:last-child) {
  position: relative;
  border-width: 0;
}
.arco-index-bar-group-item:not(:last-child)::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-index-bar-group-item:not(:last-child)::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-index-bar-group-item:not(:last-child)::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-index-bar-sidebar {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
[dir="rtl"] .arco-index-bar-sidebar {
  right: initial;
  left: 0;
}
.arco-index-bar-sidebar-touching {
  width: 100%;
}
.arco-index-bar-sidebar-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  padding:  0.04rem 0.16rem ;
  cursor: pointer;
}
.arco-index-bar-sidebar-item-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  0.2rem ;
  font-size:  0.2rem ;
  line-height:  0.28rem ;
}
.arco-index-bar-sidebar-item:last-child {
  padding-bottom: 0px;
}
.arco-index-bar-sidebar-active {
  color:  #165DFF ;
}
.arco-index-bar-sidebar-sweat {
  position: absolute;
  height:  1rem ;
  min-width:  1rem ;
  line-height:  1rem ;
  border-radius: 9999px;
  text-align: center;
  padding:  0 0.16rem ;
  background:  #333333 ;
  right:  0.72rem ;
  font-size:  0.48rem ;
  color:  #FFFFFF ;
}
[dir="rtl"] .arco-index-bar-sidebar-sweat {
  right: initial;
  left:  0.72rem ;
}
.arco-index-bar-sidebar-sweat::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right:  -0.56rem ;
  width: 0;
  height: 0;
  border:  0.36rem solid transparent ;
  border-left-color:  #333333 ;
  border-radius: 4px;
}
[dir="rtl"] .arco-index-bar-sidebar-sweat::before {
  right: initial;
  left:  -0.56rem ;
}
[dir="rtl"] .arco-index-bar-sidebar-sweat::before {
  border-left-color: initial;
  border-right-color:  #333333 ;
}
.arco-index-bar-sidebar-toast {
  position: absolute;
  background:  rgba(0, 0, 0, 0.8) ;
  color:  #FFFFFF ;
  left: 50%;
  top: 50%;
  min-width:  0.96rem ;
  height:  0.96rem ;
  line-height:  0.96rem ;
  transform: translate(-50%, -50%);
  text-align: center;
  padding:  0 0.16rem ;
  font-size:  0.48rem ;
  border-radius:  0.08rem ;
}

/**
 * @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-input-container {
  width: 100%;
  color:  #1d2129 ;
  position: relative;
}
.arco-input-container .arco-input-label {
  min-width:  1.28rem ;
}
.arco-input-label {
  padding-top: 1PX;
}
.arco-input-label.required::before {
  content: "* ";
  color:  #F53F3F ;
}
.disabled .arco-input-label {
  color:  #c9cdd4 ;
}
.arco-input-wrap {
  position: relative;
  height:  1.08rem ;
  padding: 0 0.32rem ;
  display: flex;
  align-items: center;
}
.arco-input-wrap textarea,
.arco-input-wrap input {
  flex: 1;
  background: transparent;
}
.arco-input-wrap textarea:disabled,
.arco-input-wrap input:disabled {
  color:  #c9cdd4 ;
  -webkit-text-fill-color:  #c9cdd4 ;
  opacity: 1;
}
.arco-input-wrap.textarea {
  height: auto;
  align-items: flex-start;
  padding:  0.32rem ;
}
.arco-input-wrap.textarea.has-stat {
  padding:  0.32rem 0.32rem 0.88rem ;
}
.arco-input-wrap.border-all {
  box-shadow: 0 0 0 1PX #e5e6eb inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-input-wrap.border-all {
    box-shadow: 0 0 0 0.5PX #e5e6eb inset;
  }
}
.ios .arco-input-wrap.border-all,
.arco-input-wrap.border-all.ios {
  box-shadow: none;
  border: 0.5PX solid #e5e6eb;
}
.arco-input-wrap.border-half {
  box-shadow: 0 1PX 0 0 #e5e6eb inset;
  box-shadow: 0 -1PX 0 0 #e5e6eb inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-input-wrap.border-half {
    box-shadow: 0 0.5PX 0 0 #e5e6eb inset;
  }
}
.ios .arco-input-wrap.border-half,
.arco-input-wrap.border-half.ios {
  box-shadow: none;
  border-top: 0.5PX solid #e5e6eb;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-input-wrap.border-half {
    box-shadow: 0 -0.5PX 0 0 #e5e6eb inset;
  }
}
.ios .arco-input-wrap.border-half,
.arco-input-wrap.border-half.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid #e5e6eb;
}
.arco-input-wrap.border-bottom {
  box-shadow: 0 -1PX 0 0 #e5e6eb inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-input-wrap.border-bottom {
    box-shadow: 0 -0.5PX 0 0 #e5e6eb inset;
  }
}
.ios .arco-input-wrap.border-bottom,
.arco-input-wrap.border-bottom.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid #e5e6eb;
}
.arco-input-prefix,
.arco-input-suffix,
.arco-input-clear {
  font-size:  0.32rem ;
  line-height:  0.44rem ;
  align-items: center;
  justify-content: center;
  display: flex;
}
.arco-input-prefix {
  padding-right:  0.48rem ;
}
[dir="rtl"] .arco-input-prefix {
  padding-right: initial;
  padding-left:  0.48rem ;
}
.arco-input-clear,
.arco-input-suffix {
  padding-left:  0.32rem ;
}
[dir="rtl"] .arco-input-clear,
[dir="rtl"] .arco-input-suffix {
  padding-left: initial;
  padding-right:  0.32rem ;
}
.arco-input-clear {
  color:  #c9cdd4 ;
  font-size:  16PX ;
}
.arco-input {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size:  0.32rem ;
  line-height:  0.44rem ;
  caret-color:  #165DFF ;
  padding:  0.24rem 0;
  color:  #1d2129 ;
}
.arco-input::-moz-placeholder {
  color:  #c9cdd4 ;
}
.arco-input::placeholder {
  color:  #c9cdd4 ;
}
.arco-input::-webkit-search-cancel-button {
  display: none;
}

/**
 * @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-keyboard {
  background:  #f2f3f5 ;
  padding:  0.16rem ;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
}
.arco-keyboard-wrapper {
  display: flex;
}
.arco-keyboard-key-wrapper {
  flex: 2 0 auto;
}
.arco-keyboard-row {
  display: flex;
}
.arco-keyboard-row:not(.arco-keyboard-row:nth-last-child(1)) {
  margin-bottom:  0.16rem ;
}
.arco-keyboard-row .arco-keyboard-key:not(.arco-keyboard-row .arco-keyboard-key:nth-child(1)) {
  margin-left:  0.16rem ;
}
.arco-keyboard-row .arco-keyboard-key-special {
  flex: 2.1 0 auto;
}
.arco-keyboard-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left:  0.16rem ;
}
.arco-keyboard-col .arco-keyboard-key:not(.arco-keyboard-col .arco-keyboard-key:nth-child(1)) {
  margin-top:  0.16rem ;
}
.arco-keyboard-col .arco-keyboard-key-confirm {
  flex: 2.5 0 auto;
  background:  #165DFF ;
  color:  #FFFFFF ;
  font-size:  0.36rem ;
}
.arco-keyboard-key {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-weight:  500 ;
  font-size:  0.44rem ;
  line-height:  0.6rem ;
  background:  #ffffff ;
  height:  0.96rem ;
  border-radius:  0.08rem ;
  color:  #1d2129 ;
}
.arco-keyboard-key:active {
  background:  #e5e6eb ;
}
.arco-keyboard-key .arco-icon {
  font-size:  0.52rem ;
}
.arco-keyboard-popup {
  display: none;
}

/**
 * @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-load-more {
  text-align: center;
  font-size:  0.28rem ;
  color:  #86909c ;
}

/**
 * @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-nav-bar {
  position: relative;
  width: 100%;
  box-sizing: content-box;
  color:  #1d2129 ;
  background:  #FFFFFF ;
}
.arco-nav-bar.arco-nav-bar-fixed {
  height:  0.88rem ;
}
.arco-nav-bar.arco-nav-bar-float {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.arco-nav-bar.arco-nav-bar-float:not(.arco-nav-bar-hide) .arco-nav-bar-wrapper-fixed {
  position: absolute;
}
.arco-nav-bar.arco-nav-bar-hide .arco-nav-bar-title,
.arco-nav-bar.arco-nav-bar-hide .arco-nav-bar-right {
  visibility: hidden;
}
.arco-nav-bar.arco-nav-bar-hide .arco-nav-bar-wrapper-border::after {
  border-color: transparent;
}
.arco-nav-bar-wrapper {
  background: inherit;
  height:  0.88rem ;
  box-sizing: content-box;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: all 0.1s linear;
}
.arco-nav-bar-wrapper.arco-nav-bar-wrapper-border {
  position: relative;
  border-width: 0;
}
.arco-nav-bar-wrapper.arco-nav-bar-wrapper-border::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-nav-bar-wrapper.arco-nav-bar-wrapper-border::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-nav-bar-wrapper.arco-nav-bar-wrapper-border::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-nav-bar-wrapper.arco-nav-bar-wrapper-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 100;
}
.arco-nav-bar-inner {
  position: relative;
  height: 100%;
}
.arco-nav-bar-left,
.arco-nav-bar-title,
.arco-nav-bar-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.arco-nav-bar-left,
.arco-nav-bar-right {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size:  0.32rem ;
  padding:  0 0.32rem ;
  position: absolute;
  top: 0;
  height: 100%;
  color: inherit;
}
.arco-nav-bar-left {
  left: 0;
}
.arco-nav-bar-title {
  font-size:  0.34rem ;
  padding:  0 0.92rem ;
  width: 100%;
  height: 100%;
  color: inherit;
  text-align: center;
}
.arco-nav-bar-title-text {
  font-size:  0.34rem ;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
  font-weight: bold;
}
.arco-nav-bar-right {
  right: 0;
}
.arco-nav-bar .nav-bar-back {
  height:  0.32rem ;
  font-size: 0;
}

/**
 * @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-notice-bar {
  background:  #FFF7E8 ;
  color:  #FF7D00 ;
  padding:  0 0.32rem ;
  display: flex;
  align-items: flex-start;
  font-size: 0;
}
.arco-notice-bar.no-wrap .arco-notice-bar-content-inner {
  white-space: nowrap;
}
.arco-notice-bar.ellipsis .arco-notice-bar-content-inner {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arco-notice-bar.wrapable .arco-notice-bar-content-inner {
  line-height:  0.4rem ;
  padding:  0.16rem 0;
}
.arco-notice-bar-left-part,
.arco-notice-bar-right-part,
.arco-notice-bar-close {
  padding:  0.16rem 0;
  font-size:  0.28rem ;
}
.arco-notice-bar-left-part .arco-icon,
.arco-notice-bar-right-part .arco-icon,
.arco-notice-bar-close .arco-icon {
  float: left;
}
.arco-notice-bar-left-part::after,
.arco-notice-bar-right-part::after,
.arco-notice-bar-close::after {
  content: "";
  display: block;
  clear: both;
}
.arco-notice-bar-left-part {
  padding-right:  0.16rem ;
}
[dir="rtl"] .arco-notice-bar-left-part {
  padding-right: initial;
  padding-left:  0.16rem ;
}
.arco-notice-bar-right-part,
.arco-notice-bar-close {
  padding-left:  0.16rem ;
}
[dir="rtl"] .arco-notice-bar-right-part,
[dir="rtl"] .arco-notice-bar-close {
  padding-left: initial;
  padding-right:  0.16rem ;
}
.arco-notice-bar-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.arco-notice-bar-content-inner {
  display: inline-block;
  font-size:  0.28rem ;
  line-height:  0.72rem ;
}
.arco-notice-bar-content-inner.animate {
  animation: marquee linear both;
}
[dir="rtl"] .arco-notice-bar-content-inner.animate {
  animation-name: marquee-reverse;
}
.arco-notice-bar-content .arco-carousel {
  height:  0.72rem ;
  white-space: normal;
}
.arco-notice-bar-content .arco-carousel .arco-carousel-item {
  font-size:  0.28rem ;
  line-height:  0.72rem ;
}
.arco-notice-bar-content .arco-carousel-indicator {
  display: none;
}
.arco-notice-bar .arco-icon {
  font-size:  16PX ;
  line-height:  0.4rem ;
  height:  0.4rem ;
}
.arco-notice-bar-gradient {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 1;
  width:  0.16rem ;
  background:  linear-gradient(to right, #fff7e8, rgba(255, 247, 232, 0)) ;
}
.arco-notice-bar-gradient.left {
  left: 0;
}
.arco-notice-bar-gradient.right {
  right: -2PX;
  transform: rotate(180deg);
}
@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes marquee-reverse {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}

/**
 * @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-notify {
  width: 100%;
  overflow: hidden;
  position: relative;
  transition-property: height;
  color:  #FFFFFF ;
  font-size:  0.28rem ;
}
.arco-notify-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  transition-property: transform;
  min-height:  0.72rem ;
}
.arco-notify-info {
  background: transparent;
  color:  #165DFF ;
}
.arco-notify-success {
  background:  #00B42A ;
}
.arco-notify-error {
  background:  #F53F3F ;
}
.arco-notify-warn {
  background:  #FF7D00 ;
}
.arco-notify-content-transition-Y0 {
  transform: translateY(0);
}
.arco-notify-content-transition-Y100 {
  transform: translateY(-100%);
}

/**
 * @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-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:  0.22rem 0.32rem ;
}
.arco-pagination-prev-field,
.arco-pagination-next-field {
  flex: 1;
  display: flex;
  color:  #1d2129 ;
}
.arco-pagination-prev-field {
  justify-content: flex-start;
}
.arco-pagination-prev-field.flex-center {
  justify-content: flex-end;
  margin-right:  0.48rem ;
}
[dir="rtl"] .arco-pagination-prev-field.flex-center {
  margin-right: initial;
  margin-left:  0.48rem ;
}
.arco-pagination-next-field {
  justify-content: flex-end;
}
.arco-pagination-next-field.flex-center {
  justify-content: flex-start;
  margin-left:  0.48rem ;
}
[dir="rtl"] .arco-pagination-next-field.flex-center {
  margin-left: initial;
  margin-right:  0.48rem ;
}
.arco-pagination-field {
  cursor: pointer;
  text-align: center;
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size:  0.3rem ;
  line-height:  0.44rem ;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently*/
}
.arco-pagination-field .btn-icon {
  display: inline-flex;
  align-items: center;
}
[dir="rtl"] .arco-pagination-field .btn-icon {
  transform: scaleX(-1);
}
.arco-pagination-field .btn-icon.next {
  transform: rotateY(180deg);
}
[dir="rtl"] .arco-pagination-field .btn-icon.next {
  transform: none;
}
.arco-pagination-field.button {
  padding:  0.12rem 0.32rem ;
  border-radius:  0.04rem ;
  min-height:  0.64rem ;
  background:  #F7F8FA ;
  color:  #1d2129 ;
}
.arco-pagination-field.button.primary {
  background:  #165DFF ;
  color:  #FFFFFF ;
}
.arco-pagination-field.button .btn-text {
  font-size:  0.28rem ;
}
.arco-pagination-field.button .btn-icon + .btn-text,
.arco-pagination-field.button .btn-text + .btn-icon {
  margin-left:  0.22rem ;
}
[dir="rtl"] .arco-pagination-field.button .btn-icon + .btn-text,
[dir="rtl"] .arco-pagination-field.button .btn-text + .btn-icon {
  margin-left: initial;
  margin-right:  0.22rem ;
}
.arco-pagination.android .arco-pagination-field.button .btn-text {
  padding-top: 0.04rem;
}
.arco-pagination-field.text {
  color:  #1d2129 ;
}
.arco-pagination-field.text.primary {
  color:  #165DFF ;
}
.arco-pagination-field.text.disabled {
  background: none;
}
.arco-pagination-field.disabled {
  background:  #F7F8FA ;
  color:  #c9cdd4 ;
}
.arco-pagination-item {
  flex: 0 0 auto;
  text-align: center;
  font-size:  0.36rem ;
  line-height:  0.44rem ;
  color:  #1d2129 ;
}
.arco-pagination-item .active {
  color:  #165DFF ;
}
.arco-pagination-simple {
  justify-content: center;
}

/**
 * @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-popover-menu-content {
  border-radius:  4PX ;
  overflow: hidden;
}
.arco-popover-menu-content.horizontal-menu .arco-popover-menu-item .arco-popover-menu-text {
  border: none;
  box-shadow: none;
}
.arco-popover-menu-item {
  padding:  0 0.24rem ;
  height: 0.88rem;
  display: flex;
  align-items: center;
}
.arco-popover-menu-item.active {
  background-color:  #242425 ;
}
.white-theme .arco-popover-menu-item.active {
  background-color:  #F7F8FA ;
}
.arco-popover-menu-item:not(:last-child) .arco-popover-menu-text {
  box-shadow: 0 -1PX 0 0 rgba(247, 248, 250, 0.1) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-popover-menu-item:not(:last-child) .arco-popover-menu-text {
    box-shadow: 0 -0.5PX 0 0 rgba(247, 248, 250, 0.1) inset;
  }
}
.ios .arco-popover-menu-item:not(:last-child) .arco-popover-menu-text,
.arco-popover-menu-item:not(:last-child) .arco-popover-menu-text.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid rgba(247, 248, 250, 0.1);
}
.white-theme .arco-popover-menu-item:not(:last-child) .arco-popover-menu-text {
  box-shadow: 0 -1PX 0 0 #e5e6eb inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .white-theme .arco-popover-menu-item:not(:last-child) .arco-popover-menu-text {
    box-shadow: 0 -0.5PX 0 0 #e5e6eb inset;
  }
}
.ios .white-theme .arco-popover-menu-item:not(:last-child) .arco-popover-menu-text,
.white-theme .arco-popover-menu-item:not(:last-child) .arco-popover-menu-text.ios {
  box-shadow: none;
  border-bottom: 0.5PX solid #e5e6eb;
}
.arco-popover-menu-icon {
  margin-right: 0.16rem;
  font-size: 0.4rem;
  line-height: 1;
}
[dir="rtl"] .arco-popover-menu-icon {
  margin-right: initial;
  margin-left: 0.16rem;
}
.arco-popover-menu-icon > * {
  float: left;
}
.arco-popover-menu-icon::after {
  content: " ";
  clear: both;
}
.white-theme .arco-popover-menu-icon {
  color:  #4e5969 ;
}
.arco-popover-menu-text {
  height: 100%;
  font-size: 0.28rem;
  line-height: 0.4rem;
  padding: 0.24rem 0;
  color:  #FFFFFF ;
}
.white-theme .arco-popover-menu-text {
  color:  #1d2129 ;
}
.disabled .arco-popover-menu-text {
  color:  rgba(255, 255, 255, 0.3) ;
}
.white-theme .disabled .arco-popover-menu-text {
  color:  #c9cdd4 ;
}
.arco-popover-menu-content.horizontal-menu {
  display: flex;
  flex-wrap: wrap;
  max-width:  5.76rem ;
}
.arco-popover-menu-content.horizontal-menu .arco-popover-menu-item {
  flex: 0 0 auto;
  width:  1.44rem ;
  height:  1.44rem ;
  display: flex;
  flex-direction: column;
}
.horizontal-menu .arco-popover-menu-item {
  padding:  0.24rem 0 ;
  align-items: center;
}
.horizontal-menu .arco-popover-menu-text {
  padding: 0;
}
.horizontal-menu .arco-popover-menu-icon {
  margin:  0 0 0.16rem 0 ;
}
.arco-popover {
  position: relative;
  display: inline-flex;
}
.arco-popover .popover-child-inner {
  font-size: 0;
  line-height: 1;
}
.arco-popover-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:  rgba(0, 0, 0, 0.6) ;
  z-index: 1000;
}
.arco-popover-inner {
  box-sizing: border-box;
  position: absolute;
  width: -moz-max-content;
  width: max-content;
  z-index: 1010;
  background-color: transparent;
  visibility: hidden;
  will-change: transform;
  transition:  opacity 0.3s ease-in-out ;
  color:  #FFFFFF ;
}
.arco-popover-inner.with-shadow .popover-bg {
  box-shadow:  0 2PX 8PX 0 rgba(0, 0, 0, 0.1) ;
}
.arco-popover-inner.with-shadow .popover-arrow.topRight,
.arco-popover-inner.with-shadow .popover-arrow.topCenter,
.arco-popover-inner.with-shadow .popover-arrow.topLeft {
  box-shadow:  6PX 6PX 8PX 0 rgba(0, 0, 0, 0.04) ;
}
.arco-popover-inner.with-shadow .popover-arrow.bottomRight,
.arco-popover-inner.with-shadow .popover-arrow.bottomCenter,
.arco-popover-inner.with-shadow .popover-arrow.bottomLeft {
  box-shadow:  -6PX -6PX 8PX 0 rgba(0, 0, 0, 0.04) ;
}
.arco-popover-inner.show {
  visibility: visible;
}
.arco-popover-inner .popover-content {
  position: relative;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius:  4PX ;
}
.arco-popover-inner .popover-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius:  4PX ;
  background-color:  #000000 ;
  opacity:  0.8 ;
}
.arco-popover-inner .content-text {
  white-space: normal;
  word-break: break-all;
  text-align: left;
  font-size:  0.28rem ;
  line-height:  0.4rem ;
  padding:  0.16rem 0.24rem ;
}
.arco-popover-inner.with-suffix .popover-content {
  display: flex;
  align-items: center;
}
.arco-popover-inner .icon-divider {
  width: 1PX;
  height:  0.24rem ;
  box-shadow: 1PX 0 0 0 rgba(255, 255, 255, 0.3) inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-popover-inner .icon-divider {
    box-shadow: 0.5PX 0 0 0 rgba(255, 255, 255, 0.3) inset;
  }
}
.ios .arco-popover-inner .icon-divider,
.arco-popover-inner .icon-divider.ios {
  box-shadow: none;
  border-left: 0.5PX solid rgba(255, 255, 255, 0.3);
}
.arco-popover-inner .text-close-icon {
  display: inline-flex;
  font-size:  0.32rem ;
  padding:  0 0.2rem 0 0.22rem ;
}
.arco-popover-inner .text-suffix {
  padding-right:  0.24rem ;
  flex: 0 0 auto;
}
[dir="rtl"] .arco-popover-inner .text-suffix {
  padding-right: initial;
  padding-left:  0.24rem ;
}
.arco-popover-inner .popover-arrow {
  position: absolute;
  transform: rotate(45deg);
  width:  9PX ;
  height:  9PX ;
  background-color:  #000000 ;
}
.arco-popover-inner .popover-arrow.topRight,
.arco-popover-inner .popover-arrow.topCenter,
.arco-popover-inner .popover-arrow.topLeft,
.arco-popover-inner .popover-arrow.topRight .popover-arrow-content,
.arco-popover-inner .popover-arrow.topCenter .popover-arrow-content,
.arco-popover-inner .popover-arrow.topLeft .popover-arrow-content {
  border-bottom-right-radius:  1PX ;
}
.arco-popover-inner .popover-arrow.bottomRight,
.arco-popover-inner .popover-arrow.bottomCenter,
.arco-popover-inner .popover-arrow.bottomLeft,
.arco-popover-inner .popover-arrow.bottomRight .popover-arrow-content,
.arco-popover-inner .popover-arrow.bottomCenter .popover-arrow-content,
.arco-popover-inner .popover-arrow.bottomLeft .popover-arrow-content {
  border-top-left-radius:  1PX ;
}
.arco-popover-inner .popover-arrow.topRight,
.arco-popover-inner .popover-arrow.topCenter,
.arco-popover-inner .popover-arrow.topLeft {
  transform: translateY(50%) rotate(45deg);
}
.arco-popover-inner .popover-arrow.topRight {
  bottom: 0;
  right: 0;
}
.arco-popover-inner .popover-arrow.topCenter,
.arco-popover-inner .popover-arrow.topLeft {
  bottom: 0;
  left: 0;
}
.arco-popover-inner .popover-arrow.bottomRight,
.arco-popover-inner .popover-arrow.bottomCenter,
.arco-popover-inner .popover-arrow.bottomLeft {
  transform: translateY(-50%) rotate(45deg);
}
.arco-popover-inner .popover-arrow.bottomRight {
  top: 0;
  right: 0;
}
.arco-popover-inner .popover-arrow.bottomCenter,
.arco-popover-inner .popover-arrow.bottomLeft {
  top: 0;
  left: 0;
}
.arco-popover-inner.white-theme {
  color:  #1d2129 ;
}
.arco-popover-inner.white-theme .popover-bg {
  background-color:  #FFFFFF ;
  opacity:  1 ;
}
.arco-popover-inner.white-theme .popover-arrow {
  background-color:  #FFFFFF ;
}
.arco-popover-inner.white-theme .popover-arrow-content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: inherit;
}
.arco-popover-inner.white-theme.bordered .popover-bg {
  box-shadow: 0 0 0 1PX #e5e6eb inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-popover-inner.white-theme.bordered .popover-bg {
    box-shadow: 0 0 0 0.5PX #e5e6eb inset;
  }
}
.ios .arco-popover-inner.white-theme.bordered .popover-bg,
.arco-popover-inner.white-theme.bordered .popover-bg.ios {
  box-shadow: none;
  border: 0.5PX solid #e5e6eb;
}
.arco-popover-inner.white-theme.bordered .popover-arrow-content {
  border-color:  #e5e6eb ;
}
.arco-popover-inner.white-theme.bordered .popover-arrow.topRight .popover-arrow-content,
.arco-popover-inner.white-theme.bordered .popover-arrow.topCenter .popover-arrow-content,
.arco-popover-inner.white-theme.bordered .popover-arrow.topLeft .popover-arrow-content {
  box-shadow: -1PX -1PX 0 0 #e5e6eb inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-popover-inner.white-theme.bordered .popover-arrow.topRight .popover-arrow-content,
  .arco-popover-inner.white-theme.bordered .popover-arrow.topCenter .popover-arrow-content,
  .arco-popover-inner.white-theme.bordered .popover-arrow.topLeft .popover-arrow-content {
    box-shadow: -0.5PX -0.5PX 0 0 #e5e6eb inset;
  }
}
.ios .arco-popover-inner.white-theme.bordered .popover-arrow.topRight .popover-arrow-content,
.ios .arco-popover-inner.white-theme.bordered .popover-arrow.topCenter .popover-arrow-content,
.ios .arco-popover-inner.white-theme.bordered .popover-arrow.topLeft .popover-arrow-content,
.arco-popover-inner.white-theme.bordered .popover-arrow.topRight .popover-arrow-content.ios,
.arco-popover-inner.white-theme.bordered .popover-arrow.topCenter .popover-arrow-content.ios,
.arco-popover-inner.white-theme.bordered .popover-arrow.topLeft .popover-arrow-content.ios {
  box-shadow: none;
  border-right: 0.5PX solid #e5e6eb;
  border-bottom: 0.5PX solid #e5e6eb;
}
.arco-popover-inner.white-theme.bordered .popover-arrow.bottomRight .popover-arrow-content,
.arco-popover-inner.white-theme.bordered .popover-arrow.bottomCenter .popover-arrow-content,
.arco-popover-inner.white-theme.bordered .popover-arrow.bottomLeft .popover-arrow-content {
  box-shadow: 1PX 1PX 0 0 #e5e6eb inset;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .arco-popover-inner.white-theme.bordered .popover-arrow.bottomRight .popover-arrow-content,
  .arco-popover-inner.white-theme.bordered .popover-arrow.bottomCenter .popover-arrow-content,
  .arco-popover-inner.white-theme.bordered .popover-arrow.bottomLeft .popover-arrow-content {
    box-shadow: 0.5PX 0.5PX 0 0 #e5e6eb inset;
  }
}
.ios .arco-popover-inner.white-theme.bordered .popover-arrow.bottomRight .popover-arrow-content,
.ios .arco-popover-inner.white-theme.bordered .popover-arrow.bottomCenter .popover-arrow-content,
.ios .arco-popover-inner.white-theme.bordered .popover-arrow.bottomLeft .popover-arrow-content,
.arco-popover-inner.white-theme.bordered .popover-arrow.bottomRight .popover-arrow-content.ios,
.arco-popover-inner.white-theme.bordered .popover-arrow.bottomCenter .popover-arrow-content.ios,
.arco-popover-inner.white-theme.bordered .popover-arrow.bottomLeft .popover-arrow-content.ios {
  box-shadow: none;
  border-top: 0.5PX solid #e5e6eb;
  border-left: 0.5PX solid #e5e6eb;
}
.global-mode.arco-popover-inner {
  position: fixed;
}

/**
 * @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-popup-swiper.has-trans .arco-popup-mask,
.arco-popup-swiper.has-trans .arco-popup-content {
  transition:  all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ;
}

/**
 * @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-progress.progress-fixed {
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 1001;
}
[dir="rtl"] .arco-progress.progress-fixed {
  left: initial;
  right: 0;
}
.arco-progress .progress-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.arco-progress .progress-wrapper .progress-track {
  width: 100%;
  display: flex;
  align-items: center;
  background-color:  #f2f3f5 ;
  height:  4PX ;
}
.arco-progress .progress-wrapper .progress-track.position-innerLeft {
  height:  18PX ;
}
.arco-progress .progress-wrapper .progress-track.nav-mode {
  background-color:  transparent ;
  height:  2PX ;
}
.arco-progress .progress-wrapper .progress-bar {
  height: 100%;
  position: relative;
  background-color:  #165DFF ;
}
.arco-progress .progress-wrapper .progress-bar .wrapper {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
[dir="rtl"] .arco-progress .progress-wrapper .progress-bar .wrapper {
  right: initial;
  left: 0;
}
.arco-progress .progress-wrapper .filleted {
  border-radius: 100PX;
}
.arco-progress .progress-wrapper .text {
  font-size:  0.28rem ;
  margin-left:  0.16rem ;
  color:  #165DFF ;
}
[dir="rtl"] .arco-progress .progress-wrapper .text {
  margin-left: initial;
  margin-right:  0.16rem ;
}
.arco-progress .progress-wrapper .text-left {
  margin-left: 0;
  margin-right:  0.16rem ;
}
[dir="rtl"] .arco-progress .progress-wrapper .text-left {
  margin-left: initial;
  margin-right: 0;
}
[dir="rtl"] .arco-progress .progress-wrapper .text-left {
  margin-right: initial;
  margin-left:  0.16rem ;
}
.arco-progress .progress-wrapper .text-innerLeft {
  position: absolute;
  z-index: 1;
  color:  #FFFFFF ;
}
.arco-progress .progress-wrapper .text-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  color:  #FFFFFF ;
}
.arco-progress .progress-wrapper .text-follow {
  display: flex;
  justify-content: center;
  align-items: center;
  width:  0.72rem ;
  height:  0.4rem ;
  border-radius:  0.4rem ;
  font-size:  0.26rem ;
  color:  #FFFFFF ;
  background-color:  #165DFF ;
}
.arco-progress .progress-wrapper .track-color {
  background-color:  #f2f3f5 ;
}
.arco-progress .progress-wrapper .color {
  stroke:  #165DFF ;
  color:  #165DFF ;
}
.arco-progress .progress-wrapper .bar-disabled {
  background-color:  #c9cdd4 ;
}
.arco-progress .progress-wrapper .text-disabled {
  color:  #86909c ;
}
.arco-progress .progress-wrapper .inner-disabled {
  color:  #FFFFFF ;
}
.arco-progress .progress-wrapper .inner-disabled.inner-block-disabled {
  background-color:  #c9cdd4 ;
}

/**
 * @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-pull-refresh {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.arco-pull-refresh::-webkit-scrollbar {
  display: none;
}
.arco-pull-refresh.is-disabled,
.arco-pull-refresh-content,
.arco-pull-refresh-content-wrapper {
  background:  #FFFFFF ;
}
.arco-pull-refresh-content {
  min-height: 100%;
}
.arco-pull-refresh.is-ios .arco-pull-refresh-content-wrapper {
  list-style-type: none;
  padding: 0;
  padding-bottom: 1PX;
  margin: 0;
  min-height: 100%;
  box-sizing: content-box;
  transform: translateZ(0);
}
.arco-pull-refresh-label {
  position: absolute;
  display: flex;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  justify-content: center;
  align-items: center;
  z-index: -1;
  font-size:  0.24rem ;
  background:  #F7F8FA ;
}
.arco-pull-refresh-label-wrapper {
  position: absolute;
  left: 0;
  width: 100%;
  overflow-y: auto;
}
.arco-pull-refresh-place {
  position: relative;
  height: 100%;
}
.arco-pull-refresh-label-text {
  display: flex;
  font-size: 0.28rem;
  line-height: 0.88rem;
  color:  #86909c ;
  align-items: center;
}
.arco-pull-refresh-label-text .bg-color-with-config {
  background: #86909c;
}
.arco-pull-refresh-label-text .stop-color-with-config {
  stop-color: #86909c;
}
.arco-pull-refresh-label-text .fill-color-with-config {
  fill: #86909c;
}
.arco-pull-refresh-label-text .stroke-color-with-config {
  stroke: #86909c;
}
.arco-pull-refresh-label-text .arco-loading + span {
  margin-left: 0.2rem;
}
[dir="rtl"] .arco-pull-refresh-label-text .arco-loading + span {
  margin-left: initial;
  margin-right: 0.2rem;
}
.arco-pull-refresh.is-android .arco-pull-refresh-label {
  top: 0;
  transform: translateY(-100%);
}
.arco-pull-refresh.is-ios .arco-pull-refresh-label {
  position: absolute;
  bottom: 0;
  overflow-y: auto;
  font-size: 0.28rem;
}
.arco-pull-refresh.is-ios .arco-pull-refresh-label-wrapper {
  will-change: height;
  z-index: -1;
}

/**
 * @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-radio {
  display: inline-flex;
  align-items: center;
}
.arco-radio .radio-icon {
  display: inline-flex;
  align-items: center;
  font-size:  20PX ;
  color:  #e5e6eb ;
}
.arco-radio .radio-icon.checked {
  color:  #165DFF ;
}
.arco-radio .radio-icon.disabled {
  color:  #F7F8FA ;
}
.arco-radio .radio-icon.checked.disabled {
  color:  #E8F3FF ;
}
.arco-radio .radio-icon .arco-icon-circle-disabled path {
  stroke:  #e5e6eb ;
}
.arco-radio .radio-text {
  font-size:  0.32rem ;
  color:  #1d2129 ;
}
.arco-radio .radio-icon + .radio-text {
  margin-left:  0.16rem ;
}
[dir="rtl"] .arco-radio .radio-icon + .radio-text {
  margin-left: initial;
  margin-right:  0.16rem ;
}
.arco-radio.disabled .radio-text {
  opacity:  0.5 ;
}
.arco-radio.block {
  width: 100%;
}
.arco-radio.justify {
  width: 100%;
  justify-content: space-between;
}
.arco-radio-group .arco-radio:not(:last-child, .block) {
  margin-right:  0.48rem ;
}
[dir="rtl"] .arco-radio-group .arco-radio:not(:last-child, .block) {
  margin-right: initial;
  margin-left:  0.48rem ;
}

/**
 * @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-rate {
  display: inline-flex;
}
.arco-rate.disabled {
  cursor: not-allowed;
}
.arco-rate-icon-wrap {
  padding:  6PX ;
  font-size:  24PX ;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.arco-rate-icon-wrap.active,
.arco-rate-icon.active,
.arco-rate-icon-wrap.half-active,
.arco-rate-icon.half-active {
  color:  #FFB400 ;
}
.arco-rate-icon-wrap.active.disabled,
.arco-rate-icon.active.disabled,
.arco-rate-icon-wrap.half-active.disabled,
.arco-rate-icon.half-active.disabled {
  color:  #c9cdd4 ;
}
.arco-rate-icon-wrap.normal,
.arco-rate-icon.normal {
  color:  #e5e6eb ;
}
.arco-rate-icon.half-active {
  position: absolute;
  z-index: 1;
}
[dir="rtl"] .arco-rate-icon.half-active {
  transform: scaleX(-1);
}
.arco-rate-icon-click-half {
  width: 50%;
  height: 100%;
  display: inline-block;
  position: absolute;
  z-index: 2;
}
.arco-rate-icon-click-half.left {
  left: 0;
}
.arco-rate-icon-click-half.right {
  right: 0;
}

/**
 * @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-search-bar-container {
  display: flex;
  align-items: center;
  position: relative;
  padding:  0.32rem ;
  background-color:  #FFFFFF ;
}
.arco-search-bar-square .arco-search-bar-wrap {
  border-radius:  0.04rem ;
}
.arco-search-bar-round .arco-search-bar-wrap {
  border-radius:  199.98rem ;
}
.arco-search-bar-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  height:  0.72rem ;
  font-size:  0.28rem ;
  padding:  0.16rem 0.28rem ;
  background-color:  #f2f3f5 ;
}
.arco-search-bar-input {
  flex: 1;
  background-color: transparent;
  color:  #1d2129 ;
  height:  0.4rem ;
  caret-color:  #165DFF ;
}
.arco-search-bar-input-left {
  text-align: left;
}
[dir="rtl"] .arco-search-bar-input-left {
  text-align: right;
}
.arco-search-bar-input-right {
  text-align: right;
}
[dir="rtl"] .arco-search-bar-input-right {
  text-align: left;
}
.arco-search-bar-input-center {
  text-align: center;
}
.arco-search-bar-input::-moz-placeholder {
  color:  #c9cdd4 ;
}
.arco-search-bar-input::placeholder {
  color:  #c9cdd4 ;
}
.arco-search-bar-input::-webkit-search-decoration,
.arco-search-bar-input::-webkit-search-cancel-button {
  display: none;
}
.arco-search-bar-prefix,
.arco-search-bar-suffix,
.arco-search-bar-clear {
  align-items: center;
  justify-content: center;
  display: flex;
}
.arco-search-bar-prefix {
  margin-right:  0.18rem ;
}
[dir="rtl"] .arco-search-bar-prefix {
  margin-right: initial;
  margin-left:  0.18rem ;
}
.arco-search-bar-clear {
  color:  #c9cdd4 ;
  font-size:  16PX ;
  padding-left:  0.32rem ;
}
[dir="rtl"] .arco-search-bar-clear {
  padding-left: initial;
  padding-right:  0.32rem ;
}
.arco-search-bar-search-icon {
  color:  #86909c ;
  font-size:  0.32rem ;
}
.arco-search-bar-cancel-btn {
  margin-left:  0.32rem ;
  color:  #165DFF ;
  font-size:  0.3rem ;
}
[dir="rtl"] .arco-search-bar-cancel-btn {
  margin-left: initial;
  margin-right:  0.32rem ;
}
.arco-search-bar-association {
  position: absolute;
  left: 0;
  right: 0;
  background-color:  #FFFFFF ;
  top: 100%;
  display: none;
}
.arco-search-bar-association-visible {
  display: block;
}
.arco-search-bar-association-item {
  height:  1.04rem ;
  display: flex;
  align-items: center;
  position: relative;
  color:  #1d2129 ;
  padding:  0.32rem ;
  font-size:  0.3rem ;
}
.arco-search-bar-association-item:not(:last-child) {
  position: relative;
  border-width: 0;
}
.arco-search-bar-association-item:not(:last-child)::after {
  content: '';
  width: 100%;
  height: 1PX;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  border-bottom-style: solid;
  border-bottom-width: 1PX;
  border-bottom-color: #e5e6eb;
  box-sizing: border-box;
  transform-origin: left bottom;
  -webkit-transform-origin: left bottom;
  pointer-events: none;
  border-radius: 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-search-bar-association-item:not(:last-child)::after {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-search-bar-association-item:not(:last-child)::after {
    transform: scaleY(0.33333333);
    -webkit-transform: scaleY(0.33333333);
    border-radius: 0;
  }
}
.arco-search-bar-association-item-highlight {
  color:  #165DFF ;
}


/**
 * @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-skeleton {
  position: relative;
  color:  rgba(255, 255, 255, 0.6) ;
}
.arco-skeleton-title {
  height:  0.32rem ;
}
.arco-skeleton-paragraph-line {
  width: 100%;
  height:  0.32rem ;
}
.arco-skeleton-paragraph-line + .arco-skeleton-paragraph-line {
  margin-top:  0.24rem ;
}
.arco-skeleton-avatar.arco-skeleton-item {
  width:  0.64rem ;
  height:  0.64rem ;
  border-radius: 100%;
  transform: translateZ(0);
}
.arco-skeleton-content {
  width: 100%;
}
.arco-skeleton-content .arco-skeleton-title + .arco-skeleton-paragraph {
  margin-top:  0.4rem ;
}
.arco-skeleton-with-avatar {
  display: flex;
  align-items: flex-start;
}
.arco-skeleton-with-avatar .arco-skeleton-avatar {
  flex: none;
}
.arco-skeleton-with-avatar .arco-skeleton-content .arco-skeleton-title {
  margin-top:  0.16rem ;
}
.arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
  margin-left:  0.16rem ;
}
[dir="rtl"] .arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
  margin-left: initial;
  margin-right:  0.16rem ;
}
.arco-skeleton-grid {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.arco-skeleton-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.arco-skeleton-grid-icon {
  width:  0.64rem ;
  height:  0.64rem ;
}
.arco-skeleton-grid-text {
  margin-top:  0.16rem ;
  width:  1.28rem ;
  height:  0.32rem ;
}
.arco-skeleton-node {
  display: inline-block;
}
.arco-skeleton-item {
  position: relative;
  overflow: hidden;
  border-radius:  0 ;
  background-color:  #f2f3f5 ;
}
.arco-skeleton-animation-item {
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, currentColor 50%, rgba(255, 255, 255, 0) 65%);
  transform-origin: top left;
  animation-name: skeleton-gradient;
  animation-iteration-count: infinite;
  animation-timing-function:  cubic-bezier(0.42, 0, 0.58, 1) ;
  animation-duration:  1.5s ;
}
[dir="rtl"] .arco-skeleton-animation-item {
  animation-name: skeleton-gradient-reverse;
}
.arco-skeleton-animation-breath {
  animation: skeleton-breath linear infinite;
  animation-duration:  1.5s ;
}
@keyframes skeleton-gradient {
  0% {
    transform: translateX(-65%) skewX(-45deg);
  }
  100% {
    transform: translateX(135%) skewX(-45deg);
  }
}
@keyframes skeleton-gradient-reverse {
  0% {
    transform: translateX(65%) skewX(45deg);
  }
  100% {
    transform: translateX(-135%) skewX(45deg);
  }
}
@keyframes skeleton-breath {
  0% {
    opacity: 1;
  }
  50% {
    opacity:  0.4 ;
  }
  100% {
    opacity: 1;
  }
}

/**
 * @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-slider {
  position: relative;
  display: flex;
  padding:  0.22rem 0.32rem ;
}
.arco-slider.is-vertical {
  flex-direction: column;
}
.arco-slider.is-horizontal.show-marks {
  padding-bottom:  0.7rem ;
}
.arco-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}
.is-vertical .arco-slider-wrapper {
  flex-direction: column;
}
.arco-slider-label {
  display: flex;
  align-items: center;
  font-size:  0.32rem ;
  color:  #86909c ;
}
.is-horizontal .arco-slider-label {
  margin-right:  0.24rem ;
}
[dir="rtl"] .is-horizontal .arco-slider-label {
  margin-right: initial;
  margin-left:  0.24rem ;
}
.is-vertical .arco-slider-label {
  flex-direction: column;
  margin-bottom:  0.24rem ;
}
.is-horizontal .arco-slider-wrapper + .arco-slider-label {
  margin-right: 0;
  margin-left:  0.24rem ;
}
[dir="rtl"] .is-horizontal .arco-slider-wrapper + .arco-slider-label {
  margin-left: initial;
  margin-right:  0.24rem ;
}
.is-vertical .arco-slider-wrapper + .arco-slider-label {
  margin-bottom: 0;
  margin-top:  0.24rem ;
}
.arco-slider-line {
  position: relative;
  display: flex;
  flex: 1;
  border-radius:  0.08rem ;
  background:  #e5e6eb ;
}
.arco-slider-line:not(.is-activated)::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
}
.is-horizontal .arco-slider-line:not(.is-activated)::before {
  top: -50%;
  transform: translateY(-50%);
  padding:  0.3rem 0;
}
.is-vertical .arco-slider-line:not(.is-activated)::before {
  left: -50%;
  transform: translateX(-50%);
  padding: 0 0.3rem ;
}
.arco-slider-line.is-activated {
  position: absolute;
  background:  #165DFF ;
}
.is-disabled .arco-slider-line.is-activated {
  background:  #94BFFF ;
}
.arco-slider-thumb {
  width:  0.48rem ;
  height:  0.48rem ;
  background:  #FFFFFF ;
  box-shadow:  0 2PX 8PX rgba(0, 0, 0, 0.1) ;
  border-radius:  50% ;
}
.arco-slider-thumb-wrapper {
  position: absolute;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: auto;
  align-items: center;
}
.is-vertical .arco-slider-thumb-wrapper {
  left: 1PX;
  right: 0;
}
.is-vertical .arco-slider-thumb-wrapper.is-end {
  top: 0;
  transform: translate(-50%, -50%);
}
.is-vertical .arco-slider-thumb-wrapper.is-start {
  bottom: 0;
  transform: translate(-50%, 50%);
}
.is-horizontal .arco-slider-thumb-wrapper {
  top: 0;
  bottom: 0;
}
.is-horizontal .arco-slider-thumb-wrapper.is-end {
  right: 0;
  transform: translateX(50%);
}
[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-end {
  right: initial;
  left: 0;
}
[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-end {
  transform: translateX(-50%);
}
.is-horizontal .arco-slider-thumb-wrapper.is-start {
  left: 0;
  transform: translateX(-50%);
}
[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-start {
  left: initial;
  right: 0;
}
[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-start {
  transform: translateX(50%);
}
.arco-slider-popover-wrapper .arco-slider-thumb {
  position: relative;
}
.arco-slider-popover {
  position: absolute;
  width: -moz-max-content;
  width: max-content;
  color:  #FFFFFF ;
  font-size:  0.24rem ;
  line-height:  0.34rem ;
}
.is-horizontal .arco-slider-popover {
  bottom: 100%;
  margin-bottom:  0.28rem ;
  left: 50%;
  transform: translateX(-50%);
}
.is-vertical .arco-slider-popover {
  left: 100%;
  margin-left:  0.28rem ;
  top: 50%;
  transform: translateY(-50%);
}
.arco-slider-popover.no-content {
  display: none;
}
.arco-slider-popover-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.arco-slider-popover-content {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius:  4PX ;
  padding:  0.16rem 0.24rem ;
  z-index: 2;
  background-color:  #000000 ;
}
.android .arco-slider-popover-content {
  padding:  0.2rem 0.24rem 0.12rem ;
}
.arco-slider-popover-content p {
  white-space: normal;
  word-break: break-all;
  text-align: left;
  font-size:  0.28rem ;
  line-height:  0.4rem ;
}
.arco-slider-popover-arrow {
  position: absolute;
  margin: auto;
  width: 0;
  height: 0;
  border-width:  6PX ;
  border-style: solid;
  border-color: transparent;
}
.is-horizontal .arco-slider-popover-arrow {
  transform: translateY(100%);
  bottom: 0;
  left: 0;
  right: 0;
  border-top-color:  #000000 ;
}
.is-vertical .arco-slider-popover-arrow {
  border-right-color:  #000000 ;
  transform: translateX(-100%);
  left: 0;
  top: 0;
  bottom: 0;
}
.arco-slider-marks {
  position: absolute;
  width: 100%;
  height: 100%;
  flex: 1;
}
.arco-slider-marks-item {
  position: absolute;
  margin: auto;
  width:  6PX ;
  height:  6PX ;
  border-radius:  50% ;
  background:  #e5e6eb ;
  transform: translateX(-50%);
}
[dir="rtl"] .arco-slider-marks-item {
  transform: translateX(50%);
}
.arco-slider-marks-item.is-activated {
  background:  #165DFF ;
}
.is-vertical .arco-slider-marks-item {
  left: 0;
  right: 0;
}
.is-horizontal .arco-slider-marks-item {
  top: 0;
  bottom: 0;
}
.arco-slider-marks-item-label {
  position: absolute;
  font-size:  0.28rem ;
  line-height:  0.4rem ;
  color:  #86909c ;
}
.is-horizontal .arco-slider-marks-item-label {
  left: 50%;
  top:  0.38rem ;
  transform: translateX(-50%);
}
.is-vertical .arco-slider-marks-item-label {
  top: 50%;
  right:  0.26rem ;
  transform: translateY(-50%);
}
.arco-slider .is-transferable {
  transition: all 0.3s;
}
.arco-slider .arco-fade-enter-active,
.arco-slider .arco-fade-enter-done {
  opacity:  0.8 ;
}

/**
 * @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-stepper {
  display: inline-flex;
  font-size:  0.28rem ;
}
.arco-stepper.arco-square {
  border-width: 1PX;
  border-style: solid;
  border-color:  #f2f3f5 ;
  border-radius:  0.04rem ;
}
.arco-stepper.arco-square .arco-stepper-add-button,
.arco-stepper.arco-square .arco-stepper-minus-button,
.arco-stepper.arco-square .arco-stepper-input {
  background:  transparent ;
}
.arco-stepper.arco-square .arco-stepper-input {
  border-left-width: 1PX;
  border-right-width: 1PX;
  border-style: solid;
  border-left-color:  #f2f3f5 ;
  border-right-color:  #f2f3f5 ;
}
.arco-stepper.arco-round .arco-stepper-minus-button,
.arco-stepper.arco-round .arco-stepper-add-button {
  border-radius:  50% ;
}
.arco-stepper.arco-round .arco-stepper-input {
  background:  transparent ;
}
.arco-stepper-minus-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:  0.2rem ;
  width:  0.56rem ;
  height:  0.56rem ;
  background:  #F7F8FA ;
}
.arco-stepper-minus-button-icon {
  color:  #1d2129 ;
}
.arco-stepper-minus-button-icon.disabled {
  color:  #c9cdd4 ;
}
.arco-stepper-input {
  text-align: center;
  width:  0.8rem ;
  height:  0.56rem ;
  background:  #F7F8FA ;
  color:  #1d2129 ;
  margin:  0 1PX ;
}
.arco-stepper-add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:  0.2rem ;
  width:  0.56rem ;
  height:  0.56rem ;
  background:  #F7F8FA ;
}
.arco-stepper-add-button-icon {
  color:  #1d2129 ;
}
.arco-stepper-add-button-icon.disabled {
  color:  #c9cdd4 ;
}

/**
 * @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-swipe-action {
  position: relative;
  transition: transform 0s;
  font-size:  0.32rem ;
}
.arco-swipe-action.action-open,
.arco-swipe-action-menu.action-open {
  transition-timing-function:  cubic-bezier(0.2, 0.8, 0.32, 1.28) ;
}
.arco-swipe-action.action-close,
.arco-swipe-action-menu.action-close {
  transition-timing-function:  cubic-bezier(0.34, 0.69, 0.1, 1) ;
}
.arco-swipe-action-content {
  width: 100%;
}
.arco-swipe-action-menu {
  display: flex;
  position: absolute;
  height: 100%;
  overflow: visible;
  flex-wrap: nowrap;
  top: 0;
  transition: width 0s;
}
.arco-swipe-action-menu-left {
  right: 100%;
}
.arco-swipe-action-menu-right {
  left: 100%;
}
.arco-swipe-action-menu-action-left::after {
  right: 100%;
  margin-right: -1PX;
}
.arco-swipe-action-menu-action-right::after {
  left: 100%;
  margin-left: -1PX;
}
.arco-swipe-action-menu-action-info {
  height: 100%;
  padding:  0.32rem ;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arco-swipe-action-menu-action-info-container {
  position: relative;
}
.arco-swipe-action-menu-action-info-container.open-style-layer {
  position: absolute;
  height: 100%;
}
.arco-swipe-action-menu-action-info-container::after {
  content: " ";
  position: absolute;
  top: 0;
  height: 100%;
  width:  0.6rem ;
  background: inherit;
}
.arco-swipe-action-menu-action-info-text {
  white-space: nowrap;
  font-size:  0.32rem ;
  line-height:  0.44rem ;
  color:  #FFFFFF ;
}
.arco-swipe-action-menu-action-info-icon {
  margin-right:  0.08rem ;
  height:  0.4rem ;
  width:  0.4rem ;
  color:  #FFFFFF ;
}

/**
 * @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-swipe-load {
  position: relative;
  display: inline-flex;
  width: 100%;
}
.arco-swipe-load .arco-list-area {
  position: relative;
  width: 100%;
}
.arco-swipe-load .arco-list-area::-webkit-scrollbar {
  display: none;
}
.arco-swipe-load .arco-loading-area {
  background-color:  #F7F8FA ;
  margin-top: 0;
  border-radius:  50% ;
}
.arco-swipe-load .arco-loading-area .arco-loading-label {
  margin-left:  0.4rem ;
  width:  0.4rem ;
  color:  #1d2129 ;
  font-size:  0.24rem ;
}
[dir="rtl"] .arco-swipe-load .arco-loading-area .arco-loading-label {
  margin-left: initial;
  margin-right:  0.4rem ;
}

/**
 * @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-switch {
  position: relative;
  display: inline-block;
  transition:  all 0.2s ;
}
@keyframes changDeg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.arco-switch.type-android {
  width:  40PX ;
  height:  24PX ;
  padding:  2PX ;
  padding-bottom: 0;
  background-color:  #e5e6eb ;
}
.arco-switch.type-android.fully {
  border-radius:  20PX ;
}
.arco-switch.type-android.semi {
  border-radius:  2PX ;
}
.arco-switch.type-android.checked {
  background-color:  #165DFF ;
}
.arco-switch.type-android.checked .arco-switch-text {
  right: auto;
  left:  5PX ;
}
[dir="rtl"] .arco-switch.type-android.checked .arco-switch-text {
  right: initial;
  left: auto;
}
[dir="rtl"] .arco-switch.type-android.checked .arco-switch-text {
  left: initial;
  right:  5PX ;
}
.arco-switch.type-android.checked .arco-switch-inner {
  transform:  translateX(16PX) ;
}
[dir="rtl"] .arco-switch.type-android.checked .arco-switch-inner {
  transform: rotate(180deg) translateX(16PX) ;
}
.arco-switch.type-android .arco-switch-inner {
  width:  20PX ;
  height:  20PX ;
  box-shadow:  0 2PX 4PX 0 rgba(0, 0, 0, 0.08) ;
}
[dir="rtl"] .arco-switch.type-android .arco-switch-inner {
  transform: rotate(180deg);
}
.arco-switch.type-android.disabled.checked {
  background-color:  #94BFFF ;
}
.arco-switch.type-android.disabled:not(.checked) {
  background-color:  #f2f3f5 ;
}
.arco-switch.type-android .arco-switch-text {
  font-size:  12PX ;
  right:  5PX ;
}
[dir="rtl"] .arco-switch.type-android .arco-switch-text {
  right: initial;
  left:  5PX ;
}
.arco-switch.type-ios {
  width:  1.02rem ;
  height:  0.62rem ;
  padding:  0.04rem ;
  padding-bottom: 0;
  background-color:  rgba(17, 17, 17, 0.15) ;
}
.arco-switch.type-ios.fully {
  border-radius:  0.32rem ;
}
.arco-switch.type-ios.semi {
  border-radius:  0.04rem ;
}
.arco-switch.type-ios.checked {
  background-color:  #34C759 ;
}
.arco-switch.type-ios.checked .arco-switch-text {
  right: auto;
  left:  0.12rem ;
}
[dir="rtl"] .arco-switch.type-ios.checked .arco-switch-text {
  right: initial;
  left: auto;
}
[dir="rtl"] .arco-switch.type-ios.checked .arco-switch-text {
  left: initial;
  right:  0.12rem ;
}
.arco-switch.type-ios.checked .arco-switch-inner {
  transform:  translateX(0.4rem) ;
  box-shadow:  0 3PX 2PX 0 rgba(0, 0, 0, 0.12) ;
}
[dir="rtl"] .arco-switch.type-ios.checked .arco-switch-inner {
  transform: rotate(180deg) translateX(0.4rem) ;
}
.arco-switch.type-ios.disabled.checked {
  opacity:  0.3 ;
}
.arco-switch.type-ios .arco-switch-text {
  font-size:  0.28rem ;
  right:  0.12rem ;
}
[dir="rtl"] .arco-switch.type-ios .arco-switch-text {
  right: initial;
  left:  0.12rem ;
}
.arco-switch.type-ios .arco-switch-inner {
  width:  0.54rem ;
  height:  0.54rem ;
  position: relative;
  border-width: 0;
}
.arco-switch.type-ios .arco-switch-inner::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-style: solid;
  border-width: 1PX;
  border-color: rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 50%;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-switch.type-ios .arco-switch-inner::after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    border-radius: 100%;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-switch.type-ios .arco-switch-inner::after {
    width: 300%;
    height: 300%;
    transform: scale(0.33333333);
    -webkit-transform: scale(0.33333333);
    border-radius: 150%;
  }
}
[dir="rtl"] .arco-switch.type-ios .arco-switch-inner {
  transform: rotate(180deg);
}
.arco-switch.type-ios.disabled.checked {
  background-color:  #4DD865 ;
}
.arco-switch.type-ios.disabled:not(.checked) {
  background-color:  rgba(120, 120, 128, 0.16) ;
}
.arco-switch-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color:  #4e5969 ;
}
.arco-switch.checked .arco-switch-text {
  color:  #FFFFFF ;
}
.arco-switch-inner {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:  #FFFFFF ;
  transition:  all 0.2s ;
}
[dir="rtl"] .arco-switch-inner {
  left: initial;
  right: 0;
}
.fully .arco-switch-inner {
  border-radius:  50% ;
}
.semi .arco-switch-inner {
  border-radius:  1PX ;
}

/**
 * @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-tab-bar {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  font-size:  0.2rem ;
  min-height:  1rem ;
}
.arco-tab-bar-fixed {
  position: fixed;
  bottom: 0;
}
.arco-tab-bar-item {
  display: flex;
  flex: 1 1;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color:  #86909c ;
}
.arco-tab-bar-item-title {
  color: inherit;
  line-height:  0.28rem ;
  font-size:  0.2rem ;
  margin:  0 0 0.1rem 0 ;
}
.arco-tab-bar-item-children {
  display: flex;
  justify-content: center;
  align-items: center;
}
.arco-tab-bar-item-only-title {
  line-height:  0.44rem ;
  font-size:  0.32rem ;
  margin: 0;
}
.arco-tab-bar-item-active {
  color:  #165DFF ;
}
.arco-tab-bar-item .arco-extra-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:  0.4rem ;
  color: inherit;
}
.arco-tab-bar-item .arco-tab-bar-item-icon {
  display: flex;
  font-size:  0.4rem ;
  color: inherit;
  margin:  0.14rem 0 0.08rem ;
}

/**
 * @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-tag {
  display: inline-flex;
  justify-items: center;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  box-sizing: border-box;
  border: none;
  border-radius:  2PX ;
  font-size:  0.24rem ;
  border-width: 1PX;
  border-style: solid;
}
.arco-tag.size-small {
  height:  0.36rem ;
  padding: 0 0.08rem ;
}
.arco-tag.size-small .tag-text {
  transform: scale(0.8333);
  margin-left: -0.04rem;
  margin-right: -0.04rem;
}
.arco-tag.size-medium {
  height:  0.4rem ;
  padding: 0 0.08rem ;
}
.arco-tag.size-large {
  height:  0.48rem ;
  padding: 0 0.12rem ;
}
.arco-tag.filleted {
  padding: 0 0.16rem ;
  border-radius: 100px;
}
.arco-tag.half-border:not(.arco-tag-solid):not(.filleted) {
  position: relative;
  border-width: 0;
}
.arco-tag.half-border:not(.arco-tag-solid):not(.filleted)::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-style: inherit;
  border-width: 1PX;
  border-color: inherit;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 2PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-tag.half-border:not(.arco-tag-solid):not(.filleted)::after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    border-radius: 4PX;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-tag.half-border:not(.arco-tag-solid):not(.filleted)::after {
    width: 300%;
    height: 300%;
    transform: scale(0.33333333);
    -webkit-transform: scale(0.33333333);
    border-radius: 6PX;
  }
}
.arco-tag.half-border:not(.arco-tag-solid):not(.filleted)::after {
  border: inherit;
  border-width: 1PX;
}
.arco-tag.half-border:not(.arco-tag-solid).filleted {
  position: relative;
  border-width: 0;
}
.arco-tag.half-border:not(.arco-tag-solid).filleted::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-style: inherit;
  border-width: 1PX;
  border-color: inherit;
  box-sizing: border-box;
  transform-origin: left top;
  -webkit-transform-origin: left top;
  pointer-events: none;
  border-radius: 100px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .arco-tag.half-border:not(.arco-tag-solid).filleted::after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    border-radius: 200px;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .arco-tag.half-border:not(.arco-tag-solid).filleted::after {
    width: 300%;
    height: 300%;
    transform: scale(0.33333333);
    -webkit-transform: scale(0.33333333);
    border-radius: 300px;
  }
}
.arco-tag.half-border:not(.arco-tag-solid).filleted::after {
  border: inherit;
  border-width: 1PX;
}
.arco-tag .tag-text {
  vertical-align: middle;
  font-size: inherit;
}
.arco-tag .arco-icon:not(.tag-close-icon) {
  vertical-align: middle;
  margin-right:  0.04rem ;
  font-size:  0.24rem ;
}
[dir="rtl"] .arco-tag .arco-icon:not(.tag-close-icon) {
  margin-right: initial;
  margin-left:  0.04rem ;
}
.arco-tag .tag-close-wrap {
  font-size: 0;
}
.arco-tag .tag-close-icon {
  vertical-align: middle;
  margin-left:  0.08rem ;
  font-size:  0.24rem ;
}
[dir="rtl"] .arco-tag .tag-close-icon {
  margin-left: initial;
  margin-right:  0.08rem ;
}
.arco-tag.android .tag-text {
  padding-top: 0.02rem;
}
.arco-tag.arco-tag-primary {
  color:  #165DFF ;
  background:  #E8F3FF ;
  border-color:  #165DFF ;
}
.arco-tag.arco-tag-hollow {
  color:  #165DFF ;
  background: transparent;
  border-color:  #165DFF ;
}
.arco-tag.arco-tag-solid {
  color:  #FFFFFF ;
  background:  #165DFF ;
  border-width: 0;
}
.arco-tag-list {
  margin-bottom: 0;
}
.arco-tag-list .arco-tag {
  vertical-align: top;
  margin-bottom:  0 ;
}
.arco-tag-list .arco-tag:not(:last-child) {
  margin-right:  0.16rem ;
}
[dir="rtl"] .arco-tag-list .arco-tag:not(:last-child) {
  margin-right: initial;
  margin-left:  0.16rem ;
}
.arco-tag-list .tag-list-add-wrap {
  font-size: 0;
  display: inline-block;
}
.arco-tag-list .tag-list-add {
  margin-bottom:  0 ;
  border-color:  #e5e6eb ;
  background:  #f2f3f5 ;
  color:  #4e5969 ;
}

/**
 * @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-textarea {
  display: inline-block;
  width: 100%;
  height: 100%;
  resize: none;
  font-size:  0.32rem ;
  line-height:  0.44rem ;
  caret-color:  #165DFF ;
}
.arco-textarea::-moz-placeholder {
  color:  #c9cdd4 ;
}
.arco-textarea::placeholder {
  color:  #c9cdd4 ;
}
.arco-textarea.fake-textarea {
  position: fixed;
  bottom: 100%;
  left: 0;
  visibility: hidden;
}
.arco-input-container .statistic-text {
  position: absolute;
  bottom: 0.32rem;
  right: 0.32rem;
  font-size:  0.28rem ;
  color:  #86909c ;
}
.arco-input-container .statistic-text.exceed {
  color:  #F53F3F ;
}

/**
 * @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-toast-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
  display: flex;
  justify-content: center;
  padding:  0 0.32rem ;
}
.arco-toast-wrapper.no-event {
  pointer-events: none;
}
.arco-toast-wrapper.from-center {
  align-items: center;
}
.arco-toast-wrapper.from-top {
  align-items: flex-start;
  padding-top:  30% ;
}
.arco-toast-wrapper.from-bottom {
  align-items: flex-end;
  padding-bottom:  30% ;
}
.arco-toast-inner {
  background:  rgba(0, 0, 0, 0.8) ;
  color:  #FFFFFF ;
  font-size:  0.32rem ;
  line-height:  0.48rem ;
  border-radius:  0.08rem ;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: initial;
}
.arco-toast-inner.horizontal {
  flex-direction: row;
  padding:  0.16rem 0.32rem ;
}
.arco-toast-inner.horizontal .arco-icon {
  flex: 0 0 auto;
  font-size:  0.32rem ;
}
.arco-toast-inner.horizontal .arco-toast-loading-wrapper + .arco-toast-content,
.arco-toast-inner.horizontal .arco-icon + .arco-toast-content {
  margin-left:  0.16rem ;
}
.arco-toast-inner.vertical {
  padding:  0.32rem ;
}
.arco-toast-inner.vertical .arco-icon {
  font-size:  0.48rem ;
}
.arco-toast-inner.vertical .arco-toast-loading-wrapper + .arco-toast-content,
.arco-toast-inner.vertical .arco-icon + .arco-toast-content {
  margin-top:  0.16rem ;
}
.arco-toast-inner .arco-loading .bg-color-with-config {
  background: #FFFFFF;
}
.arco-toast-inner .arco-loading .stop-color-with-config {
  stop-color: #FFFFFF;
}
.arco-toast-inner .arco-loading .fill-color-with-config {
  fill: #FFFFFF;
}
.arco-toast-inner .arco-loading .stroke-color-with-config {
  stroke: #FFFFFF;
}
.arco-toast-inner .arco-loading.arc .arc-bg {
  stroke:  #666666 ;
}
.arco-toast-loading-wrapper {
  display: flex;
  position: relative;
}
.arco-toast-loading-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:  0.24rem ;
}
.arco-toast-content {
  width: 100%;
  text-align: center;
  white-space: pre-line;
}

/**
 * @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-uploader-container {
  display: flex;
  flex-wrap: wrap;
}
.arco-uploader-add {
  position: relative;
}
.arco-uploader-add input {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.arco-uploader-list {
  width: 100%;
}
.arco-uploader-list-item {
  display: flex;
  align-items: center;
  height:  0.72rem ;
  margin-top:  0.32rem ;
}
.arco-uploader-list-item-container {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  border-radius:  0.04rem ;
  background-color:  #F7F8FA ;
  padding:  0 0.24rem ;
}
.arco-uploader-list-item-wrapper {
  display: flex;
  flex: 1;
  align-items: center;
}
.arco-uploader-list-item-file {
  display: flex;
  font-size:  0.32rem ;
  margin-right:  0.24rem ;
}
[dir="rtl"] .arco-uploader-list-item-file {
  margin-right: initial;
  margin-left:  0.24rem ;
}
.arco-uploader-list-item-file-icon {
  color:  #4e5969 ;
}
.arco-uploader-list-item-text {
  font-weight: 400;
  font-size:  0.28rem ;
  color:  #1d2129 ;
}
.arco-uploader-list-item-text-error {
  color:  #F53F3F ;
}
.arco-uploader-list-item-loaded {
  display: flex;
  font-size:  0.32rem ;
  color:  #00B42A ;
}
.arco-uploader-list-item-error {
  font-weight: 400;
  font-size:  0.24rem ;
  color:  #165DFF ;
}
.arco-uploader-list-item-delete {
  display: flex;
  height: 100%;
  align-items: center;
  padding-left:  0.24rem ;
  font-size:  0.24rem ;
}
[dir="rtl"] .arco-uploader-list-item-delete {
  padding-left: initial;
  padding-right:  0.24rem ;
}
.arco-uploader-list-item-delete-icon {
  color:  #4e5969 ;
}
.arco-uploader-list-item-delete-icon-disabled {
  color:  #c9cdd4 ;
}
.arco-uploader-disabled {
  pointer-events: none;
}