theme/assets/sass/components/_tree.scss

@use '/assets/sass/protocol/includes/lib' as *;

/* stylelint-disable selector-class-pattern */
.Tree {
    white-space: normal;
}

.Tree-header {
    padding-left: 1.25rem;
}

.Tree-title {
    @include text-body-md;
    color: $color-white;
    letter-spacing: normal;
}

.Tree-collectionLabel {
    color: $color-white;
    padding-top: 0.15em;
    padding-bottom: 0.15em;

    span::before {
        width: 0.5rem;
        top: 0.4rem;
    }

    &:hover {
        color: $color-white;
        background-color: $color-dark-gray-50;
    }

    &::before {
        background-image: url('../img/icon-navigation-opened.svg');
        opacity: 0.9;
        top: 0.6em;
    }
}

[dir='ltr'] {
    .Tree-depth-1 .Tree-entityLink,
    .Tree-depth-2 .Tree-collectionLabel {
        padding-left: 1.25rem;
    }

    .Tree-depth-2 .Tree-entityLink {
        padding-left: 1.75rem;
    }

    .Tree-depth-3 .Tree-collectionLabel {
        padding-left: 1.75rem;

        &::before {
            left: 0.75rem;
        }
    }

    .Tree-depth-3 .Tree-entityLink {
        padding-left: 2.5rem;
    }

    .Tree-collection.is-closed .Tree-collectionLabel::before {
        background-image: url('../img/icon-navigation-closed-ltr.svg');
    }
}

[dir='rtl'] .Tree-collection.is-closed .Tree-collectionLabel::before {
    background-image: url('../img/icon-navigation-closed-rtl.svg');
}

.Tree-depth-2,
.Tree-depth-3 {
    > h4 {
        font-weight: bold;
    }
}

.Tree-item {
    @include text-body-sm;

    .Tree-entityLink {
        color: $color-white;
        padding-top: 0.25em;
        padding-bottom: 0.25em;

        &:hover {
            color: $color-white;
            background-color: $color-dark-gray-50;
        }
    }

    &.is-current {
        background-color: $color-dark-gray-60;
    }
}

.Tree-aside {
    color: $color-white;
}

.Tree-collapse {
    color: $color-white;
}