@include b(split-pane) {
  height: 100%;
  position: relative;

  @include e(left) {
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;

    @include when(horizontal) {
      left: 0;
    }

    @include when(vertical) {
      top: 0;
    }
  }

  @include e(right) {
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;

    @include when(horizontal) {
      right: 0;
    }

    @include when(vertical) {
      bottom: 0;
    }
  }

  @include e(resizer) {
    box-sizing: border-box;
    background: $workbench-color-primary-light-6;
    border: 1px solid $workbench-color-border-base;
    position: absolute;
    z-index: 1;

    @include when(horizontal) {
      width: 6px;
      height: 100%;
      transform: translateX(-50%);
      border-top: none;
      border-bottom: none;

      .icon {
        color: $workbench-color-primary;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
      }
    }

    @include when(vertical) {
      height: 6px;
      width: 100%;
      transform: translateY(-50%);
      border-left: none;
      border-right: none;

      .icon {
        color: rgba(23, 35, 61, 0.25);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  @include e(line) {
    position: absolute;
    background: $workbench-color-border-base;
    z-index: 1;

    &:hover {
      background: $workbench-hover-color !important;

      @include when(horizontal) {
        width: 4px;
      }

      @include when(vertical) {
        height: 4px;
      }
    }

    &.noneBg {
      background: none;
    }

    @include when(horizontal) {
      width: 1px;
      height: 100%;
    }

    @include when(vertical) {
      height: 1px;
      width: 100%;
    }
  }

  .is-resizable {
    @include when(horizontal) {
      cursor: col-resize;
    }

    @include when(vertical) {
      cursor: row-resize;
    }
  }
}