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

.TreeView-node {
    user-select: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1;
    height: 27px;
}

.TreeView-node.is-selected {
    background-color: #ececec;
}

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

.TreeView-node--leaf {
    display: flex;
    padding-left: 1.2857em; /* The value of the font awesome fixed width fa-fw class */
}

.TreeView-expander {
    cursor: pointer;
}

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

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

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

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

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

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

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

.TreeView-dataVisibilityToggle {
    display: flex;
    padding: 5px;
    align-items: center;
    border-bottom: 1px solid var(--border-default);
}

/* stylelint-disable-next-line */
.TreeView-dataVisibilityToggle .custom-control-label {
    padding-top: 1px;
}

.TreeView-dataVisibilityToggleLabel {
    padding-right: 5px;
}

.TreeView-dataVisibilityToggleButton {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.TreeView-label--notSelectable {
    color: var(--text-disabled);
}

.TreeView-node--notSelectable:hover {
    background-color: transparent;
}

.TreeView--additionalPadding {
    padding-bottom: 35px;
}