.bbr-tree-view {
    // ─── Selection color tokens (default = link / blue) ───────────────────────
    --bbr-tree-selected-bg: rgba(72, 95, 199, 0.12);
    --bbr-tree-selected-color: #485fc7;
    --bbr-tree-focus-ring: rgba(72, 95, 199, 0.5);

    &.is-primary {
        --bbr-tree-selected-bg: rgba(0, 209, 178, 0.12);
        --bbr-tree-selected-color: #00b89c;
        --bbr-tree-focus-ring: rgba(0, 209, 178, 0.45);
    }

    &.is-link {
        --bbr-tree-selected-bg: rgba(50, 115, 220, 0.12);
        --bbr-tree-selected-color: #3273dc;
        --bbr-tree-focus-ring: rgba(50, 115, 220, 0.5);
    }

    &.is-info {
        --bbr-tree-selected-bg: rgba(62, 142, 208, 0.12);
        --bbr-tree-selected-color: #3e8ed0;
        --bbr-tree-focus-ring: rgba(62, 142, 208, 0.5);
    }

    &.is-success {
        --bbr-tree-selected-bg: rgba(72, 199, 116, 0.12);
        --bbr-tree-selected-color: #257942;
        --bbr-tree-focus-ring: rgba(72, 199, 116, 0.5);
    }

    &.is-warning {
        --bbr-tree-selected-bg: rgba(255, 193, 7, 0.2);
        --bbr-tree-selected-color: #946c00;
        --bbr-tree-focus-ring: rgba(255, 193, 7, 0.55);
    }

    &.is-danger {
        --bbr-tree-selected-bg: rgba(241, 70, 104, 0.12);
        --bbr-tree-selected-color: #cc0f35;
        --bbr-tree-focus-ring: rgba(241, 70, 104, 0.45);
    }

    // ─── Container ────────────────────────────────────────────────────────────
    &:focus {
        outline: none;
    }

    &__root,
    &__children {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    &__item {
        user-select: none;
    }

    &__node {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        min-height: 1.85rem;
        border-radius: 4px;
        cursor: default;
        transition: background-color 0.12s;

        &:hover {
            background-color: #f5f5f5;
        }

        &.is-active {
            background-color: var(--bbr-tree-selected-bg);
            color: var(--bbr-tree-selected-color);
            font-weight: 500;
        }

        &--focused {
            outline: 2px solid var(--bbr-tree-focus-ring);
            outline-offset: -2px;
            border-radius: 4px;
        }

        &--disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }
    }

    &__toggle {
        width: 1.1rem;
        height: 1.1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 0.75rem;
        color: #7a7a7a;

        &--leaf {
            pointer-events: none;
        }
    }

    // Wrapper for the BBR Checkbox inside each node row
    &__checkbox-wrapper {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;

        .bbr-field.bbr-input {
            margin: 0;
            margin-top: 0.0125rem;
        }

        input[type="checkbox"] ~ label {
            padding-bottom: 0;
            padding-top: 0.1575rem;
        }
    }

    &__icon {
        flex-shrink: 0;
        color: #7a7a7a;
        font-size: 0.9rem;
    }

    &__label {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}