.TableResizer {
  --inner-line-width: 1px;
  --fast-transition: 0.15s ease-out;
  position: absolute;
  z-index: var(--resizer-z);
  top: 0;
  right: 0;
  width: var(--resizer-width);
  background-color: var(--color-bg-ghost);
  opacity: 0;
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: opacity var(--fast-transition);
  transition: opacity var(--fast-transition);
}

  .TableResizer::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: calc((var(--resizer-width) - var(--inner-line-width))/2);
    bottom: 0;
    width: var(--inner-line-width);
    background-color: var(--color-bg-link);
  }

  .TableResizer:hover,
  .TableResizer:focus,
  .TableResizer_isDragging {
    opacity: 1;
  }

  .TableResizer:not(.TableResizer_isVisible) {
    visibility: hidden;
    pointer-events: none;
  }