.os-tree-view {
    width: 100%;
    height: inherit;
    display: block;
    background: #fff;
    border: solid 1px #666666;
    cursor: default;
    box-sizing: border-box;
    overflow: auto;

    .os-tree-node {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        &.os-expandable .os-tree-node-trigger.os-default-trigger {
            width: 16px;
            height: 16px;
            margin-right: 10px;
            background-image: url('/assets/themes/win10/icons/tree-view-chevron.png');
            background-position: 0px -16px;
            background-repeat: no-repeat;
        }

        &.os-expanded .os-tree-node-trigger.os-default-trigger {
            background-position: -16px -16px;
        }

        &:not(.os-disabled) {
            &:hover {
                background-color: rgba(0, 0, 0, .06);
            }

            &.os-selected {
                background-color: rgba(var(--os-primary-color), .2);
            }

            .os-tree-node-trigger.os-default-trigger {
                background-position: 0px 0px;
            }

            &.os-expanded .os-tree-node-trigger.os-default-trigger {
                background-position: -16px 0px;
            }
        }

        &.os-disabled {
            color: #909090;
        }

        &.os-root-node > :first-child {
            margin-left: 10px;
        }

        &:not(.os-root-node) > :first-child {
            margin-left: calc(10px + 27px * var(--os-tree-node-depth));
        }
    }
}
