/* 极细线 */

.repixelY(@direction) when (@direction = up) {

    // @media screen and (-webkit-device-pixel-ratio: 1.5),
    // (-webkit-min-device-pixel-ratio: 1.5) {
    //     -webkit-transform: scale3d(1, .7, 1);
    //     transform: scale3d(1, .7, 1);
    // }

    @media screen and (-webkit-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform: scale3d(1, .5, 1);
        transform: scale3d(1, .5, 1);
    }

    // @media screen and (-webkit-device-pixel-ratio: 2.5),
    // (-webkit-min-device-pixel-ratio: 2.5) {
    //     -webkit-transform: scale3d(1, .4, 1);
    //     transform: scale3d(1, .4, 1);
    // }

    // @media screen and (-webkit-device-pixel-ratio: 3),
    // (-webkit-min-device-pixel-ratio: 3) {
    //     -webkit-transform: scale3d(1, .33, 1);
    //     transform: scale3d(1, .33, 1);
    // }
}

.repixelY(@direction) when (@direction = down) {

    // @media screen and (-webkit-device-pixel-ratio: 1.5),
    // (-webkit-min-device-pixel-ratio: 1.5) {
    //     -webkit-transform: scale3d(1, .7, 1) translate3D(0, 50%, 0);
    //     transform: scale3d(1, .7, 1) translate3D(0, 50%, 0);
    // }

    @media screen and (-webkit-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform: scale3d(1, .5, 1) translate3D(0, 100%, 0);
        transform: scale3d(1, .5, 1) translate3D(0, 100%, 0);
    }

    // @media screen and (-webkit-device-pixel-ratio: 2.5),
    // (-webkit-min-device-pixel-ratio: 2.5) {
    //     -webkit-transform: scale3d(1, .4, 1) translate3D(0, 100%, 0);
    //     transform: scale3d(1, .4, 1) translate3D(0, 100%, 0);
    // }

    // @media screen and (-webkit-device-pixel-ratio: 3),
    // (-webkit-min-device-pixel-ratio: 3) {
    //     -webkit-transform: scale3d(1, .33, 1) translate3D(0, 200%, 0);
    //     transform: scale3d(1, .33, 1) translate3D(0, 200%, 0);
    // }
}

.repixelX(@direction) when (@direction = left) {

    // @media screen and (-webkit-device-pixel-ratio: 1.5),
    // (-webkit-min-device-pixel-ratio: 1.5) {
    //     -webkit-transform: scale3d(.7, 1, 1);
    //     transform: scale3d(.7, 1, 1);
    // }

    @media screen and (-webkit-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform: scale3d(.5, 1, 1);
        transform: scale3d(.5, 1, 1);
    }

    // @media screen and (-webkit-device-pixel-ratio: 2.5),
    // (-webkit-min-device-pixel-ratio: 2.5) {
    //     -webkit-transform: scale3d(.4, 1, 1);
    //     transform: scale3d(.4, 1, 1);
    // }

    // @media screen and (-webkit-device-pixel-ratio: 3),
    // (-webkit-min-device-pixel-ratio: 3) {
    //     -webkit-transform: scale3d(.33, 1, 1);
    //     transform: scale3d(.33, 1, 1);
    // }
}

.repixelX(@direction) when (@direction = right) {

    // @media screen and (-webkit-device-pixel-ratio: 1.5),
    // (-webkit-min-device-pixel-ratio: 1.5) {
    //     -webkit-transform: scale3d(.7, 1, 1)  translate3D(50%, 0, 0);
    //     transform: scale3d(.7, 1, 1) translate3D(50%, 0, 0);
    // }

    @media screen and (-webkit-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform: scale3d(.5, 1, 1) translate3D(100%, 0, 0);
        transform: scale3d(.5, 1, 1) translate3D(100%, 0, 0);
    }

    // @media screen and (-webkit-device-pixel-ratio: 2.5),
    // (-webkit-min-device-pixel-ratio: 2.5) {
    //     -webkit-transform: scale3d(.4, 1, 1) translate3D(100%, 0, 0);
    //     transform: scale3d(.4, 1, 1) translate3D(100%, 0, 0);
    // }

    // @media screen and (-webkit-device-pixel-ratio: 3),
    // (-webkit-min-device-pixel-ratio: 3) {
    //     -webkit-transform: scale3d(.33, 1, 1) translate3D(200%, 0, 0);
    //     transform: scale3d(.33, 1, 1) translate3D(200%, 0, 0);
    // }
}

.repixel() {

    // @media screen and (-webkit-device-pixel-ratio: 1.5),
    // (-webkit-min-device-pixel-ratio: 1.5) {
    //     -webkit-transform: scale3d(.7, .7, .7);
    //     transform: scale3d(.7, .7, .7);
    // }

    @media screen and (-webkit-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform: scale3d(.5, .5, 1);
        transform: scale3d(.5, .5, 1);
    }

    // @media screen and (-webkit-device-pixel-ratio: 3),
    // (-webkit-min-device-pixel-ratio: 3) {
    //     -webkit-transform: scale3d(.33, .33, .33);
    //     transform: scale3d(.33, .33, 0.33);
    // }
}

//底部细线
.bb1px(@color: @border-color, @left: 0, @right: 0, @style: solid) {
    position: relative;
    z-index: 1;

    &:after {
        content: "";
        position: absolute;
        left: @left;
        right: @right;
        bottom: 0;
        border-bottom: 1px @style @color;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        .repixelY(@direction: down);
        z-index: 11;
    }
}

//顶部细线
.bt1px(@color: @border-color, @left: 0, @right: 0, @style: solid) {
    position: relative;
    z-index: 1;

    &::before {
        content: "";
        position: absolute;
        left: @left;
        right: @right;
        top: 0;
        height: 1px;
        border-top: 1px @style @color;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        .repixelY(@direction: up);
        z-index: 10;
    }
}

//左侧细线
.bl1px(@color: @border-color, @top: 0, @bottom: 0, @style: solid) {
    position: relative;
    z-index: 1;

    &:before {
        content: "";
        position: absolute;
        left: 0;
        top: @top;
        bottom: @bottom;
        border-left: 1px @style @color;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        .repixelX(@direction: left);
        z-index: 10;
    }
}

//右侧细线
.br1px(@color: @border-color, @top: 0, @bottom: 0, @style: solid) {
    position: relative;
    z-index: 1;

    &:after {
        content: "";
        position: absolute;
        right: 0;
        top: @top;
        bottom: @bottom;
        border-right: 1px @style @color;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        .repixelX(@direction: right);
        z-index: 11;
    }
}

//四周细线
.b1px(@color: @border-color, @border-radius: @border-radius-base, @style: solid) {
    position: relative;
    z-index: 1;

    &:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border: 1px @style @color;
        border-radius: @border-radius;

        @media screen and (-webkit-device-pixel-ratio: 2),
        (-webkit-min-device-pixel-ratio: 2) {
            width: 200%;
            height: 200%;
            border-radius: 2 * @border-radius;
            -webkit-transform: scale3d(.5, .5, 1);
            transform: scale3d(.5, .5, 1);
            transform-origin: 0 0;
            z-index: 11;
        }
    }
}