@mixin border-base {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  touch-action: none;
  opacity: 1;
  content: '';
  @content;
}

@mixin border-vertical-base($color) {
  @include border-base {
    left: 0;
    right: 0;
    transform: scaleY(0.5);
    @content;
  }
}

@mixin border-horizontal-base($color) {
  @include border-base {
    top: 0;
    bottom: 0;
    transform: scaleX(0.5);
    @content;
  }
}

@mixin border-top($color) {
  @include border-vertical-base($color) {
    top: 0;
    border-top: 1px solid $color;
    transform-origin: top center;
    @content;
  }
}

@mixin border-bottom($color) {
  @include border-vertical-base($color) {
    bottom: 0;
    border-bottom: 1px solid $color;
    transform-origin: bottom center;
    @content;
  }
}

@mixin border-left($color) {
  @include border-horizontal-base($color) {
    left: 0;
    border-left: 1px solid $color;
    transform-origin: left center;
    @content;
  }
}

@mixin border-right($color) {
  @include border-horizontal-base($color) {
    right: 0;
    border-right: 1px solid $color;
    transform-origin: right center;
    @content;
  }
}

@mixin border-cover-base() {
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  z-index: 1;
  border: 1px solid transparent;
  transform: scale(0.5);
  transform-origin: center;
  pointer-events: none;
  touch-action: none;
  content: '';
  @content;
}

@mixin border-top-right($color) {
  @include border-cover-base;
  border-top-color: $color;
  border-right-color: $color;
  @content;
}

@mixin border-bottom-right($color) {
  @include border-cover-base;
  border-bottom-color: $color;
  border-right-color: $color;
  @content;
}

@mixin border-top-left($color) {
  @include border-cover-base;
  border-top-color: $color;
  border-left-color: $color;
  @content;
}

@mixin border-bottom-left($color) {
  @include border-cover-base;
  border-bottom-color: $color;
  border-left-color: $color;
  @content;
}

@mixin border-horizontal($color) {
  @include border-cover-base;
  border-left-color: $color;
  border-right-color: $color;
  @content;
}

@mixin border-vertical($color) {
  @include border-cover-base;
  border-top-color: $color;
  border-bottom-color: $color;
  @content;
}

@mixin border-lack-top($color) {
  @include border-cover-base;
  border-left-color: $color;
  border-right-color: $color;
  border-bottom-color: $color;
  @content;
}

@mixin border-lack-right($color) {
  @include border-cover-base;
  border-top-color: $color;
  border-bottom-color: $color;
  border-left-color: $color;
  @content;
}

@mixin border-lack-bottom($color) {
  @include border-cover-base;
  border-top-color: $color;
  border-right-color: $color;
  border-left-color: $color;
  @content;
}

@mixin border-lack-left($color) {
  @include border-cover-base;
  border-top-color: $color;
  border-right-color: $color;
  border-bottom-color: $color;
  @content;
}

@mixin border-surround($color) {
  @include border-cover-base;
  border-color: $color;
  @content;
}