// 设置宽高 $width $height:$width
@mixin size($width, $height: $width) {
    width: $width;
    height: $height;
}

// 设置字体 $font-size, $color: null, $line-height: null, $text-align: null
@mixin text($font-size, $color: null, $line-height: null,  $text-align: null) {
    font-size: $font-size;
    @if ($color != "" and $color != null) {
        color: $color;
    }
    @if ($line-height != "" and $line-height != null) {
        line-height: $line-height;
    }
    @if ($text-align != "" and $text-align != null) {
        text-align: $text-align;
    }
}

// flex $justify-content: null, $align-items: null
@mixin flex($align-items: null, $justify-content: null) {
    display: flex;
    @if ($align-items != "" and $align-items != null) {
        align-items: $align-items;
    }
    @if ($justify-content != "" and $justify-content != null) {
        justify-content: $justify-content;
    }
}

// 绝对定位 $position, $top: null, $right: null, $bottom: null, $left: null
@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {
    position: $position;
    @if ($top != "" and $top != null) {
        inset-block-start: $top;
    }
    @if ($right != "" and $right != null) {
        inset-inline-end: $right;
    }
    @if ($bottom != "" and $bottom != null) {
        inset-block-end: $bottom;
    }
    @if ($left != "" and $left != null) {
        inset-inline-start: $left;
    }
}

// 扩展点击区域 $v: 10px
@mixin extend-click($v: 10px) {
    position: relative;
    &:before {
        content: "";
        @include position(absolute, -$v, -$v, -$v, -$v);
    }
}

// scroll-y
@mixin scroll-y() {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

// translate 未知宽高水平垂直居中 $direction: both
@mixin center-translate($direction: both) {
    position: absolute;
    @if ($direction == both) {
        inset-block-start: 50%;
        inset-inline-start: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
    } @else if ($direction == horizontal) {
        inset-inline-start: 50%;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    } @else if ($direction == vertical) {
        inset-block-start: 50%;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}

// 多行超出设置点点点 $v: 1
@mixin box-clamp($v: 1) {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $v;
}

// 文字溢出点点点
@mixin ellipsis-overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

// 圆形 $size: 12px
@mixin circle($size: 12px) {
    border-radius: 50%;
    width: $size;
    height: $size;
}
