@import "variables";

vn-treeview {
    ul {
        line-height: 24px;
        padding: 0;
        margin: 0;
        

        li {
            list-style: none;
            cursor: pointer;

            .actions {
                min-width: 24px;
            }

            .description {
                padding-left: 5px
            }
        }

        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-check .md-icon {
                    background-color: $color-notice
                }
            }

        }

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

    vn-icon-button {
        padding: 0
    }
}