@import "effects";

vn-treeview {
    vn-treeview-child {
        display: block
    }
    ul {
        padding: 0;
        margin: 0;

        li {
            list-style: none;

            & > div > .arrow {
                min-width: 24px;
                margin-right: 10px;
                transition: transform 200ms;
            }
            &.expanded > div > .arrow {
                transform: rotate(180deg);
            }
            & > .node {
                @extend %clickable;
                display: flex;
                padding: 5px;
                align-items: center;
        
                & > vn-check:not(.indeterminate) {
                    color: $color-main;
    
                    & > .check {
                        border-color: $color-main;
                    }
                }
                & > vn-check.checked {
                    color: $color-main;
                }
            }
            ul {
                padding-left: 2.2em;
            }
        }
    }
    vn-icon-button {
        padding: 0
    }
}