.magic-editor-layer-panel {
  background: $--sidebar-content-background-color;

  .search-input {
    background: $--sidebar-content-background-color;
    color: #bbbbbb;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    .el-input__suffix {
      padding: 10px 5px;
    }
  }
  .node-content {
    flex: 1;
    display: flex;
    width: 100%;
    > div {
      width: 8px;
    }
    > span {
      width: calc(100% - 68px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    > i {
      margin-right: 10px;
      font-size: 20px;
      &.lock {
        color: #bbb;
      }
    }
  }
}
.magic-editor-layer-panel,
.magic-editor-layer-panel .el-tree {
  background-color: $--sidebar-content-background-color;
  color: #313a40;
}

.magic-editor-layer-panel
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: $--sidebar-heder-background-color;
  color: #fff;
}

.magic-editor-layer-panel .cus-tree-node {
  width: 100%;
  overflow: hidden;
}

.magic-editor-layer-panel .cus-tree-node-hover {
  background-color: $--hover-color;
  width: 100%;
}

.magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {
  background-color: $--sidebar-heder-background-color;
  color: #fff;
}
.ui-tree-tip {
  width: 100%;
  height: 25px;
  margin-left: 10px;
  background: $--sidebar-content-background-color;
  font-style: italic;
  color: #555554;
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 1;
}