@import "effects";

vn-treeview {
    & > .add-item {
        @extend %clickable;
    }
}
vn-treeview-childs {
    display: block;

    ul {
        padding: 0;
        margin: 0;

        & > li {
            list-style: none;

            ul {
                padding-left: 2.2em;
            }
        }
    }
    vn-icon-button {
        padding: 0;
    }
    & > ul > li > .node {
        @extend %clickable;
        display: flex;
        padding: 5px;
        align-items: center;

        & > .arrow {
            min-width: 24px;
            margin-right: 10px;
            transition: transform 200ms;
        }
        &.expanded > .arrow {
            transform: rotate(180deg);
        }
        & > vn-check:not(.indeterminate) {
            color: $color-main;

            & > .check {
                border-color: $color-main;
            }
        }
        & > vn-check.checked {
            color: $color-main;
        }
    }
}
vn-treeview-content {
    flex-grow: 1;
}