@use 'theme';
@use 'config';
@use 'function';
$B: null;

@mixin b($block) {
    $B: config.$namespace + '-' + $block !global;

    .#{$B} {
        @content;
    }
}

/* 加上-- */
@mixin m($modifier...) {
    $selectors: '';

    @each $item in $modifier {
        $selectors: #{$selectors + & + config.$modifier-separator + $item + ','};
    }

    @at-root {
        #{$selectors} {
            @content;
        }
    }
}

/* 定义状态（m） */
@mixin mdeep($modifier...) {
    $selectors: '';

    @each $item in $modifier {
        $selectors: #{$selectors + & + config.$modifier-separator + $item + ','};
    }

    @at-root {
        :deep() {
            #{$selectors} {
                @content;
            }
        }
    }
}

/* 定义元素（e）__，对于伪类，会自动将 e 嵌套在 伪类 底下 */
@mixin e($element...) {
    $selector: &;
    $selectors: '';

    @if function.containsPseudo($selector) {
        @each $item in $element {
            $selectors: #{$selectors + '.' + $B + config.$element-separator + $item + ','};
        }

        @at-root {
            #{$selector} {
                #{$selectors} {
                    @content;
                }
            }
        }
    } @else {
        @each $item in $element {
            $selectors: #{$selectors + $selector + config.$element-separator + $item + ','};
        }

        @at-root {
            #{$selectors} {
                @content;
            }
        }
    }
}

/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
@mixin edeep($element...) {
    $selector: &;
    $selectors: '';

    @if function.containsPseudo($selector) {
        @each $item in $element {
            $selectors: #{$selectors + '.' + $B + config.$element-separator + $item + ','};
        }

        @at-root {
            #{$selector} {
                :deep() {
                    #{$selectors} {
                        @content;
                    }
                }
            }
        }
    } @else {
        @each $item in $element {
            $selectors: #{$selectors + $selector + config.$element-separator + $item + ','};
        }

        @at-root {
            :deep() {
                #{$selectors} {
                    @content;
                }
            }
        }
    }
}

/* 状态，生成 is-$state 类名 */
@mixin is($states...) {
    @each $state in $states {
        @at-root {
            #{&}.#{config.$state-prefix + $state} {
                @content;
            }
        }
    }
}

/* 添加伪类元素 */
@mixin pseudo($pseudo) {
    @at-root #{&}#{':#{$pseudo}'} {
        @content;
    }
}

@mixin themeColor($type, $bg-color: transparent, $border-color: transparent, $color: #ffffff) {
    @include m($type) {
        background-color: $bg-color;
        border: 1px solid $border-color;
        color: $color;

        :deep() {
            @include b(icon) {
                color: $color;
            }
        }
    }
}

/**
  * 圆角形状
  * @param $shape circle-半圆形，square-方形带圆角
*/
@mixin borderRadio($shape) {
    @include m($shape) {
        @if $shape == circle {
            border-radius: theme.$hy-radius-semicircle;
        } @else if($shape == square) {
            border-radius: theme.$hy-radius-sm;
        } @else {
            border-radius: 28rpx theme.$hy-radius-sm;
        }
    }
}

/**
  * 正方形实现尖角样式，适用于背景不透明情况
  * @param $size 正方形边长
  * @param $bg 正方形背景颜色
  * @param $z-index z-index属性值，不得大于外部包裹器
  * @param $box-shadow 阴影
*/
@mixin squareArrow($size, $bg, $z-index, $box-shadow) {
    @include e(arrow) {
        position: absolute;
        width: $size;
        height: $size;
        z-index: $z-index;
    }

    @include e(arrow-down) {
        transform: translateX(-50%);
        bottom: 0;

        &:after {
            content: '';
            width: $size;
            height: $size;
            background-color: $bg;
            position: absolute;
            left: 0;
            bottom: calc(-1 * $size / 2);
            transform: rotateZ(45deg);
            box-shadow: $box-shadow;
        }
    }

    @include e(arrow-up) {
        transform: translateX(-50%);
        top: 0;

        &:after {
            content: '';
            width: $size;
            height: $size;
            background-color: $bg;
            position: absolute;
            left: 0;
            top: calc(-1 * $size / 2);
            transform: rotateZ(45deg);
            box-shadow: $box-shadow;
        }
    }

    @include e(arrow-left) {
        transform: translateY(-50%);
        left: 0;

        &:after {
            content: '';
            width: $size;
            height: $size;
            background-color: $bg;
            position: absolute;
            left: calc(-1 * $size / 2);
            top: 0;
            transform: rotateZ(45deg);
            box-shadow: $box-shadow;
        }
    }

    @include e(arrow-right) {
        transform: translateY(-50%);
        right: 0;

        &:after {
            content: '';
            width: $size;
            height: $size;
            background-color: $bg;
            position: absolute;
            right: calc(-1 * $size / 2);
            top: 0;
            transform: rotateZ(45deg);
            box-shadow: $box-shadow;
        }
    }
}

/* flex布局 */
@mixin flex($direction: row) {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: $direction;
}

/* 单行超出隐藏 */
@mixin lineEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 多行超出隐藏 */
@mixin multiEllipsis($lineNumber: 3) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $lineNumber;
    overflow: hidden;
    text-overflow: ellipsis;
}