@import "effects";

vn-treeview-childs {
    display: block;

    ul {
        padding: 0;
        margin: 0;

        li {
            list-style: none;

            & > .node {
                @extend %clickable;
                display: flex;
                padding: 5px;
                align-items: center;
            }

            & > div > .arrow {
                min-width: 24px;
                margin-right: 10px;
                transition: transform 200ms;
            }

            & > div.expanded > .arrow {
                transform: rotate(180deg);
            }
            ul {
                padding-left: 2.2em;
            }
        }
    }

    vn-icon-button {
        display: table-cell;
        vertical-align: middle;
        padding: 0;
    }

    .node > .buttons {
        display: none
    }

    .node:hover > .buttons {
        display: block
    }
}

vn-treeview-content {
    flex-grow: 1
}