.hairline-pseudo(@color, @top, @right, @bottom, @left) {
    content: '';
    position: absolute;
    background-color: @color;
    display: block;
    z-index: 15;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
  }
  .hairline(@position, @color) when (@position = top) {
    &:before {
      .hairline-pseudo(@color, 0, auto, auto, 0);
      height: 1px;
      width: 100%;
      transform-origin: 50% 0%;
      html.device-pixel-ratio-2 & {
        transform: scaleY(0.5);
      }
      html.device-pixel-ratio-3 & {
        transform: scaleY(0.33);
      }
    }
  }
  .hairline-root(@selector, @position, @color) when (@position = top) {
    @selectorEscaped: e(@selector);
    @{selectorEscaped}:before {
      .hairline-pseudo(@color, 0, auto, auto, 0);
      height: 1px;
      width: 100%;
      transform-origin: 50% 0%;
    }
    &.device-pixel-ratio-2 @{selectorEscaped}:before {
      transform: scaleY(0.5);
    }
    &.device-pixel-ratio-3 @{selectorEscaped}:before {
      transform: scaleY(0.33);
    }
  }
  .hairline(@position, @color) when (@position = left) {
    &:before {
      .hairline-pseudo(@color, 0, auto, auto, 0);
      width: 1px;
      height: 100%;
      transform-origin: 0% 50%;
      html.device-pixel-ratio-2 & {
        transform: scaleX(0.5);
      }
      html.device-pixel-ratio-3 & {
        transform: scaleX(0.33);
      }
    }
  }
  .hairline-root(@selector, @position, @color) when (@position = left) {
    @selectorEscaped: e(@selector);
    @{selectorEscaped}:before {
      .hairline-pseudo(@color, 0, auto, auto, 0);
      width: 1px;
      height: 100%;
      transform-origin: 0% 50%;
    }
    &.device-pixel-ratio-2 @{selectorEscaped}:before {
      transform: scaleX(0.5);
    }
    &.device-pixel-ratio-3 @{selectorEscaped}:before {
      transform: scaleX(0.33);
    }
  }
  .hairline(@position, @color) when (@position = bottom) {
    &:after {
      .hairline-pseudo(@color, auto, auto, 0, 0);
      height: 1px;
      width: 100%;
      transform-origin: 50% 100%;
      html.device-pixel-ratio-2 & {
        transform: scaleY(0.5);
      }
      html.device-pixel-ratio-3 & {
        transform: scaleY(0.33);
      }
    }
  }
  .hairline-root(@selector, @position, @color) when (@position = bottom) {
    @selectorEscaped: e(@selector);
    @{selectorEscaped}:after {
      .hairline-pseudo(@color, auto, auto, 0, 0);
      height: 1px;
      width: 100%;
      transform-origin: 50% 100%;
    }
    &.device-pixel-ratio-2 @{selectorEscaped}:after {
      transform: scaleY(0.5);
    }
    &.device-pixel-ratio-3 @{selectorEscaped}:after {
      transform: scaleY(0.33);
    }
  }
  .hairline(@position, @color) when (@position = right) {
    &:after {
      .hairline-pseudo(@color, 0, 0, auto, auto);
      width: 1px;
      height: 100%;
      transform-origin: 100% 50%;
      html.device-pixel-ratio-2 & {
        transform: scaleX(0.5);
      }
      html.device-pixel-ratio-3 & {
        transform: scaleX(0.33);
      }
    }
  }
  .hairline-root(@selector, @position, @color) when (@position = right) {
    @selectorEscaped: e(@selector);
    @{selectorEscaped}:after {
      .hairline-pseudo(@color, 0, 0, auto, auto);
      width: 1px;
      height: 100%;
      transform-origin: 100% 50%;
    }
    &.device-pixel-ratio-2 @{selectorEscaped}:after {
      transform: scaleX(0.5);
    }
    &.device-pixel-ratio-3 @{selectorEscaped}:after {
      transform: scaleX(0.33);
    }
  }
  // For right and bottom
  .hairline-remove(@position) when not (@position = left) and not (@position = top) {
    &:after {
      display: none !important;
    }
  }
  // For left and top
  .hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
    &:before {
      display: none !important;
    }
  }
  // For right and bottom
  .hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
    &:after {
      background-color: @color;
    }
  }
  // For left and top
  .hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
    &:before {
      background-color: @color;
    }
  }