@charset "utf-8";
/*垂直居中*/
@mixin vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/*水平居中*/
@mixin horiz-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@svg border-1px {
  @rect {
    fill: transparent;  // content为透明
    width: 100%;  // 宽度为4px * 100%
    height: 100%;  // 高度为4px * 100%
    stroke-width: 25%;  // 边框宽度 4px * 25%(即1px)
    stroke: var(--color, black);  // 颜色
  }
}

@mixin border-top-1px($color) {
  position: relative;
  &::before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 1px solid $color; /*px*/
    content: '';
  }
}

@mixin border-bottom-1px($color) {
  position: relative;
  &::before {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid $color; /*px*/
    content: '';
  }
}

@mixin border-left-1px($color) {
  position: relative;
  &::before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-left: 1px solid $color; /*px*/
    content: '';
  }
}

@mixin border-right-1px($color) {
  position: relative;
  &::before {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    border-right: 1px solid $color; /*px*/
    content: '';
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  .border-top-1px,
  .border-bottom-1px {
    &::before {
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
  .border-left-1px,
  .border-right-1px {
    &::before {
      -webkit-transform: scaleX(0.7);
      transform: scaleX(0.7);
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .border-top-1px,
  .border-bottom-1px {
    &::before {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
  .border-left-1px,
  .border-right-1px {
    &::before {
      -webkit-transform: scaleX(0.5);
      transform: scaleX(0.5);
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  .border-1px {
    &::after {
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .border-1px {
    &::after {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}

@mixin border-1px($color) {
  position: relative;
  &:after {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid $color;
    content: ' ';
  }
}

@mixin border-none() {
  &:after {
    display: none;
  }
}

@mixin bg-image($url) {
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + "@3x.png");
  }
}
