/**
 * @param $color
 * @param $direction: top bottom left right vertical all radius,  default: all
 */
@mixin _border($color, $direction: all, $radius: 1px) {
    $list: top bottom left right;
    $vaue: 1px solid $color;
    @if $color==0 {
        $vaue: 0;
    }
    @if contain($list, $direction) {
        border-#{$direction}: $vaue;
    }
    @else if $direction==vertical {
        border-top: $vaue;
        border-bottom: $vaue;
    }
    @else {
        border: $vaue;
        @if $direction==radius {
            border-radius: $radius;
        }
    }
}

/**
 * @param $color
 * @param $direction: top bottom left right vertical all,  default: all
 * @param $pseudo: after before, default: after
 */
@mixin onepx($color, $direction: all, $pseudo: after) {
    $border-t: -webkit-gradient(linear, left bottom, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $color));
    $border-b: -webkit-gradient(linear, left top, left bottom, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $color));
    $border-l: -webkit-gradient(linear, right top, left top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $color));
    $border-r: -webkit-gradient(linear, left top, right top, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.5, $color));

    @include _border($color, $direction);

    @if $direction==vertical {
        background-image: none;
    }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        @include _border(0, $direction);
        @if $direction==top or $direction==bottom or $direction==vertical {
            background-repeat: repeat-x;
            -webkit-background-size: 100% 1px;
                    background-size: 100% 1px;
            
            @if $direction==top {
                background-position: left top; 
                background-image: $border-t;
            }
            @else if $direction==bottom {
                background-position: left bottom; 
                background-image: $border-b;
            }
            @else {
                background-position: top, bottom;
                background-image: $border-t, $border-b;
            }
        }
        @else if $direction==left or $direction==right {
            background-repeat: repeat-y;
            -webkit-background-size: 1px 100%;
                    background-size: 1px 100%;
            @if $direction==left {
                background-position: left top; 
                background-image: $border-l;
            }
            @else {
                background-position: right top;
                background-image: $border-r;
            }
        }
        @else {
            position: relative;
            &:#{$pseudo} {
                content: " ";
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0; 
                background-image: $border-t, $border-r, $border-b, $border-l;
                -webkit-background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
                        background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
                background-repeat: no-repeat;
                background-position: top, right, bottom, left;
                padding: 1px;
                box-sizing: border-box;
                z-index: 10;
                pointer-events: none;
            }
        }
    }
}

/**
 * @param $color
 * @param $direction: top bottom left right vertical all radius,  default: all
 * @param $pseudo: after before, default: after
 * @param $radius default: 1px
 */
@mixin onepx-scale($color, $direction: all, $pseudo: after, $radius: 1px) {
    $list: top bottom left right;
    @include _border($color, $direction, $radius);
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        position: relative;
        @include _border(0, $direction);
        @if $direction==all or $direction==radius {
            overflow: hidden;
        }
        &:#{$pseudo} {
            content: " ";
            position: absolute;
            display: block;
            z-index: 5;
            pointer-events: none;

            @if contain($list, $direction) {
                background-color: $color;
            }

            @if $direction==top or $direction==bottom {
                left: 0;
                right: 0;
                height: 1px;
                width: 100%;
                -webkit-transform: scaleY(.5);
                transform: scaleY(.5);
                @if $direction==top {
                    top: 0;
                }
                @else {
                    bottom: 0;
                }
                
            }
            @else if $direction==left or $direction==right {
                top: 0;
                bottom: 0;
                width: 1px;
                height: 100%;
                -webkit-transform: scaleX(.5);
                transform: scaleX(.5);

                @if $direction==left {
                    left: 0;
                }
                @else {
                    right: 0;
                }
            }
            @else {
                top: 0;
                left: 0;
                width: 200%;
                height: 200%;
                @include _border($color, $direction, $radius);
                -webkit-transform: scale(.5);
                transform: scale(.5);
                box-sizing: border-box;
            }

            @if $direction==bottom or $direction==right {
                -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
            }
            @else {
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
            }
        }
    }
}