@import '../../style/theme/default.less';
@import './token.less';

@resizebox-prefix-cls: ~'@{prefix}-resizebox';
@resizebox-split-prefix-cls: ~'@{prefix}-resizebox-split';
@resizebox-split-group-prefix-cls: ~'@{prefix}-resizebox-split-group';
@resizebox-trigger-prefix-cls: ~'@{resizebox-prefix-cls}-trigger';

.@{resizebox-prefix-cls} {
  position: relative;
  width: 100%;
  overflow: hidden;

  &-direction-left,
  &-direction-right,
  &-direction-top,
  &-direction-bottom {
    position: absolute;
    left: 0;
    top: 0;
    user-select: none;
    box-sizing: border-box;
  }

  &-direction-right {
    left: unset;
    right: 0;
  }

  &-direction-bottom {
    top: unset;
    bottom: 0;
  }

  &-split,
  &-split-group {
    display: flex;
    user-select: auto;

    .@{resizebox-prefix-cls}-slit-trigger {
      flex: 0;
    }

    &-pane {
      overflow: auto;
    }

    .second-pane {
      flex: 1;
    }

    &-horizontal {
      flex-direction: row;
    }

    &-vertical {
      flex-direction: column;
    }

    &-moving {
      user-select: none;
    }
  }
}

// 伸缩触发杆
.@{resizebox-trigger-prefix-cls} {
  &-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: @resizeBox-trigger-color-background;
  }

  &-icon {
    display: inline-block;
    color: @resizeBox-trigger-color-icon;
    font-size: @resizeBox-trigger-font-size-icon;
  }

  &-prev,
  &-next {
    > svg {
      cursor: pointer;
    }
  }

  &-vertical {
    height: 100%;
    cursor: col-resize;

    &.@{resizebox-trigger-prefix-cls}-not-resizable {
      cursor: default;
    }

    .@{resizebox-trigger-prefix-cls}-prev,
    .@{resizebox-trigger-prefix-cls}-next {
      height: @resizeBox-trigger-icon-empty;
      line-height: @resizeBox-trigger-icon-empty;
    }

    .@{resizebox-trigger-prefix-cls}-icon-wrapper {
      width: @resizeBox-trigger-size-icon-wrapper;
      flex-direction: column;
    }

    .@{resizebox-trigger-prefix-cls}-icon-empty {
      height: @resizeBox-trigger-icon-empty;
      width: 100%;
    }
  }

  &-horizontal {
    width: 100%;
    cursor: row-resize;

    &.@{resizebox-trigger-prefix-cls}-not-resizable {
      cursor: default;
    }

    .@{resizebox-trigger-prefix-cls}-prev,
    .@{resizebox-trigger-prefix-cls}-next {
      width: @resizeBox-trigger-icon-empty;
      text-align: center;
    }

    .@{resizebox-trigger-prefix-cls}-icon-wrapper {
      height: @resizeBox-trigger-size-icon-wrapper;

      .@{prefix}-icon {
        vertical-align: -1px;
      }
    }

    .@{resizebox-trigger-prefix-cls}-icon-empty {
      width: @resizeBox-trigger-icon-empty;
      height: 100%;
    }
  }
}

.@{resizebox-prefix-cls}-rtl,
.@{resizebox-split-prefix-cls}-rtl,
.@{resizebox-split-group-prefix-cls}-rtl,
.@{resizebox-trigger-prefix-cls}-rtl {
  direction: rtl;
}