:global {
  .android-knowledge-mind-modal {
    height: 1164px;
    width: 1920px;
    overflow: hidden;
    position: relative;
    transform-origin: left top;
    .top {
      height: 96px;
      border-bottom: 1px solid #e4e4e4;
      .header {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 60px;
        background: white;
        .knowledge-back-btn {
          width: 48px;
          height: 48px;
          cursor: pointer;
          .logo {
            width: 100%;
            height: 100%;
          }
        }
        .title {
          font-size: 32px;
          color: #49494d;
          line-height: 48px;
          font-weight: bold;
        }
        .save-btn {
          font-size: 30px;
          color: #616266;
          text-align: center;
          line-height: 30px;
          cursor: pointer;
        }
      }
    }
    .left {
      width: 480px;
      height: 1068px;
      float: left;
      .sidebar {
        height: 100%;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        .title {
          width: calc(100% - 120px);
          font-size: 24px;
          color: #919299;
          line-height: 36px;
          margin-bottom: 36px;
          border-bottom: 1px solid #e4e4e4;
          margin-top: 216px;
        }
        .list {
          width: 100%;
          padding: 0;
          margin: 0;
          .item {
            width: 100%;
            height: 120px;
            font-size: 32px;
            line-height: 120px;
            color: rgba(0, 0, 0, 0.8);
            cursor: pointer;
            padding: 0 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
            &:hover,
            &:active {
            }
            &.active {
              color: #ffab30;
              &::before {
                content: '';
                display: block;
                width: 8px;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background: #ffab30;
              }
            }
          }
        }
      }
    }
    .right {
      width: 1440px;
      height: 1068px;
      float: left;
      position: relative;
      z-index: 0;
      overflow: hidden;
      background-image: linear-gradient(0deg, #fcfcfc 0%, #f8f8f8 100%);
      user-select: none;

      .mind-container {
        height: 100%;

        .mind {
          height: 100%;

          .jsmind-inner {
            width: 100%;
            height: 100%;
            // 不能使用display：flex，好像会导致jsmind坐标计算错误
          }
          /* sugar theme */ /* sugar 即是主题名 */
          /* 节点样式 */
          jmnodes.theme-sugar jmnode {
            background: #ffffff;
            border: 2px solid #dfe4e9;
            padding: 24px;
            box-shadow: none;
            width: 306px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.first {
              height: 96px;
              background-image: linear-gradient(90deg, #ffb74f 2%, #ff972f 100%);
              border-radius: 48px;
              font-size: 32px;
              line-height: 48px;
              color: #ffffff;
              text-align: center;
              font-weight: bold;
              box-shadow: none;
              border: none;
            }
            &.second {
              height: 84px;
              background: #ffffff;
              border: 2px solid #dfe4e9;
              border-radius: 42px;
              font-size: 24px;
              color: #49494d;
              text-align: center;
              line-height: 36px;
              font-weight: bold;
            }
            &.third {
              height: 84px;
              border: 1px solid #dfe4e9;
              border-radius: 21px;
              background: #ffffff;
              border-radius: 42px;
              font-size: 24px;
              color: #49494d;
              text-align: center;
              line-height: 36px;
              &.highlight {
                color: #ffab30;
                border-color: #ffab30;
              }
            }
          }
          /* 鼠标悬停的节点样式 */
          jmnodes.theme-sugar jmnode:hover {
            background-color: #fff;
          }
          /* 选中的节点样式 */
          jmnodes.theme-sugar jmnode.selected {
            background-color: #fff;
          }
          /* 根节点样式 */
          jmnodes.theme-sugar jmnode.root {
          }
          /* 控制点样式 */
          jmnodes.theme-sugar jmexpander {
            width: 24px;
            height: 24px;
            font-size: 24px;
            color: #bec1c5;
            text-align: center;
            line-height: 16px;
            z-index: 1;
            border: 1px solid #dfe4e9;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02), 0 0 4px 0 rgba(0, 0, 0, 0.1);
          }
          /* 鼠标悬停展开/关闭节点的控制点样式 */
          jmnodes.theme-sugar jmexpander:hover {
          }
        }
      }
    }
    .right-bottom {
      width: 240px;
      height: 100px;
      position: absolute;
      z-index: 1;
      right: 60px;
      bottom: 60px;
      .controller {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        padding: 0px;
        margin: 0px;
        .item {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(0, 0, 0, 0.6);
          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 12px 0 rgba(0, 0, 0, 0.15);
          overflow: hidden;
          .slot {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            &.disable {
              .logo {
                color: rgba(255, 255, 255, 0.4);
              }
            }
            &:hover:not(.disable) {
              .logo {
                color: rgba(255, 255, 255, 1);
              }
            }
            &:active:not(.disable) {
              background-color: rgba(0, 0, 0, 0.1);
            }
            .logo {
              width: 48px;
              height: 48px;
              color: rgba(255, 255, 255, 0.8);
            }
          }
        }
      }
    }
  }
}
