prestashop-entity-selector/sources/scss/components/_tree.scss

/**
 * Category Tree Component
 * Hierarchical tree view for category selection inside dropdown
 */

@use "sass:color";
@use '../variables' as *;
@use '../mixins' as *;

// Category tree container (inside dropdown)
.category-tree {
    display: flex;
    flex-direction: column;
}

// Tree toolbar inside dropdown
.category-tree .tree-toolbar {
    display: flex;
    align-items: center;
    gap: $es-spacing-sm;
    padding: $es-spacing-xs $es-spacing-sm;
    background: $es-slate-50;
    border-bottom: 1px solid $es-border-light;
    flex-shrink: 0;

    .btn-expand-all,
    .btn-collapse-all {
        @include button-reset;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: $es-spacing-xs $es-spacing-sm;
        font-size: $es-font-size-xs;
        font-weight: $es-font-weight-medium;
        color: $es-text-secondary;
        background: $es-white;
        border: 1px solid $es-border-color;
        border-radius: $es-radius-sm;
        transition: all $es-transition-fast;

        &:hover {
            background: $es-slate-100;
            border-color: $es-slate-300;
        }

        i {
            font-size: 12px;
        }
    }
}

// Tree items container
.category-tree .tree-items {
    padding: 0;
}

// Tree item
.tree-item {
    display: flex;
    align-items: center;
    gap: $es-spacing-xs;
    padding: $es-spacing-xs $es-spacing-sm;
    cursor: pointer;
    transition: background $es-transition-fast;
    border-radius: 0;

    &:hover {
        background: $es-slate-100;
    }

    &.selected {
        background: $es-primary-light;

        .tree-name {
            font-weight: $es-font-weight-semibold;
            color: $es-primary;
        }

        .tree-checkbox {
            color: $es-primary;

            i {
                opacity: 1;
            }
        }
    }

    &.inactive {
        opacity: 0.6;

        .tree-name {
            font-style: italic;
        }
    }

    &.filtered-out {
        display: none;
    }

    &.filter-match {
        background: $es-warning-light;

        &.selected {
            background: $es-primary-light;
        }
    }
}

// All tree element styles nested under .category-tree for specificity
.category-tree {
    // Tree indentation
    .tree-indent {
        flex-shrink: 0;
    }

    // Tree toggle (expand/collapse)
    .tree-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
        color: $es-text-secondary;
        flex-shrink: 0;
        border-radius: $es-radius-sm;
        transition: all $es-transition-fast;
        cursor: pointer;

        &:hover {
            background: $es-slate-200;
            color: $es-text-primary;
        }

        &.tree-leaf {
            cursor: default;
            visibility: hidden;

            &:hover {
                background: transparent;
            }
        }

        i {
            font-size: 10px;
            transition: transform $es-transition-fast;
        }
    }

    .tree-item.collapsed > .tree-toggle i {
        transform: rotate(-90deg);
    }

    // Tree checkbox indicator - 12x12 to match PrestaShop admin standards
    .tree-checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
        flex-shrink: 0;
        border: 1px solid $es-border-color;
        border-radius: 2px;
        background: $es-white;

        i {
            font-size: 8px;
            opacity: 0;
            color: $es-white;
            transition: opacity $es-transition-fast;
        }
    }

    .tree-item.selected .tree-checkbox {
        background: $es-primary;
        border-color: $es-primary;

        i {
            opacity: 1;
        }
    }

    // Tree icon
    .tree-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
        color: $es-text-muted;
        flex-shrink: 0;

        i {
            font-size: 12px; // match visual weight of other icons
        }
    }

    .tree-item.selected .tree-icon {
        color: $es-primary;
    }

    // Tree name
    .tree-name {
        flex: 1;
        font-size: $es-font-size-sm;
        color: $es-text-primary;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    // Tree product/page count with preview
    .tree-count {
        @include count-badge($es-primary);
        height: 18px;
        min-width: 18px;
        padding: 0 $es-spacing-sm;

        i {
            font-size: 10px;
        }

        &.clickable {
            &.loading {
                pointer-events: none;

                i {
                    animation: spin 1s linear infinite;
                }
            }

            &.popover-open {
                background: color.adjust($es-primary, $lightness: -10%);
            }
        }
    }

    // Select children button - positioned on the left next to toggle
    .btn-select-children {
        @include button-reset;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
        color: $es-text-muted;
        border-radius: $es-radius-sm;
        opacity: 0.3;
        transition: all $es-transition-fast;
        flex-shrink: 0;

        i {
            font-size: 14px; // larger to visually match other icons
        }

        &:hover {
            color: $es-primary;
            opacity: 1;
        }
    }

    .tree-item:hover .btn-select-children {
        opacity: 0.6;
    }

    // Tree badge (inactive, etc.)
    .tree-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.125rem $es-spacing-xs;
        font-size: 9px;
        font-weight: $es-font-weight-semibold;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        border-radius: $es-radius-sm;
        flex-shrink: 0;

        &.inactive {
            color: $es-warning;
            background: $es-warning-light;
        }
    }

    // Tree children container
    .tree-children {
        display: block;

        &.filter-expanded {
            display: block !important;
        }
    }

    .tree-item.collapsed + .tree-children {
        display: none;
    }

    // Filtering - must be inside .category-tree for specificity
    .tree-item.filtered-out {
        display: none !important;
    }
} // end .category-tree

// Loading/empty/error states
.category-tree .tree-loading,
.category-tree .dropdown-empty,
.category-tree .dropdown-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $es-spacing-xl;
    color: $es-text-muted;
    font-size: $es-font-size-sm;

    i {
        margin-right: $es-spacing-sm;
    }
}

.category-tree .dropdown-error {
    color: $es-danger;
}

// Tree view mode in dropdown
.es-search-dropdown.view-tree {
    .dropdown-results {
        padding: 0;
    }

    .category-tree {
        max-height: 100%;
        overflow-y: auto;
        @include custom-scrollbar;
    }

    .tree-items {
        max-height: calc(100% - 40px);
        overflow-y: auto;
        @include custom-scrollbar;
    }
}