.tree-node {
    li {
        cursor: pointer;

        >div {
            padding: .5rem 1rem;
        }

        >div.select {
            border: 1px solid var(--tk-main-50);
            border-radius: var(--tk-rd-12);
        }



        >div.node-wrap {
            @include flex-layout(flex, center, space-between);
            .node,
            .node-name-wrap {
                @include flex-layout(flex, center);
    
                .node-name {
                    @include ellipsis(1);
                }
            }
        }

        >div.node-wrap.selected{
            border: 1px solid var(--tk-main-50);
            border-radius: var(--tk-rd-12);

        }

        .child-node {
            padding-left: 1.5rem;
            border-radius: var(--tk-rd-12);
            // margin-bottom: 1rem;

            .node-wrap.selected{
                background-color: var(--tk-main-10);
                color: var(--tk-main-50);
                font-weight: 700;
            }
        }

        span.bullet{
            width: .5rem;
            height: .5rem;
            background-color: var(--tk-main-40);
            border-radius: 50%;
            margin-right: 1rem;
        }

        &.p-tree{
            padding: .5rem 1rem;
        }

        &.selected{
            border: 1px solid var(--tk-main-50);
            border-radius: var(--tk-rd-12);
        }
    }

}