[class*="v-bd-"] {
  position: relative;
  &:before,
  &:after {
    content: "";
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    border: 0 solid var(--border);
  }
}

.v-bd-top,
.v-bd-bottom,
.v-bd-top-bottom {
  &:before,
  &:after {
    left: 0;
    width: 100%;
  }
  &:before {
    transform-origin: left top;
  }
  &:after {
    transform-origin: left bottom;
  }
}

.v-bd-left,
.v-bd-right,
.v-bd-left-right {
  &:before,
  &:after {
    top: 0;
    height: 100%;
    transform-origin: left top;
  }
}

.v-bd-top {
  &:before {
    top: 0;
    border-top-width: 1px; /*no*/
  }
  &:after {
    display: none;
  }
}

.v-bd-bottom {
  &:before {
    display: none;
  }
  &:after {
    bottom: 0;
    border-bottom-width: 1px; /*no*/
  }
}

.v-bd-top-bottom {
  &:before {
    top: 0;
    border-top-width: 1px; /*no*/
  }
  &:after {
    bottom: 0;
    border-bottom-width: 1px; /*no*/
  }
}

.v-bd-left {
  &:before {
    left: 0;
    border-left-width: 1px; /*no*/
  }
  &:after {
    display: none;
  }
}

.v-bd-right {
  &:before {
    display: none;
  }
  &:after {
    right: 0;
    border-right-width: 1px; /*no*/
  }
}

.v-bd-left-right {
  &:before {
    left: 0;
    border-left-width: 1px; /*no*/
  }
  &:after {
    right: 0;
    border-right-width: 1px; /*no*/
  }
}
.v-bd-full {
  &:after {
    border-width: 1px; /*no*/
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .v-bd-top,
  .v-bd-bottom,
  .v-bd-top-bottom {
    &:after,
    &:before {
      transform: scaleY(0.666666);
    }
  }
  .v-bd-left,
  .v-bd-right,
  .v-bd-left-right {
    &:after,
    &:before {
      transform: scaleX(0.666666);
    }
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .v-bd-top,
  .v-bd-bottom,
  .v-bd-top-bottom {
    &:after,
    &:before {
      transform: scaleY(0.5);
    }
  }
  .v-bd-left,
  .v-bd-right,
  .v-bd-left-right {
    &:after,
    &:before {
      transform: scaleX(0.5);
    }
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .v-bd-top,
  .v-bd-bottom,
  .v-bd-top-bottom {
    &:after,
    &:before {
      transform: scaleY(0.333333);
    }
  }
  .v-bd-left,
  .v-bd-right,
  .v-bd-left-right {
    &:after,
    &:before {
      transform: scaleX(0.333333);
    }
  }
}