@import "mixin";

$border-color-base: #bbb;
$border-color-dark: darken($border-color-base,10%);
$border-color-darkest: darken($border-color-base,20%);
$border-color-light: lighten($border-color-base,10%);
$border-color-lightest: lighten($border-color-base,15%);

//使用1px类时，需要注意 如果是absolute定位的，在引入mx-1px后，需要重新写入absolute定位

.mx-1px{
  &{
    &,&-normal{
      @include mx-1px($border-color-base);
    }
    &-dark{
      @include mx-1px($border-color-dark);
    }
    &-darkest{
      @include mx-1px($border-color-darkest);
    }
    &-light{
      @include mx-1px($border-color-light);
    }
    &-lightest{
      @include mx-1px($border-color-lightest);
    }
  }
  &-top{
    &,&-normal{
      @include mx-1px-side($border-color-base,top,before);
    }
    &-dark{
      @include mx-1px-side($border-color-dark,top,before);
    }
    &-darkest{
      @include mx-1px-side($border-color-darkest,top,before);
    }
    &-light{
      @include mx-1px-side($border-color-light,top,before);
    }
    &-lightest{
      @include mx-1px-side($border-color-lightest,top,before);
    }
  }
  &-bottom{
    &,&-normal{
      @include mx-1px-side($border-color-base,bottom,after);
    }
    &-dark{
      @include mx-1px-side($border-color-dark,bottom,after);
    }
    &-darkest{
      @include mx-1px-side($border-color-darkest,bottom,after);
    }
    &-light{
      @include mx-1px-side($border-color-light,bottom,after);
    }
    &-lightest{
      @include mx-1px-side($border-color-lightest,bottom,after);
    }
  }
  &-left{
    &,&-normal{
      @include mx-1px-side($border-color-base,left,before);
    }
    &-dark{
      @include mx-1px-side($border-color-dark,left,before);
    }
    &-darkest{
      @include mx-1px-side($border-color-darkest,left,before);
    }
    &-light{
      @include mx-1px-side($border-color-light,left,before);
    }
    &-lightest{
      @include mx-1px-side($border-color-lightest,left,before);
    }
  }
  &-right{
    &,&-normal{
      @include mx-1px-side($border-color-base,right,after);
    }
    &-dark{
      @include mx-1px-side($border-color-dark,right,after);
    }
    &-darkest{
      @include mx-1px-side($border-color-darkest,right,after);
    }
    &-light{
      @include mx-1px-side($border-color-light,right,after);
    }
    &-lightest{
      @include mx-1px-side($border-color-lightest,right,after);
    }
  }
}

hr{
  border: none;
  margin: 0;
  height: 1px;
  @include mx-1px-side(#ccc,top,before);
  &.normal{
    &::before{
      border-color:$border-color-base;
    }
  }
  &.dark{
    &::before{
      border-color:$border-color-dark;
    }
  }
  &.darkest{
    &::before{
      border-color: $border-color-darkest;
    }
  }
  &.light{
    &::before{
      border-color:$border-color-light;
    }
  }
  &.lightest{
    &::before{
      border-color:$border-color-lightest;
    }
  }
}

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

}



.mx-pixel{
  position: relative;
  .mx-pixel-border{
    position: absolute;
    border-radius: 100%;
  }
  .mx-pixel-top{
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    border-top-width:1px;
    @include mx-1px-device-fix-div("Y");
  }
  .mx-pixel-right{
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    border-right-width: 1px;
    @include mx-1px-device-fix-div("X");
  }
  .mx-pixel-bottom{
    bottom: 0;
    left: 0;
    width: 100%;
    height:1px;
    border-bottom-width: 1px;
    @include mx-1px-device-fix-div("Y");
  }
  .mx-pixel-left{
    top:0px;
    left: 0;
    width: 1px;
    height:100%;
    border-left-width: 1px;
    @include mx-1px-device-fix-div("X");
  }
}