.flex() {
    display: flex;
    align-items: center;
}
.flex-col() {
    display: flex;
    flex-direction: column;
}
.line(@bg: #1c1e26, @radius: 6px, @color1: @prim, @color2: @warn) {
    background-image: linear-gradient(135deg, @color1, @color2);
    position: relative;
    padding: 1px;
    border-radius: @radius;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;

    &::before {
        position: absolute;
        z-index: 1;
        content: '';
        left: 1px;
        right: 1px;
        bottom: 1px;
        top: 1px;
        background-color: @bg;
        border-radius: @radius;
    }

    &::after {
        position: absolute;
        z-index: 0;
        content: '';
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-image: linear-gradient(135deg, @color1, @color2);
        transform-origin: center center;
        animation: spin ease-in-out 3s;
        animation-iteration-count: 0;
    }

    * {
        z-index: 3;
        position: relative;
    }

    &:hover {
        &::after {
            animation-iteration-count: infinite;
        }
    }
}
.setTopLine(@c: @divider) {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid @c;
    color: @c;
    transform-origin: 0 0;
}

.setBottomLine(@c: @divider) {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid @c;
    color: @c;
    transform-origin: 0 100%;
}

.setLeftLine(@c: @divider) {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-left: 1px solid @c;
    color: @c;
    transform-origin: 0 0;
    transform: scaleX(0.5);
}

.setRightLine(@c: @divider) {
    content: ' ';
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid @c;
    color: @c;
    transform-origin: 100% 0;
    transform: scaleX(0.5);
}
.ellipsis(@w:auto) {
    width: @w;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

.ellipsisLn(@line) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @line;
}
.text_wrap() {
    word-wrap: break-word;
    word-break: break-all;
}
.hyphens() {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.linear() {
    background: linear-gradient(135deg, @prim, @warn);
}

@keyframes flipY {
    0% {
        transform: perspective(500px) rotateX(0deg) rotateY(15deg);
    }
    50% {
        transform: perspective(500px) rotateX(0deg) rotateY(-15deg);
    }
    100% {
        transform: perspective(500px) rotateX(0deg) rotateY(15deg);
    }
}
@keyframes flipYLight {
    0% {
        left: -100vw;
        opacity: 0.3;
        width: 25px;
    }
    25% {
        left: 45vw;
        opacity: 0;
        width: 45px;
    }
    50% {
        left: 150vw;
        opacity: 0.3;
        width: 25px;
    }
    75% {
        left: 45vw;
        opacity: 0;
        width: 45px;
    }
    100% {
        left: -100vw;
        opacity: 0.3;
        width: 25px;
    }
}

.detail-animate() {
    animation: flipY 6s ease-in-out infinite;
    position: relative;
    &::after {
        content: '';
        background-color: #fff;
        position: absolute;
        background: #fff;
        width: 25px;
        height: 100vw;
        top: 0;
        left: 45px;
        opacity: 0;
        transform: skewX(-25deg);
        z-index: 2;
        animation: flipYLight 6s ease-in-out infinite;
    }
}
