/*
 * Areas We Serve hero — the clear (×) button inside the suburb/postcode input.
 *
 * Its own file rather than rules added to suburb-search.css or areas-we-serve.css: assets/css/ is
 * add-only, so new markup gets a new stylesheet loaded straight after the ones it extends. Same
 * arrangement as mini-cart.css and search.css.
 *
 * Visibility is pure CSS — `:placeholder-shown` is true exactly while the box is empty, so the
 * sibling selector below hides the button with no JS listening for input. That is why
 * templates/blocks/areas-hero-search.php renders the button *after* the input.
 *
 * THREE NUMBERS ARE BORROWED FROM THE UI TEAM'S areas-we-serve.css AND HAVE TO TRACK IT:
 *
 *   421px    the input's width            (areas-we-serve.css:16)
 *   29.5px   half the input's 59px height (areas-we-serve.css:18)
 *   575.98px the breakpoint at which the input becomes width:100% (areas-we-serve.css:430)
 *
 * CSS cannot read a sibling's geometry, and the input carries its own width rather than filling
 * the form, so there is no way to anchor to its right edge without restating that width. If the
 * input is ever restyled, these move with it. Verified 375-1920px.
 */

/* Keeps typed text from running under the icon. Overrides the `padding: 0 var(--space-20)` in
   areas-we-serve.css by load order, not by editing it — this file is enqueued after. */
.areas-hero-search__input {
    padding-right: 52px;
}

.areas-hero-search__clear {
    position: absolute;
    /* `min()` handles the input's own `max-width: 100%`; translateX(-100%) then pulls the button
       back inside that edge, and the extra 8px is the inset from it. */
    left: min(421px, 100%);
    /* NOT `top: 50%`. Below 991.98px the form is flex-wrap:wrap and the GO button drops to a
       second row, making the form 126px tall — half of that is between the two rows. The input is
       always the first flex line and always starts at the form's top, so half its own height is
       correct whether the form has wrapped or not. Measured at every breakpoint. */
    top: 29.5px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-round);
    cursor: pointer;
    opacity: 0.45;
    transform: translate(calc(-100% - 8px), -50%);
    transition: var(--transition);
}

.areas-hero-search__clear:hover {
    opacity: 1;
    background-color: var(--bg-alt);
}

/* The empty state. `pointer-events` is the load-bearing one — opacity and visibility are animated
   by the transition above, so for a fraction of a second after the box empties the button is still
   painted, and without this it would still be clickable. */
.areas-hero-search__input:placeholder-shown ~ .areas-hero-search__clear {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Where areas-we-serve.css:430 gives the input `width: 100%`, its right edge is the form's. */
@media (max-width: 575.98px) {
    .areas-hero-search__clear {
        left: 100%;
    }
}