@import "../common/mixins.scss";
@import "../common/variables.scss";

@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: #f8f8f9;
    border: 1px solid #dcdee2;
    position: absolute;
    z-index: 1;

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

      .icon {
        color: rgba(23, 35, 61, .25);
        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, .25);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

  }

  @include e(line) {
    position: absolute;
    background: #dcdee2;
    z-index: 1;

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

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

  .is-resizable {
    &.hover {
      background: $--color-primary-light-9;
    }

    @include when(horizontal) {
      cursor: col-resize;

    }

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