/* @define TreeViewNew */
.TreeViewNew {
    overflow-y: auto;
    height: 100%;
}

.TreeViewNew-node {
    user-select: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1;
    height: 30px;
    padding-left: 4px;
}

/* Because this style is defined after .TreeView-node.is-selected, it wins (the selectors have the same specificity otherwise). */
.TreeViewNew-node.is-potentiallySelected {
    background-color: var(--surface-list-item-hover);
}

.TreeViewNew-node--leaf:not(.is-rootLevel) {
    display: flex;
    padding-left: 0;
}

.TreeViewNew-expander {
    cursor: pointer;
}

.TreeViewNew-checkbox {
    margin-left: 5px;
}

.TreeViewNew-invalidItem,
.TreeViewNew-validItem {
    margin-right: 5px;
}

.TreeViewNew-invalidParent,
.TreeViewNew-validParent {
    margin: 0 5px;
}

.TreeViewNew-label {
    flex-grow: 1;
    cursor: default;
}

.TreeViewNew-label.is-selectable {
    cursor: pointer;
}

.TreeViewNew-node--leaf .TreeViewNew-label:not(.is-selectable) {
    color: var(--text-disabled);
}

.TreeViewNew-label.is-selected {
    font-weight: var(--font-weight-bold);
}

.TreeViewNew-label.is-deleted {
    text-decoration: line-through;
}

.TreeViewNew-nodeCount {
    margin: 0 12px;
    font-size: 12px;
    color: #505467;
}

.TreeViewNew-descendantToggle {
    margin-right: 3px;
    margin-left: auto;
    min-width: 2rem;
    flex-shrink: 0;
}