/*
 * `pcu-tree-view` had no stylesheet at all, which is why its search row looked wrong: the
 * `uui-input-field` and the `uui-badge` were bare siblings in a `display: block` host, so the
 * badge sat wherever inline layout put it — roughly on the input's baseline, a good 20px above
 * where it belongs.
 *
 * The fix is the composition layer rather than bespoke geometry: `uui-stack` for the rhythm
 * between search and tree, `uui-cluster` for the row itself. Only two things are genuinely
 * this component's own and are declared here.
 */

pcu-tree-view {
    display: block;
}

/* The row owns selection; this button is its checkbox hit area and visual state. */
pcu-tree-view .uui-tree-view-item__checkbox {
    pointer-events: none;
}

pcu-tree-view .uui-tree-view-item__checkbox-visual {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    background: var(--uui-bg-primary);
    border: 1px solid var(--uui-border-primary);
    border-radius: var(--uui-radius-xs);
}

pcu-tree-view .uui-tree-view-item__checkbox-visual[data-selected="true"] {
    background: var(--uui-bg-brand-solid);
    border-color: var(--uui-bg-brand-solid);
}

pcu-tree-view .uui-tree-view-item__checkbox-visual[data-selected="true"]::before {
    width: 12px;
    height: 12px;
    content: "";
    background: var(--uui-fg-white);
    mask: var(--uui-icon-url) center / contain no-repeat;
    -webkit-mask: var(--uui-icon-url) center / contain no-repeat;
}

/*
 * 1. The row aligns at its END, not its centre. `uui-cluster` centres, which is right for a
 *    row of buttons of differing heights — but an input field is a label stacked on a control,
 *    and centring the badge against that whole box parks it beside the *label*. Aligning to the
 *    end puts it on the field's own bottom edge, which is what the eye reads as "in the row".
 */
.pcu-tree-view__search {
    align-items: flex-end;
}

/*
 * 2. The field fills the row. Figma draws an input at its 320px artboard width and puts that
 *    number on both `__root` and `__input`; the visible box is `__input`, so releasing only the
 *    root leaves a 320px border sitting in a wider cell. `!important` because the generated
 *    rules carry four reflected attribute selectors.
 */
.pcu-tree-view__search uui-input-field {
    flex: 1 1 200px;
    min-inline-size: 0;
}

.pcu-tree-view__search .uui-input-field__root,
.pcu-tree-view__search .uui-input-field__input {
    inline-size: 100% !important;
}

.pcu-tree-view__search uui-badge {
    flex: 0 0 auto;
    /* The badge's own box is taller than its pill; nudge it onto the field's baseline row. */
    margin-block-end: 2px;
}