.top line,
.right line,
.bottom line,
.corner path {
  stroke: var(--color-border);
  stroke-width: 0.5;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
  stroke-dashoffset: 0;
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
}

.top,
.right,
.bottom,
.corner {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-font-smoothing: antialiased;
  image-rendering: crisp-edges;
}

/* Corners */
.corner {
  position: absolute;
  pointer-events: none;
}

.corner path {
  stroke-width: 1;
}

.corner.top-left {
  top: 0px;
  left: 0px;
}

.corner.top-right {
  top: 0px;
  right: 0px;
}

.corner.bottom-right {
  bottom: 0;
  right: 0;
}

.corner.bottom-right .horizontal {
  opacity: 0;
}

.corner.bottom-left {
  bottom: 0;
  left: 0;
  opacity: 0;
}

.corner.bottom-left .horizontal {
  opacity: 1;
}

/* Lines */
.top,
.right,
.bottom {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

.top {
  top: 0px;
  left: 0;
  width: 100%;
  height: 1px;
}

.right {
  top: 0px;
  right: 0px;
  width: 0.5px;
  height: 100%;
}

.bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5px;
}

.top line,
.right line,
.bottom line {
  opacity: 0;
}

/* Hover */
.group-hover .top line,
.group-hover.last-of-group .right line,
li.show-top-border .top line,
li.show-right-border .right line,
li.is-bottom-row .bottom-right .horizontal,
li.is-bottom-row .bottom,
li.is-bottom-row .bottom-left,
.group-hover.is-bottom-row .bottom line {
  opacity: 1;
}

@supports (-webkit-appearance: none) {
  .right line {
    x: 0;
  }
  .left line {
    x: 0;
  }
}

/* Non Retina display */
@media 
(-webkit-max-device-pixel-ratio: 1.99),
(max-resolution: 191dpi),
(max-resolution: 1.99dppx) {
.top line,
.right line,
.bottom line,
.corner path {
  stroke-width: 1;
}

.right {
  width: 1px;
}

.bottom {
  height: 1px;
}
}