/*
 * TBE-1128 [tbeUnitLinks] layout and combobox popup. The field, dropdown and
 * Go button keep the host theme's own look; this sheet only lays them out
 * (field and Go on one line, Go under the field on narrow phones), hides the
 * label and live count visually, and styles the popup list and "No rentals
 * match" message, which have no theme equivalent. System colours (Canvas,
 * CanvasText, Highlight) follow the browser and forced-colours modes; the
 * popup takes the field's font (set by the script).
 */
.tbe-unit-links {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

/* The no-JavaScript dropdown, or the combobox that replaces it. */
.tbe-unit-links > select,
.tbe-unit-links__combobox {
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
}

.tbe-unit-links > button {
    flex: 0 0 auto;
    margin: 0;
}

/*
 * Below 350px (the same narrow-phone breakpoint TBE-UI's filter sections use,
 * `max-[350px]`), Go drops under the field and spans the full width.
 */
@media (max-width: 349.98px) {
    .tbe-unit-links > button {
        flex-basis: 100%;
    }
}


/*
 * The label (Engineering AC 2; it repeats the placeholder text) and the live
 * count are for screen readers only: the placeholder (without JavaScript, the
 * dropdown's first option) is the visible cue, and a migrated placement
 * usually has its own heading. Hidden here rather than relying on the theme's
 * `.screen-reader-text`, which WordPress core doesn't define on the front
 * end; `position: absolute` also keeps them out of the flex row.
 */
.tbe-unit-links__label,
.tbe-unit-links__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tbe-unit-links__input {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
}

/*
 * The list and "No rentals match" sit in a fixed container on <body>, as
 * Select2's dropdown did. The script sets its top, left, width and font from
 * the field and flips it above the field when there is no room below. It
 * also repeats this rule's position and z-index, and the list, message and
 * option styles below, inline (the JS tests hold them equal), in case an
 * optimizer drops these rules: the elements only exist after load. No theme section with overflow: hidden
 * can clip the popup, and the Go button never grows with it.
 */
.tbe-unit-links__popup {
    position: fixed;
    z-index: 100000;
    box-sizing: border-box;
}

.tbe-unit-links__listbox,
.tbe-unit-links__empty {
    box-sizing: border-box;
    margin: 0;
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    font: inherit;
}

.tbe-unit-links__listbox {
    max-height: 16rem;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.tbe-unit-links__listbox[hidden],
.tbe-unit-links__empty[hidden] {
    display: none;
}

.tbe-unit-links__option {
    min-height: 1.5rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.tbe-unit-links__option[aria-selected="true"] {
    background: Highlight;
    color: HighlightText;
}

.tbe-unit-links__empty {
    padding: 0.5rem 0.75rem;
}