@mixin one-px-common($top, $right, $bottom, $left, $color: $grayLight) {
  content: '';
  position: absolute;
  background-color: $color;
  display: block;
  z-index: 1;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin top-one-px($color: $grayLight) {
  border-top: 1px solid $color;

  @media (min-resolution: 2dppx) {
    border-top: none;
    &::before {
      @include one-px-common(0, auto, auto, 0, $color);
      width: 100%;
      height: 1px;
      transform-origin: 50% 0;
      transform: scaleY(0.5);

      @media (min-resolution: 3dppx) {
        transform: scaleY(0.33);
      }
    }
  }
}

@mixin right-one-px($color: $grayLight) {
  border-right: 1px solid $color;

  @media (min-resolution: 2dppx) {
    border-right: none;
    &::after {
      @include one-px-common(0, 0, auto, auto, $color);
      width: 1px;
      height: 100%;
      transform-origin: 100% 50%;
      transform: scaleX(0.5);

      @media (min-resolution: 3dppx) {
        transform: scaleX(0.33);
      }
    }
  }
}

@mixin bottom-one-px($color: $grayLight) {
  border-bottom: 1px solid $color;

  @media (min-resolution: 2dppx) {
    border-bottom: none;
    &::before {
      @include one-px-common(auto, auto, 0, 0, $color);
      width: 100%;
      height: 1px;
      transform-origin: 50% 100%;
      transform: scaleY(0.5);

      @media (min-resolution: 3dppx) {
        transform: scaleY(0.33);
      }
    }
  }
}

@mixin left-one-px($color: $grayLight) {
  border-left: 1px solid $color;

  @media (min-resolution: 2dppx) {
    border-left: none;
    &::after {
      @include one-px-common(0, auto, auto, 0, $color);
      width: 1px;
      height: 100%;
      transform-origin: 0 50%;
      transform: scaleX(0.5);

      @media (min-resolution: 3dppx) {
        transform: scaleX(0.33);
      }
    }
  }
}