.configGraphQueryRoot {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0px;
  z-index: 205;
  background: #fff;

  .main-content {
    position: relative;
    height: calc(100% - 52px);
    width: 100%;

    // 屏蔽掉多余的东西
    .simpleLayoutChangeRoot {
      display: none !important;
    }

    // 屏蔽掉多余的东西
    .info-icon {
      display: none !important;
    }

    // 左侧面板
    .config-box {
      position: relative;
      z-index: 2;
      border-right: 1px solid var(--kw-line-color);

      &::after {
        content: '';
        position: absolute;
        z-index: 20;
        display: inline-block;
        top: 0;
        bottom: 0;
        right: -5px;
        width: 5px;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.01));
      }

      .editDiv {
        width: 100%;
      }

      .open-icon-mask {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
      }

      &.open {
        .sub-title {
          width: calc(100% - 24px * 2);
          height: 40px;
          line-height: 40px;
          margin: 0 24px;
          border-bottom: 1px solid var(--kw-line-color);
        }

        .open-icon-mask {
          margin-right: -14px;
        }
      }

      &.close {
        .open-icon-mask {
          width: 100%;
        }

        .sub-title {
          width: 100%;
        }

        .t-word,
        .scroll-wrap {
          display: none;
        }

        & + .width-drag-line {
          cursor: default;
        }
      }

      .scroll-wrap {
        height: calc(100% - 40px);
        padding: 0 24px 24px;
        overflow-y: auto;
        overflow-y: overlay;
      }
    }

    // 画布
    .canvas-box {
      position: relative;
      z-index: 1;
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    .collapse-icon {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      cursor: pointer;
      height: 20px;
      width: 30px;

      &::after {
        content: '';
        display: inline-block;
        position: absolute;
        bottom: 6px;
        left: 9px;
        height: 2px;
        width: 12px;
        border-radius: 1px;
        background: rgba(0, 0, 0, 0.15);
      }

      &::before {
        content: '';
        display: inline-block;
        position: absolute;
        bottom: 10px;
        left: 9px;
        height: 2px;
        width: 12px;
        border-radius: 1px;
        background: rgba(0, 0, 0, 0.15);
      }
    }

    .width-drag-line {
      position: absolute;
      z-index: 3;
      left: 0;
      right: 0;
      height: 10px;
      background: transparent;
      cursor: row-resize;
    }

    .footer-box {
      width: 100%;
      height: 60px;
      padding: 14px 18px;
      border-top: 1px solid var(--kw-line-color);
      background: #fff;
      text-align: right;

      button {
        // height: 36px;
        margin: 0 6px;
      }
    }

    .graph-analysis-basicInfo,
    .graph-analysis-summary {
      top: 40px;
      height: calc(100% - 40px);
    }

    .canvas-search-tool-multiple-root {
      width: 440px;
      top: 39px;
    }

    .custom-search-tool-res {
      top: 39px;
      height: calc(100% - 39px);
      border-right: 1px solid var(--kw-line-color);
    }
  }
}
