@import '../../../style/mixins/index';

@splitter-prefix-cls: ~'@{vts-prefix}-splitter';

.@{splitter-prefix-cls} {
  display: flex;
  flex-wrap: nowrap;

  &-vertical {
    flex-direction: column;
  }

  &-panel {
    flex-grow: 1;
  }

  &-panel-nested {
    display: flex;
  }

  &-panel @{splitter-prefix-cls} {
    flex-grow: 1;
  }

  &-panel & {
    flex-grow: 1;
    border: 0 none;
  }

  &-gutter {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    background: @splitter-gutter-bg;

    &:hover,
    &&-resizing {
      background: @splitter-gutter-active-bg;
    }

    &-handle {
      background: @splitter-handle-bg;
    }

    &:hover &-handle,
    &&-resizing &-handle {
      background: @splitter-handle-active-bg;
    }
  }

  &-horizontal&-resizing {
    cursor: col-resize;
    user-select: none;
  }

  &-horizontal>&-gutter>&-gutter-handle {
    height: 24px;
    width: 100%;
  }

  &-horizontal>&-gutter {
    cursor: col-resize;
  }

  &-vertical&-resizing {
    cursor: row-resize;
    user-select: none;
  }

  &-vertical>&-gutter {
    cursor: row-resize;
  }

  &-vertical>&-gutter>&-gutter-handle {
    width: 24px;
    height: 100%;
  }
}