/**
 * @type mixin-var
 * @name GeneralMixinVars
 * @name_en General Mixin
 */
@import '~@arco-design/mobile-utils/style/mixin.less';
@import './vars-switch.less';
@import './pxtorem.less';

/**
 * 根据 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);
 * }
 * ```
 */
.rem(@property; @values...) {
    @{property}: ~`(function () {
        var baseFontSize=@{base-font-size};
        var sizeList = @{values};
        if (!Array.isArray(sizeList)) {
            sizeList = [sizeList];
        }
        return sizeList.map(function (item) {
            return pxtorem(item);
        }).join(' ');
    }())`;
}

/**
 * 根据 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);
 * }
 * ```
 */
.rem-with-rtl(@property; @values...) {
    .rem(@property; @values...);
    .style-with-rtl({
        @{property}: initial;
        @new-property: .prop-with-rtl(@property)[@property-name];
        .rem(@new-property; @values...);
    });
}

/**
 * 当 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;
 *     });
 * }
 * ```
 */
.use-dark-mode-query(@rules) {
    & when (@use-dark-mode = 1) {
        @{arco-dark-mode-selector} & {
            @rules();
        }
    }
}

/**
 * 为属性设置 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);
 * }
 * ```
 */
.use-var(@property, @variables, @preValues: '', @nextValues: '') {
    & when (@use-css-vars = 0) {
        @{property}: ~"@{preValues}" @@variables ~"@{nextValues}";
    }
    & when (@use-css-vars = 1) {
        @{property}: ~"@{preValues}" ~"var(--@{variables}, "@@variables~")" ~"@{nextValues}";
    }
}

/**
 * 为属性设置 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);
 * }
 * ```
 */
.use-transition-var(@transitionVariable, @backupVariable, @property: transition-duration) {
    & when (@use-css-vars = 0) {
        @{property}: ~"var(--@{transitionVariable}, "@@backupVariable~")";
    }
    & when (@use-css-vars = 1) {
        @{property}: ~"var(--@{transitionVariable}, var(--@{backupVariable}, "@@backupVariable~"))";
    }
}

/**
 * 在常规模式和 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);
 * }
 * ```
 */
.use-var-with-rtl(@property, @variables, @preValues: '', @nextValues: '') {
    .use-var(@property, @variables, @preValues, @nextValues);
    .style-with-rtl({
        @{property}: initial;
        @new-property: .prop-with-rtl(@property)[@property-name];
        .use-var(@new-property, @variables, @preValues, @nextValues);
    });
}

/**
 * 设置涉及左右相关的属性名，在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);
 * }
 * ```
 */
.set-prop-with-rtl(@property, @value, @rules: {
    @{property}: initial;
}) {
    @{property}: @value;
    .style-with-rtl({
        @rules();
        @new-property: .prop-with-rtl(@property)[@property-name];
        @{new-property}: @value;
    });
}

/**
 * 设置涉及左右相关的属性值，在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);
 * }
 * ```
 */
.set-value-with-rtl(@property, @value) {
    @{property}: @value;
    .style-with-rtl({
        @new-value: .prop-with-rtl(@value)[@property-name];
        @{property}: @new-value;
    });
}

/**
 * 在 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);
 *     });
 * }
 * ```
 */
.style-with-rtl(@rules) {
    & when (@use-rtl = 1) {
        [dir="rtl"] & {
            @rules();
        }
    }
}

/**
 * 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);
 * }
 * ```
 */
.hairline-var(@color, @direction: all) {
    .hairline(@@color, @direction);
    & when (@use-css-vars = 1) {
        .hairline(var(~"--@{color}", @@color), @direction);
    }
}

/**
 * 字体加粗
 * @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);
 * }
 * ```
 */
.text-medium-var(@color: currentColor, @stroke: 0.3PX) {
    .text-medium(@@color, @stroke);
    & when (@use-css-vars = 1) {
        .text-medium(var(~"--@{color}", @@color), @stroke);
    }
}

/**
 * 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);
 * }
 * ```
 */
.onepx-border-var(@direction, @borderColor, @borderRadius: 0, @borderWidth: 1PX, @borderStyle: solid) {
    .onepx-border(@direction, @@borderColor, @borderRadius, @borderWidth, @borderStyle);
    & when (@use-css-vars = 1) {
        .onepx-border(@direction, var(~"--@{borderColor}", @@borderColor), @borderRadius, @borderWidth, @borderStyle);
    }
}

/**
 * 元素右下 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);
 * }
 * ```
 */
.hairline-bottom-right-var(@color) {
    .hairline-bottom-right(@@color);
    & when (@use-css-vars = 1) {
        .hairline-bottom-right(var(~"--@{color}", @@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);
 * }
 * ```
 */
.hairline-top-left-var(@color) {
    .hairline-top-left(@@color);
    & when (@use-css-vars = 1) {
        .hairline-top-left(var(~"--@{color}", @@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);
 * }
 * ```
 */
.set-loading-color-var(@color) {
    .set-loading-color(@@color);
    & when (@use-css-vars = 1) {
        .set-loading-color(var(~"--@{color}", @@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);
 * }
 * ```
 */
.set-font-size-var(@size, @scale: 0.9) {
    & when not (@use-css-vars = 1) {
        .set-font-size(@@size);
    }
    & when (@use-css-vars = 1) {
        & when (@@size < 12PX) {
            font-size: calc(var(~"--@{size}", @@size) / @scale);
            transform: scale(@scale);
        }
        & when not (@@size < 12PX) {
            font-size: var(~"--@{size}", @@size);
        }
    }
}

/**
 * 设置 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);
 * }
 * ```
 */
.set-content-box-width-var(@property, @width, @padding-left, @padding-right) {
    & when not (@use-css-vars = 1) {
        .set-content-box-width(@property, @@width, @@padding-left, @@padding-right);
    }
    & when (@use-css-vars = 1) {
        @{property}: calc(var(~"--@{width}", @@width) - var(~"--@{padding-left}", @@padding-left) - var(~"--@{padding-right}", @@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);
 * }
 * ```
 */
.set-steps-color-var(@color, @finish-color) {
    .set-steps-color(@@color, @@finish-color);
    & when (@use-css-vars = 1) {
        .set-steps-color(var(~"--@{color}", @@color), var(~"--@{finish-color}", @@finish-color));
    }
}