@import './../theme/vars.scss';

$splitPanePrefix: #{$vender-prefix}-splitpane;

$sepratorColor: #d5d5d5;
$sepratorColor-active: #b5b5b5;
$sepratorColor-resizing: #8e8e8e;

.#{$splitPanePrefix} {
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow: hidden;

  &-panel {
    position: relative;
    flex: 0 0 auto;
    overflow: auto;

    &.#{$splitPanePrefix}-panel-main {
      flex: 1 1 auto;
    }
  }

  > .#{$splitPanePrefix}-separator {
    flex: 0 0 auto;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background-color: $sepratorColor;
  }

  &-separator {
    &:hover {
      background-color: $sepratorColor-active;
    }
  }

  &.#{$splitPanePrefix}-resizing {
    cursor: col-resize;

    > .#{$splitPanePrefix}-separator {
      background-color: $sepratorColor-resizing;
    }
  }

  // 拖动时，禁用子面板事件
  &.#{$splitPanePrefix}-preventevt.#{$splitPanePrefix}-resizing {
    .#{$splitPanePrefix}-panel {
      pointer-events: none;
    }
  }

  &.#{$splitPanePrefix}-vertical {
    flex-direction: column;

    > .#{$splitPanePrefix}-separator {
      width: 100%;
      height: 4px;
      cursor: row-resize;
    }

    &.#{$splitPanePrefix}-resizing {
      cursor: row-resize;
    }
  }
}