.c-tree-and-search {
    display: flex;
    flex-direction: column;
    padding-right: $interiorMarginSm;
    overflow: auto;

    > * + * { margin-top: $interiorMargin; }

    &__search {
        flex: 0 0 auto;
    }

    &__loading {
        flex: 1 1 auto;
    }

    &__no-results {
        font-style: italic;
        opacity: 0.6;
    }

    &__tree {
        flex: 1 1 auto;
        height: 0; // Chrome 73 overflow bug fix
    }
}

.c-tree {
    @include userSelectNone();
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: $interiorMargin;

    li {
        position: relative;
        &.c-tree__item-h { display: block; }
    }

    .c-tree {
        margin-left: 15px;
    }

    &__item {
        $aPad: $interiorMarginSm;
        border-radius: $controlCr;
        display: flex;
        align-items: center;
        cursor: pointer;
        line-height: 110%;
        padding: $interiorMargin - $aPad;
        transition: background 150ms ease;

        > * + * {
            margin-left: $interiorMarginSm;
        }

        &:hover {
            background: $colorItemTreeHoverBg;
            .c-tree__item__type-icon:before {
                color: $colorItemTreeIconHover;
            }

            .c-tree__item__name {
                color: $colorItemTreeHoverFg;
            }
        }

        &.is-navigated-object,
        &.is-selected {
            background: $colorItemTreeSelectedBg;
            .c-tree__item__type-icon:before {
                color: $colorItemTreeIconHover;
            }

            .c-tree__item__name {
                color: $colorItemTreeSelectedFg;
            }
        }

        &.is-being-edited {
            background: $colorItemTreeEditingBg;
            .c-tree__item__type-icon:before {
                color: $colorItemTreeEditingIcon;
            }

            .c-tree__item__name {
                color: $colorItemTreeEditingFg;
                font-style: italic;
            }
        }

        // Object labels in trees
        &__label {
            // <a> tag that holds type icon and name.
            // Draggable element.
            /*border-radius: $controlCr;
            display: flex;
            align-items: center;
            flex: 1 1 auto;
            overflow: hidden;
            padding: $aPad;
            white-space: nowrap;*/
        }

        &__name {
           // @include ellipsize();
           // display: inline;
            color: $colorItemTreeFg;
          //  width: 100%;
        }

        &__type-icon {
            // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
           // display: block;
         //   flex: 0 0 auto;
          //  font-size: 1.3em;
          //  margin-right: $interiorMarginSm;
            color: $colorItemTreeIcon;
          //  width: $treeTypeIconW;
        }

        &.is-alias {
            // Object is an alias to an original.
            [class*='__type-icon'] {
                @include isAlias();
            }
        }

        body.mobile & {
            @include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
            height: $mobileTreeItemH;
            margin-bottom: $interiorMarginSm;
            [class*="view-control"] {
                width: ceil($mobileTreeItemH * 0.5);
            }
        }
    }
}
