.flow-editor--resize-bar-container {
  position: relative;
  z-index: 10;
  height: 100%;
  width: 100%;

  .flow-editor--resize-bar {
    position: absolute;
    opacity: 0;

    // icon容器
    .flow-editor-resize-bar-icon--icon-container {
      width: 25px;
      border-radius: 4px;
      height: 37px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      border: 1px solid #e8e9ec;
    }
  }

  &:hover {
    .flow-editor--resize-bar {
      opacity: 1;
    }
  }


  // 左侧 resize-bar
  .flow-editor--resize-bar-left {

    // line类型
    &.flow-editor--resize-bar-line,
    &.flow-editor--resize-bar-icon {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      left: -2px;
      cursor: ew-resize;
    }

    // icon类型
    &.flow-editor--resize-bar-icon {
      .flow-editor-resize-bar-icon--icon-container {
        position: absolute;
        left: 0;
        cursor: ew-resize;
        transform: translate(-100%, -50%);
        top: 50%;
        border-right: none;
      }
    }

  }

  // 右侧resize-bar
  .flow-editor--resize-bar-right {

    // line类型
    &.flow-editor--resize-bar-line,
    &.flow-editor--resize-bar-icon {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      right: -2px;
      cursor: ew-resize;
    }

    // icon类型
    &.flow-editor--resize-bar-icon {
      .flow-editor-resize-bar-icon--icon-container {
        position: absolute;
        right: 0;
        cursor: ew-resize;
        transform: translate(100%, -50%);
        top: 50%;
        border-left: none;
      }
    }

  }


  // 顶部resize-bar
  .flow-editor--resize-bar-top {

    // line类型
    &.flow-editor--resize-bar-line,
    &.flow-editor--resize-bar-icon {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      top: -2px;
      cursor: ns-resize
    }

    // icon类型
    &.flow-editor--resize-bar-icon {
      .flow-editor-resize-bar-icon--icon-container {
        position: absolute;
        bottom: -4px;
        cursor: ns-resize;
        border-right: none;
        // 旋转
        transform: translate(-50%, 0) rotate(90deg);
        transform-origin: 50% 50%;
        left: 50%;
      }
    }

  }


  // 底部resize-bar
  .flow-editor--resize-bar-bottom {

    // line类型
    &.flow-editor--resize-bar-line,
    &.flow-editor--resize-bar-icon {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      bottom: -2px;
      cursor: ns-resize
    }

    // icon类型
    &.flow-editor--resize-bar-icon {
      .flow-editor-resize-bar-icon--icon-container {
        position: absolute;
        top: -2px;
        cursor: ns-resize;
        border-left: none;
        // 旋转
        transform: translate(-50%, 0) rotate(90deg);
        transform-origin: 50% 50%;
        left: 50%;
      }
    }

  }

}