@ibc: #dcdfe6; // 边框色
@ibl: #ebeef5; // 边框色(轻)
@itc: #314659; // 字体颜色
@icc: rgba(0, 0, 0, 0.45); // 图标颜色
@boxshadowcolor: #f0f1f2; // 阴影颜色
@primary: #409eff; // 基础色
@headcolor: #505050; //头部颜色
@headcolor1: #323233; //头部颜色
@bodycolor: #1e1e1e; //容器底色
@headSize: 60px; // 编辑器头部的高度
@menuSize: 275px; // 编辑器菜单宽度
@operatorSize: 275px; // 右侧操作栏的宽度


.drawerStyle{
  margin-top: @headSize;
}
.reactVisualEditor {
  position: fixed;
  background-color: @headcolor1;
  &::before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(black, 0.1);
    content: '';
  }
  .reactVisualEditorOperator {
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    width: @operatorSize;
    padding: 20px;
    background-color: @headcolor1;
    color:#fff;
    .reactVisualEditorOperatorTitle {
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 20px;
     
    }
  }
  .reactVisualEditorHead {
    z-index: 1000;
    display: flex;
    align-items: center;
    height: @headSize;
    padding-left: 80px;
    background: @headcolor1;
    .reactVisualEditorHeadBtn {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 3px 12px;
      color: #8e8e8e;
      cursor: pointer;
      transition: background-color linear 0.1s;
      user-select: none;

      & > span {
        font-size: 24px;
      }

      // &:not(:last-child) {
      //   &::after {
      //     position: absolute;
      //     top: 0;
      //     right: -0.5px;
      //     bottom: 0;
      //     width: 1px;
      //     background-color: rgba(white, 0.5);
      //     content: '';
      //   }
      // }

      &:hover {
        background-color: @headcolor;
      }

      &:active {
        background-color: mix(@primary, white, 20%);
      }
    }
  }
  .reactVisualEditorBody {
    box-sizing: border-box;
    background-color: @bodycolor;
    .reactVisualEditorContainer {
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        // border: dashed 1px @primary;
        content: '';
        pointer-events: none;
      }
      .reactVisualEditorBlock {
        user-select: none;

        &::after {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          content: '';
        }

        &.reactVisualEditorBlockFocus {
          &::before {
            position: absolute;
            top: -@size;
            right: -@size;
            bottom: -@size;
            left: -@size;
            border: dashed 1px @primary;
            content: '';
            @size: 4px;
          }
        }
        .reactVisualBlockResize {
          position: absolute;
          @offset: 8px;
          @size: 6px;
          &.reactVisualBlockResizeTopLeft,
          &.reactVisualBlockResizeTop,
          &.reactVisualBlockResizeTopRight,
          &.reactVisualBlockResizeLeft,
          &.reactVisualBlockResizeRight,
          &.reactVisualBlockResizeBottomLeft,
          &.reactVisualBlockResizeBottom,
          &.reactVisualBlockResizeBottomRight {
            top: -@offset;
            right: -@offset;
            bottom: -@offset;
            left: -@offset;
            width: @size;
            height: @size;
            background-color: @primary;

            &.reactVisualBlockResizeTopLeft {
              right: auto;
              bottom: auto;
              cursor: nw-resize;
            }

            &.reactVisualBlockResizeTop {
              right: auto;
              bottom: auto;
              left: calc(50% - (@size / 2));
              cursor: n-resize;
            }

            &.reactVisualBlockResizeTopRight {
              bottom: auto;
              left: auto;
              cursor: ne-resize;
            }

            &.reactVisualBlockResizeLeft {
              top: calc(50% - (@size / 2));
              right: auto;
              bottom: auto;
              cursor: w-resize;
            }

            &.reactVisualBlockResizeRight {
              top: calc(50% - (@size / 2));
              bottom: auto;
              left: auto;
              cursor: e-resize;
            }

            &.reactVisualBlockResizeBottomLeft {
              top: auto;
              right: auto;
              cursor: sw-resize;
            }

            &.reactVisualBlockResizeBottom {
              top: auto;
              right: auto;
              left: calc(50% - (@size / 2));
              cursor: s-resize;
            }

            &.reactVisualBlockResizeBottomRight {
              top: auto;
              left: auto;
              cursor: se-resize;
            }
          }
        }
      }
    }
  }
}
.reactVisualEditorMenu {
  box-sizing: border-box;
  height: 100%;
  padding: 20px;
  color: #fff;
  background: @headcolor1;
  :global {
    .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
      color: #fff;
      font-size: 18px;
    }
  }
  .reactVisualEditorMenuItem {
    position: relative;
    margin-bottom: 20px;
    padding: 40px 16px 20px 16px;
    text-align: center;
    border: solid 2px @ibc;

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: '';
    }

    &:hover {
      border-color: @primary;
      cursor: move;
    }

    .reactVisualEditorMenuItemName {
      position: absolute;
      top: -2px;
      left: -2px;
      padding: 0 20px;
      color: white;
      font-size: 12px;
      line-height: 2em;
      background-color: @primary;
    }
  }
}
.reactVisualEditorPreview {
  .reactVisualEditorBody {
    .reactVisualEditorContainer {
      &::before {
        display: none;
      }

      .reactVisualEditorBlock {
        user-select: auto;

        &::after {
          display: none;
        }
      }
    }
  }
}

&:not(.reactVisualEditorPreview) {
  .reactVisualEditorBlock {
    & > * {
      transition: none;
    }
  }
}
.reactVisualEditorBlock {
  position: absolute;
}
.reactVisualEditorContainer {
  position: relative;

  .reactVisualContainerEditButton {
    position: absolute;
    top: 20px;
    left: 400px;
    z-index: 1000;
    padding: 5px 12px;
    color: @itc;
    border: dashed 1px @primary;
    cursor: pointer;
    .iconfont {
      color: @icc;
    }

    &:hover {
      background-color: #f2f2f2;
    }
  }
}

.reactVisualEditorMarkY,
.reactVisualEditorMarkX {
  position: absolute;

  &.reactVisualEditorMarkX {
    top: 0;
    bottom: 0;
    left: 20px;
    border-left: dashed 1px @primary;
  }

  &.reactVisualEditorMarkY {
    top: 20px;
    right: 0;
    left: 0;
    border-top: dashed 1px @primary;
  }
}