@mixin mx-1px($color,$radius:0){
  position: relative;
  &:before {
    position        : absolute;
    content         : "";
    width           : 100%;
    height          : 100%;
    border          : 1px solid $color;
    border-radius   : $radius *2;
    top             : 0;
    left            : 0;
    transform-origin: 0 0;
    box-sizing      : border-box;
  }
  @media screen and (-webkit-min-device-pixel-ratio:1.5) {
    &:before {
      width    : 150%;
      height   : 150%;
      transform: scale(0.6667);
    }
  }
  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    &:before {
      width    : 200%;
      height   : 200%;
      transform: scale(0.5);
    }
  }
}


@mixin mx-1px-side($color, $direction:top, $pseudo:before) {
  position: relative;
  &::#{$pseudo} {
    position        : absolute;
    content         : "";
    transform-origin: 0 0;

    // z-index         : 99;
  }
  @if $direction == top {
    &::#{$pseudo} {
      width     : 100%;
      height    : 1px;
      border-top: 1px solid $color;
      top       : 0;
      left      : 0;
    }
    @include mx-1px-device-fix($pseudo,"Y");
  }
  @if $direction == bottom {
    &::#{$pseudo} {
      width        : 100%;
      height       : 1px;
      bottom       : -1px;
      border-bottom: 1px solid $color;
      left         : 0;
    }
    @include mx-1px-device-fix($pseudo,"Y");
  }
  @if $direction == left {
    &::#{$pseudo} {
      width      : 1px;
      height     : 100%;
      border-left: 1px solid $color;
      top        : 0;
      left       : 0;
    }
    @include mx-1px-device-fix($pseudo,"X");
  }
  @if $direction == right {
    &::#{$pseudo} {
      width       : 1px;
      height      : 100%;
      border-right: 1px solid $color;
      top         : 0;
      right       : -1px;
    }
    @include mx-1px-device-fix($pseudo,"X");
  }

}


@mixin mx-1px-device-fix($pseudo,$transform){
  @if $transform == Y{
    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
      &:#{$pseudo} {
        transform: scaleY(0.6667);
      }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
      &:#{$pseudo} {
        transform: scaleY(0.5);
      }
    }
  }
  @if $transform == X{
    @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
      &:#{$pseudo} {
        transform: scaleX(0.6667);
      }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
      &:#{$pseudo} {
        transform: scaleX(0.5);
      }
    }
  }

}