.magic-editor-layer-panel {
  $--node-height: 22px;

  background: $--sidebar-content-background-color;

  .magic-editor-layer-tree {
    padding-top: 48px;
    background-color: $--sidebar-content-background-color;
    color: $--font-color;
    font-size: 13px;

    .magic-editor-layer-node {
      cursor: pointer;
      white-space: nowrap;

      .layer-node {
        display: flex;
        align-items: center;

        &:hover {
          background-color: $--hover-color;
          color: $--font-color;
        }

        &.selected {
          background-color: $--theme-color;
          color: $--hover-color;
        }

        &.drag-inner {
          .layer-node-content {
            background-color: rgba($color: $--theme-color, $alpha: 0.5);
            color: $--hover-color;
          }
        }

        &.drag-before {
          .layer-node-content {
            border-top-color: rgba($color: $--theme-color, $alpha: 0.5);
          }
        }

        &.drag-after {
          .layer-node-content {
            border-bottom-color: rgba($color: $--theme-color, $alpha: 0.5);
          }
        }

        .expand-icon {
          padding: 4px;
          box-sizing: content-box;
          font-size: 14px;
        }

        .layer-node-content {
          display: flex;
          flex: 1;
          justify-content: space-between;
          height: $--node-height;
          border-top: 2px solid transparent;
          border-bottom: 2px solid transparent;
          .layer-node-label {
            line-height: $--node-height;
            flex: 1;
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .layer-node-tool {
          margin-right: 15px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
