// 文本溢出省略号
@mixin text-ellipsis($lines: 1) {
    overflow: hidden;
    text-overflow: ellipsis;

    @if $lines ==1 {
        white-space: nowrap;
    }

    @else {
        display: -webkit-box;
        -webkit-line-clamp: $lines;
        -webkit-box-orient: vertical;
    }
}

// 清除浮动
@mixin clearfix {
    &::after {
        content: '';
        display: table;
        clear: both;
    }
}

// 多行文本省略
@mixin multi-line-ellipsis($line-height: 1.4, $lines: 2) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $lines;
    line-height: $line-height;
    max-height: $line-height * $lines * 1em;
    overflow: hidden;
}

// 1像素边框
@mixin hairline($color: $border-base, $direction: bottom) {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        transform-origin: center;
        box-sizing: border-box;
        pointer-events: none;

        @if $direction ==top {
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            border-top: 1px solid $color;
            transform: scaleY(0.5);
        }

        @else if $direction ==bottom {
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            border-bottom: 1px solid $color;
            transform: scaleY(0.5);
        }

        @else if $direction ==left {
            top: 0;
            left: 0;
            bottom: 0;
            width: 1px;
            border-left: 1px solid $color;
            transform: scaleX(0.5);
        }

        @else if $direction ==right {
            top: 0;
            right: 0;
            bottom: 0;
            width: 1px;
            border-right: 1px solid $color;
            transform: scaleX(0.5);
        }

        @else if $direction ==all {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 1px solid $color;
            transform: scale(0.5);
            transform-origin: 0 0;
        }
    }
}

// 移除1像素边框
@mixin hairline-remove {
    &::after {
        display: none;
    }
}

// 弹性布局快捷方式
@mixin flex($justify: flex-start, $align: center, $direction: row) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify;
    align-items: $align;
}

// 垂直居中
@mixin vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

// 响应式媒体查询
@mixin respond-to($breakpoint) {
    @if $breakpoint ==xs {
        @media (max-width: 320px) {
            @content;
        }
    }

    @else if $breakpoint ==sm {
        @media (max-width: 375px) {
            @content;
        }
    }

    @else if $breakpoint ==md {
        @media (max-width: 414px) {
            @content;
        }
    }

    @else if $breakpoint ==lg {
        @media (max-width: 768px) {
            @content;
        }
    }

    @else if $breakpoint ==xl {
        @media (min-width: 1024px) {
            @content;
        }
    }
}