/* ============================================================
   The searchable location picker
   Paired with js/location-picker.js
   ============================================================ */

/*
 * DELIBERATELY SMALL. The drawer itself is search-suggest.css's - the panel,
 * the portal, the province headings, the rows and the hover/active states are
 * all .lg-suggest* classes, and that stylesheet is already on every page from
 * the layout. Only the four things a location picker has and a search drawer
 * does not are here: the clear button, the listing count, the group wrapper
 * and the "type two letters" note.
 */

.lg-locpick-host { position: relative; }

/* The <select> underneath is hidden by the `hidden` attribute once the script
   takes over, so nothing here has to hide it. Without JS this file changes
   nothing on the page. */

/* ----- Clear the chosen town -----
   Same geometry as .lg-suggest-scan, because on the home hero both sit at the
   right-hand end of a field in the same bar and any difference reads as a
   mistake. Shown only when something is actually chosen. */
.lg-locpick-clear {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 40px: a real touch target, not an icon somebody has to aim at. */
    width: 2.5rem;
    height: 2.5rem;

    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dl-muted, #6c7293);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.lg-locpick-clear:hover,
.lg-locpick-clear:focus-visible {
    background: var(--dl-light, #f5f6fa);
    color: var(--dl-primary, #3d52a8);
}

.lg-locpick-clear:focus-visible {
    outline: 2px solid var(--dl-primary, #3d52a8);
    outline-offset: 1px;
}

/* Room for it, so a long town name never runs under the button. */
.lg-locpick-host.has-value > .lg-locpick-input { padding-right: 2.75rem; }

/* ----- A row's listing count -----
   Right-aligned and tabular so a column of them lines up, the way
   .lg-suggest-price does on a product row. Quieter than the town name: the
   name is the answer, the count is why you would pick it. */
.lg-locpick-count {
    margin-left: auto;
    flex: 0 0 auto;
    padding-left: .5rem;
    color: var(--dl-muted, #9299b8);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The picker's rows carry role="option" themselves rather than wrapping a
   button, so the padding .lg-suggest-pick provides has to reach the whole row
   and the cursor has to say the row is clickable. */
.lg-locpick-row { cursor: pointer; }
.lg-locpick-row > .lg-suggest-pick { width: 100%; }

/* A province and its towns are one block: the first heading sits tight under
   the panel's own padding, later ones get the rule search-suggest.css gives
   consecutive headings. */
.lg-locpick-group + .lg-locpick-group .lg-suggest-head {
    border-top: 1px solid var(--dl-border, #e4e8f1);
    margin-top: .25rem;
}

/* ----- The prompt, the empty state and the failure -----
   Not a row: there is nothing here to choose, and anything that looks
   choosable in a listbox will be arrowed onto and pressed. */
.lg-locpick-note {
    padding: .7rem .85rem;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--dl-muted, #9299b8);
}

.lg-locpick-note strong { color: var(--dl-dark, #272b41); }

@media (max-width: 575.98px) {
    .lg-locpick-row > .lg-suggest-pick { padding-top: .7rem; padding-bottom: .7rem; }
}