@import "effects";

vn-treeview-childs {
    display: block;

    ul {
        padding: 0;
        margin: 0;

        li {
            list-style: none;

            ul {
                padding-left: 35px;
            }
        }
    }

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

    .node > .buttons {
        display: none
    }

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

    .content {
        flex-grow: 1
    }
}

vn-treeview-child {
    line-height: 38px;
    font-size: 1rem;
    display: block;

    .node {
        @extend %clickable;
        display: flex;
        padding: 2px;
        align-items: center;
    }
    & > div > .arrow {
        min-width: 24px;
        margin-right: 10px;
        transition: transform 200ms;
    }
    &.expanded > div > .arrow {
        transform: rotate(180deg);
    }
}