.Tree {
    white-space: nowrap;
}

.Tree-title {
    @include font(label);
    @include padding-inline(start, 1rem);
    margin-bottom: 0.5rem;
    color: $color-sidebar-heading;
}

.Tree-collection {
    &.is-closed {
        background-color: transparent;

        .Tree-collectionItems {
            display: none;
        }

        .Tree-collectionLabel {
            span::before {
                [dir="ltr"] & {
                    background-image: url("../img/icon-navigation-closed-ltr.svg");
                }
                [dir="rtl"] & {
                    background-image: url("../img/icon-navigation-closed-rtl.svg");
                }
            }
        }
    }
}

.Tree-collectionLabel {
    @include font(caption);
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    color: #fff;

    &:hover {
        background-color: rgba(0, 0, 0, .1);
    }
    
    span {
        @include padding-inline(start, 0);
        @include margin-inline(start, -1.5em);
        display: block;
        position: relative;
    }

    span::before {
        @include offset-inline(end, 3rem);
        display: inline-block;
        position: absolute;
        top: 0.75rem;
        width: 1rem;
        height: 1rem;
        background-image: url("../img/icon-navigation-opened.svg");
        background-repeat: no-repeat;
        background-position: 50%;
        content: "";
    }
}

.Tree-item {
    @include font(caption);
}

.Tree-entityLink {
    color: #fff;
    display: flex;
    align-items: center;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    text-decoration: none;

    &:hover {
        background-color: rgba(0, 0, 0, .1);
        color: #fff;
    }

    .is-current & {
        background-color: rgba(0, 0, 0, .1);
    }

    .Status {
        @include margin-inline(start, 0.25rem);
    }
}

@for $i from 1 through 8 {
    .Tree-depth-#{$i} {
        $padLeft: ($i * 2rem);

        .Tree-collectionLabel,
        .Tree-entityLink {
            @include padding-inline(start, $padLeft);
        }
    }
}