.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;
    }
  }


  .flow-editor--resize-bar-left,
  .flow-editor--resize-bar-right {
    &.flow-editor--resize-bar-icon,
    &.flow-editor--resize-bar-line{
      position: absolute;
      top: 0;
      bottom: 0;
      cursor: ew-resize;
    }
    &.flow-editor--resize-bar-line {
      width: 10px;
      opacity: 0;
      top: 0;
      bottom: 0;
      z-index: 10000;
      &:hover,&.flow-editor--resize-bar-line-dragging {
        // border-radius: 20px;
        background-color: #d9d9d9;
        transition: opacity 0.5s ease;
        opacity: 1;
      }
    }
    &.flow-editor--resize-bar-icon {
      width: 4px;
    }
  }
  // 左侧 resize-bar
  .flow-editor--resize-bar-left {
    &.flow-editor--resize-bar-line {
      left: -5px;
    }
    // icon类型
    &.flow-editor--resize-bar-icon {
      left: 0px;
      .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{
      right: -5px;
    }
    // icon类型
    &.flow-editor--resize-bar-icon {
      right: 0px;
      .flow-editor-resize-bar-icon--icon-container {
        position: absolute;
        right: 0;
        cursor: ew-resize;
        transform: translate(100%, -50%);
        top: 50%;
        border-left: none;
      }
    }

  }


  .flow-editor--resize-bar-top,
  .flow-editor--resize-bar-bottom {
    &.flow-editor--resize-bar-line,
    &.flow-editor--resize-bar-icon {
      position: absolute;
      left: 0;
      right: 0;
      cursor: ns-resize
    }
    &.flow-editor--resize-bar-line {
      z-index: 10000;
      height: 10px;
      opacity: 0;
      &:hover,&.flow-editor--resize-bar-line-dragging {
        // border-radius: 20px;
        background-color: #d9d9d9;
        transition: opacity 0.5s ease;
        opacity: 1;
      }
    }
    &.flow-editor--resize-bar-icon {
      height: 4px;
    }
  }


  // 顶部resize-bar
  .flow-editor--resize-bar-top {
    &.flow-editor--resize-bar-icon {
      top: 0; 
    }
    &.flow-editor--resize-bar-line {
      top: -5px; 
    }
    // 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{
      bottom: -5px;
    }
    &.flow-editor--resize-bar-icon {
      bottom: 0;
    }

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

  }

}