:host {
    display: block;
    margin: .3rem 0;
    color: var(--oi-tree-node-color, black);

    .node {
        position: relative;

        .element {
            display: flex;
            align-items: center;
            user-select: none;
            cursor: pointer;
            position: relative;
            align-items: center;
            font: var(--oi-tree-node-font);

            .label {
                display: inline-block;
            }


            .expander-wrap {
                width: 1.2rem;
                align-items: center;
                display: flex;

                >oi-icon {
                    display: flex;
                    transition: transform .35s ease;
                }
            }

            &:hover {
                background-color: var(--oi-tree-node-hover-bgcolor, #cfe2ff);
                color: var(--oi-tree-node-hover-color, black);
                --oi-tree-node-expander-wrap-color: black;

            }

            &.selected {
                background-color: var(--oi-tree-node-selected-bgcolor, #9ec5fe);
                color: var(--oi-tree-node-selected-color, black)
            }

            oi-loading {
                position: absolute;
                transform: scale(0.8);
                transform-origin: left top;
            }

            input[type=checkbox],
            input[type=radio] {
                width: 1rem;
                height: 1rem;
                vertical-align: top;
            }

            .checkbox-placeholder {
                display: inline-block;
                width: 1rem;
                margin: 3px;
            }

            .radio-placeholder {
                display: inline-block;
                width: 1rem;
                margin: 3px;
            }



        }

        .children {
            display: none;

            // &.sortable:hover {
            //     border: solid 1px #cfe2ff;
            // }
        }

        &.hover {
            .children.empty {
                display: block;
                height: 2em;
                border: #cfe2ff 1px dotted;
            }
        }

        &.expanded {
            .expander-wrap {
                >oi-icon {
                    transform: rotate(90deg);
                    transform-origin: center center;
                }


            }

            .children {
                display: block;
            }
        }
    }
}

:host(.sortable-ghost) {
    //防止父节点插入子节点
    pointer-events: none;
}

:host(.sortable-drag) {
    border: dotted 1px #9ec5fe;
}