@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'mixins/flex' as *;

@include b(resizebox) {
  position: relative;
  width: 100%;
  overflow: hidden;

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

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

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

// 伸缩触发杆
@include b(resizebox-trigger) {
  &-icon-wrapper {
    @include flex-center;


    height: 100%;
    color: #666;
    font-size: 12px;
    line-height: 1;
    background-color: #e5e6eb;
  }

  &-icon {
    display: inline-block;
    margin: -3px;
  }

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

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