// 1px border
@mixin one-px-border($direction: top, $color: $border-color-default) {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;

    @if $direction == top or $direction == bottom {
        right: 0;
        height: 0;
        transform: scaleY(0.5);
        border-top: 1PX solid $color;
        transform-origin: top;
    }
    @if $direction == bottom {
        top: auto;
        bottom: 0;
        transform-origin: bottom;
    }
    @if $direction == right or $direction == left {
        width: 0;
        bottom: 0;
        transform: scaleX(0.5);
        border-left: 1PX solid $color;
        transform-origin: left;
    }
    @if $direction == right {
        left: auto;
        right: 0;
        transform-origin: right;
    }
    @if $direction == all {
        width: 200%;
        height: 200%;
        transform-origin: left top;
        transform: scale(0.5);
        border: 1PX solid $color;
    }
}

// 1px border dashed
@mixin one-px-border-dashed($direction: top, $color: $border-color-default) {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;

    @if $direction == top or $direction == bottom {
        right: 0;
        height: 0;
        transform: scaleY(0.5);
        border-top: 1PX dashed $color;
        transform-origin: top;
    }
    @if $direction == bottom {
        top: auto;
        bottom: 0;
        transform-origin: bottom;
    }
    @if $direction == right or $direction == left {
        width: 0;
        bottom: 0;
        transform: scaleX(0.5);
        border-left: 1PX dashed $color;
        transform-origin: left;
    }
    @if $direction == right {
        left: auto;
        right: 0;
        transform-origin: right;
    }
    @if $direction == all {
        width: 200%;
        height: 200%;
        transform-origin: left top;
        transform: scale(0.5);
        border: 1PX dashed $color;
    }
}
// 文本省略
@mixin ellipsis($row: 1) {
    overflow: hidden;
    @if $row == 1 {
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    @if $row > 1 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $row;
        overflow: hidden;
       /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
    }
}
// v icon-arrow
@mixin icon-arrow($direction: right center, $color: $icon-color-default) {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 6px;
    border-right: 1px solid $color;
    border-bottom: 1px solid $color;
    
    @if nth($direction, 1) == right {
        transform: rotate(-45deg);
    }
    @if nth($direction, 1) == left {
        right: auto;
        left: 0;
        transform: rotate(135deg);
    }
    @if nth($direction, 1) == top {
        transform: rotate(225deg);
    }
    @if nth($direction, 2) == center {
        top: 50%;
        margin-top: -3px;
    }
    @if nth($direction, 1) == bottom {
        transform: rotate(45deg);
        @if nth($direction, 2) == center {
            margin-top: -6px;
        }
    }
}
@mixin position( $type: absolute, $l: center, $t: center) {
    // 绝对定位
    @if $type == absolute {
        position: absolute;
        // 上下左右居中
        @if $l == center and $t == center {
            left:50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        // 左右居中
        @else if $l == center and $t != center {
            top: $t;
            left: 50%;
            transform: translateX(-50%);
        }
        // 上下居中
        @else if $t == center and $l != center {
            top: 50%;
            left: $l;
            transform: translateY(-50%);
        }
        @else {
            top: $t;
            left: $l;
        }
    }

    // 固定定位
    @if $type == fixed {
        position: fixed;
        // 上下左右居中
        @if $l == center and $t == center {
            left:50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        // 左右居中
        @else if $l == center and $t != center {
            top: $t;
            left: 50%;
            transform: translateX(-50%);
        }
        // 上下居中
        @else if $t == center and $l != center {
            top: 50%;
            left: $l;
            transform: translateY(-50%);
        }
        @else {
            top: $t;
            left: $l;
        }
    }
}
// triangle 三角箭头
// 可采用空元素或伪元素生成，具体定位这里不涉及
%triangle-basic {
    content: "";
    height: 0;
    width: 0;
    overflow: hidden;
}

@mixin triangle($direction: top, $borderWidth: 6px, $borderColor: $colorC) {
    @extend %triangle-basic;
    @if $direction == top {
        border-bottom-style: solid;
        border-bottom-width: $borderWidth;
        border-bottom-color: $borderColor; // 拆分出来便于设置颜色继承父元素
        border-left: $borderWidth dashed transparent;
        border-right: $borderWidth dashed transparent;
    }
    @else if $direction == right {
        border-left-style: solid;
        border-left-width: $borderWidth;
        border-left-color: $borderColor;
        border-top: $borderWidth dashed transparent;
        border-bottom: $borderWidth dashed transparent;
    }
    @else if $direction == bottom {
        border-top-style: solid;
        border-top-width: $borderWidth;
        border-top-color: $borderColor;
        border-left: $borderWidth dashed transparent;
        border-right: $borderWidth dashed transparent;
    }
    @else if $direction == left {
        border-right-style: solid;
        border-right-width: $borderWidth;
        border-right-color: $borderColor;
        border-top: $borderWidth dashed transparent;
        border-bottom: $borderWidth dashed transparent;
    }
}