/**
 * 默认主题下 $color-border-light
 */

@mixin hairline-common() {
  content: '';
  position: absolute;
  transform-origin: center;
  box-sizing: border-box;
  pointer-events: none;
}

@mixin hairline-base($color: $color-border-light, $style: solid) {
  @include hairline-common();

  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  border: 0 $style $color;
  transform: scale(0.5);
}

@mixin hairline-surround($color: $color-border-light, $style: solid, $width: $border-width-md) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-width: $width;
  }
}

@mixin hairline-top($color: $color-border-light, $style: solid, $width: $border-width-md) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-top-width: $width;
  }
}

@mixin hairline-bottom($color: $color-border-light, $style: solid, $width: $border-width-md) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-bottom-width: $width;
  }
}

@mixin hairline-left($color: $color-border-light, $style: solid, $width: $border-width-md) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-left-width: $width;
  }
}

@mixin hairline-right($color: $color-border-light, $style: solid, $width: $border-width-md) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-right-width: $width;
  }
}

@mixin hairline-top-bottom($color: $color-border-light, $style: solid, $width: $border-width-md) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-top-width: $width;
    border-bottom-width: $width;
  }
}

@mixin hairline-bottom-relative($color: $color-border-light, $style: solid, $width: $border-width-md, $left: 0) {
  position: relative;

  &::after {
    @include hairline-common();

    top: auto;
    left: $left;
    right: 0;
    bottom: 0;
    transform: scaleY(0.5);
    border-bottom: $width $style $color;
  }
}

@mixin hairline-top-relative($color: $color-border-light, $style: solid, $width: $border-width-md, $left: 0) {
  position: relative;

  &::before {
    @include hairline-common();

    top: 0;
    left: $left;
    right: 0;
    bottom: auto;
    transform: scaleY(0.5);
    border-top: $width $style $color;
  }
}

@mixin hairline-left-relative($color: $color-border-light, $style: solid, $width: $border-width-md, $top: 0) {
  position: relative;

  &::after {
    @include hairline-common();

    top: $top;
    left: 0;
    right: auto;
    bottom: 0;
    transform: scaleX(0.5);
    border-left: $width $style $color;
  }
}

@mixin hairline-right-relative($color: $color-border-light, $style: solid, $width: $border-width-md, $top: 0) {
  position: relative;

  &::after {
    @include hairline-common();

    top: $top;
    left: auto;
    right: 0;
    bottom: 0;
    transform: scaleX(0.5);
    border-right: $width $style $color;
  }
}

@mixin hairline-remove($position) {
  @if ($position == 'left') {
    border-left: 0;
  }
  @if ($position == 'right') {
    border-right: 0;
  }
  @if ($position == 'top') {
    border-top: 0;
  }
  @if ($position == 'bottom') {
    border-bottom: 0;
  }
  @if ($position == 'all') {
    border: 0;
  }

  &::before {
    display: none !important;
  }
}