.yee-query-header() {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  position: absolute;
  top: 0;
  padding: 10px 16px;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 99;

  .title {
    font-size: 16px;
    font-family:
      PingFangSC-Semibold,
      PingFang SC;
    font-weight: 600;
    color: #333333;
  }
}

.yee-query-class-wrap {
  height: 100%;
  position: relative;

  & > .header {
    .yee-query-header();
  }
  .tab {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    background-color: rgba(242, 242, 242, 1);

    .tab-item {
      flex: 1;
      width: 33%;
      text-align: center;
      padding: 10px;
      cursor: pointer;
      color: #333;
    }
    .active {
      background: #fff;
      color: @yee-primary-color;
    }
  }
}

.yee-query-class-content {
  padding-top: 56px;
  height: 100%;

  .search {
    padding: 16px;
  }
}

.yee-query-class-list {
  height: calc(100% - 106px);
  overflow-y: auto;

  .query-row {
    position: relative;
    padding: 0 16px;
    cursor: pointer;

    .query-icon {
      width: 18px;
      height: 18px;
      font-size: 0;
    }

    .query-name {
      width: 100%;
      padding-right: 40px;
      height: 44px;
      line-height: 20px;
      user-select: text;

      span {
        padding-left: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .right-btn {
      display: inline-block;
      position: absolute;
      right: 16px;
    }
    &:hover {
      background: rgba(0, 0, 0, 0.04);
    }
    &.bg-select {
      background: rgba(0, 0, 0, 0.04);
      color: @yee-primary-color;
    }
  }
}

.yee-query-panel-wrap {
  .yee-drawer-content,
  .yee-drawer-wrapper-body,
  .yee-drawer-body {
    overflow: hidden !important;
  }
  .yee-drawer-content-wrapper {
    width: calc(100vw - 604px) !important;
    box-shadow: none !important;
    border-left: 1px solid #e8e8e8 !important;
    border-right: 1px solid #e8e8e8 !important;

    & .header {
      .yee-query-header();

      .title-tips {
        height: 14px;
        margin-right: 16px;
        font-size: 12px;
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
        line-height: 14px;
      }
    }

    .query-definition-panel {
      margin-top: 58px;
      height: 100%;
      overflow: hidden;
    }

    .query-definition-header {
      height: 100%;
      padding: 0 16px;
    }

    .yee-tabs-content {
      height: calc(100% - 120px);
      .yee-tabs-tabpane {
        overflow-y: auto;

        .query-header-content,
        .query-body-content,
        .query-param-content {
          height: calc(100vh - 220px);

          .query-bulk-editor,
          .raw-json-editor {
            height: calc(100% - 40px);
          }

          .raw-json-editor {
            .CodeMirror {
              height: 100%;
            }
          }
        }
      }

      .query-manager-container,
      .advanced-manager-container {
        padding: 0px;
        .query-url-content {
          margin-top: 0;
        }

        .advanced-manager-event-tabs {
          margin-top: 8px;

          .yee-tabs-bar {
            margin-bottom: 8px;
          }
        }
      }
    }
  }
}