@import "variables";

vn-treeview {
    vn-treeview-child {
        display: block
    }
    
    ul {
        line-height: 24px;
        padding: 0;
        margin: 0;
        

        li {
            list-style: none;

            .actions {
                min-width: 24px;
                margin-right: 10px
            }

            .description {
                pointer-events: none;
                padding-left: 5px
            }
        }

        li vn-icon {
            cursor: pointer;
        }

        li ul {
            padding-left: 1.8em;
        }

        li > vn-horizontal {
            padding: 5px
        }

        li > vn-horizontal:hover {
            background-color: $color-hover-cd
        }

        li.expanded > vn-horizontal > .actions > vn-icon[icon="keyboard_arrow_down"] {
            transition: all 0.2s;
            transform: rotate(180deg);
        }

        li.collapsed > vn-horizontal > .actions > vn-icon[icon="keyboard_arrow_down"] {
            transition: all 0.2s;
            transform: rotate(0deg);
        }

        li.included {
            & > vn-horizontal > .description {
                color: $color-notice;
                font-weight: bold;
            }

            & > vn-horizontal > vn-check .md-icon {
                background-color: $color-notice
            }
        }

        li.excluded {
            & > vn-horizontal > .description {
                color: $color-alert;
                font-weight: bold;
            }

            & > vn-horizontal > vn-check .md-icon {
                background-color: $color-alert;
                border-color: transparent
            }
        }
    }

    vn-icon-button {
        padding: 0
    }
}