@import "mixins/mixins";
@import "common/var";

.el-splitpanes {
  display: flex;
  width: 100%;
  height: 100%;
  &--vertical {
    flex-direction: row;
  }
  &--horizontal {
    flex-direction: column;
  }
  &--dragging * {
    user-select: none;
  }
  &__pane {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .splitpanes--dragging & {
      transition: none;
    }
  }
  // Disable default zoom behavior on touch device when double tapping splitter.
  &__splitter {
    touch-action: none;
  }
  &--vertical > .el-splitpanes__splitter {
    min-width: 1px;
    cursor: col-resize;
  }
  &--horizontal > .el-splitpanes__splitter {
    min-height: 1px;
    cursor: row-resize;
  }
}
.el-splitpanes {
  .el-splitpanes__pane {
    background-color: transparent;
  }
  .el-splitpanes__splitter {
    transition: $--all-transition;
    background-color: $--splitter-background-color;
    box-sizing: border-box;
    position: relative;
    &:before {
      transition: $--all-transition;
      content: "";
      position: absolute;
      top: calc(50% - 15px);
      left: calc(50% - 15px);
      background-color: rgba(0, 0, 0, 0.15);
      transition: background-color 0.3s;
    }
    &:hover{
      background-color: $--splitter-hover-background-color;
    }
    &:first-child {
      cursor: auto;
    }
  }
}
.el-splitpanes {
  &.el-splitpanes__splitter {
    z-index: 1;
  }
  &.el-splitpanes--vertical > .el-splitpanes__splitter,
  .el-splitpanes--vertical > .el-splitpanes__splitter {
    width: $--splitter-size;
    border-left: none;
    &:before {
      left: 2px;
      width: 1px;
      height: $--splitter-handle-size;
    }
  }
  &.el-splitpanes--horizontal > .el-splitpanes__splitter,
  .el-splitpanes--horizontal > .el-splitpanes__splitter {
    height: $--splitter-size;
    border-top: none;
    &:before {
      top: 2px;
      width: $--splitter-handle-size;
      height: 1px;
    }
  }
}