@import '../lib/jsmind.css';

.mix(@theme, @sidebar-active-color, @mind-root-node-bg, @mind-node-active-color, @controller-width) {
  :global {
    .@{theme}-knowledge-mind-modal {
      width: 960px;
      height: 600px;
      overflow: hidden;
      padding: 0;
      position: relative;
      .top {
        height: 48px;
        border-bottom: 1px solid #e4e4e4;
        .header {
          height: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding: 0 16px;
          background: white;
          .knowledge-back-btn {
            width: 24px;
            height: 24px;
            cursor: pointer;
            .logo {
              width: 100%;
              height: 100%;
              fill: #85888e;
              &:hover,
              :active {
                fill: #4d4e51;
              }
            }
          }
          .title {
            font-size: 16px;
            color: rgba(0, 0, 0, 0.8);
            line-height: 24px;
            font-weight: bold;
          }
        }
      }
      .left {
        width: 240px;
        height: 552px;
        float: left;
        .sidebar {
          height: 100%;
          padding: 8px 16px;
          .title {
            font-size: 14px;
            color: #919299;
            line-height: 38px;
            margin-bottom: 8px;
            border-bottom: 1px solid #e4e4e4;
          }
          .list {
            padding: 0;
            margin: 0;
            .item {
              height: 48px;
              font-size: 14px;
              line-height: 48px;
              color: rgba(0, 0, 0, 0.8);
              cursor: pointer;
              padding: 0 16px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &:hover,
              &:active {
                background: rgba(0, 0, 0, 0.05);
                border-radius: 8px;
              }
              &.active {
                background: @sidebar-active-color;
                border-radius: 8px;
                color: white;
              }
            }
          }
        }
      }
      .right {
        width: 720px;
        height: 552px;
        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%;
            :global {
              .jsmind-inner {
                width: 100%;
                height: 100%;
                // 不能使用display：flex，好像会导致jsmind坐标计算错误
              }
              /* sugar theme */ /* sugar 即是主题名 */
              /* 节点样式 */
              jmnodes.theme-sugar jmnode {
                text-align: center;
                box-shadow: none;
                padding: 0 12px;
                width: 153px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &.first {
                  height: 48px;
                  background-image: @mind-root-node-bg;
                  border-radius: 24px;
                  font-size: 16px;
                  color: #ffffff;
                  text-align: center;
                  line-height: 48px;
                  font-weight: bold;
                  box-shadow: none;
                  border: none;
                }
                &.second {
                  height: 42px;
                  background: #ffffff;
                  border: 2px solid #dfe4e9;
                  border-radius: 21px;
                  font-size: 12px;
                  color: #49494d;
                  text-align: center;
                  line-height: 38px;
                  font-weight: bold;
                }
                &.third {
                  height: 42px;
                  border: 1px solid #dfe4e9;
                  border-radius: 21px;
                  background: #ffffff;
                  border-radius: 21px;
                  font-size: 12px;
                  color: #49494d;
                  text-align: center;
                  line-height: 40px;
                  &.highlight {
                    color: @mind-node-active-color;
                    border-color: @mind-node-active-color;
                  }
                }
              }
              /* 鼠标悬停的节点样式 */
              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: 12px;
                height: 12px;
                line-height: 10px;
                color: #bec1c5;
                z-index: 1;
                font-weight: bold;
                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: @controller-width;
        height: 40px;
        position: absolute;
        z-index: 1;
        right: 24px;
        bottom: 24px;
        .controller {
          height: 100%;
          background: rgba(0, 0, 0, 0.4);
          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 8px 0 rgba(0, 0, 0, 0.3);
          border-radius: 4px;
          padding: 0 8px;
          display: flex;
          align-items: center;
          flex-direction: row;
          .divide {
            &::after {
              content: '';
              display: block;
              width: 1px;
              height: 24px;
              background: rgba(255, 255, 255, 0.2);
              margin-left: 8px;
              margin-right: 8px;
            }
          }
          .item {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            .slot {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              &.disable {
                .logo {
                  color: rgba(255, 255, 255, 0.4);
                  fill: rgba(255, 255, 255, 0.4);
                }
              }
              &:hover:not(.disable) {
                .logo {
                  color: rgba(255, 255, 255, 1);
                  fill: rgba(255, 255, 255, 1);
                  opacity: 1;
                }
              }
              &:active:not(.disable) {
                background-color: rgba(0, 0, 0, 0.1);
              }
              .logo {
                width: 24px;
                height: 24px;
                color: rgba(255, 255, 255, 0.8);
                fill: rgba(255, 255, 255, 0.8);
              }
            }
          }
        }
      }
    }
  }
}
