/* "Near me" on the vendor archive (listing-near.js). The button's look comes from ACSS (btn--neutral btn--outline);
   this adds the location icon, the "on" state and the note beside the result count. */

/* The Gridbuilder facet it drives is never shown. */
.listing-near__facet {
  display: none;
}

.listing-near {
  gap: .5em;
  white-space: nowrap;
}
.listing-near::before {
  content: "";
  flex: none;
  inline-size: 1.15em;
  block-size: 1.15em;
  background: currentColor;
  -webkit-mask: var(--listing-near-icon) center / contain no-repeat;
  mask: var(--listing-near-icon) center / contain no-repeat;
  --listing-near-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 1v4m0 14v4M1 12h4m14 0h4'/%3E%3C/svg%3E");
}
/* On: filled, like the Filters button beside it. */
.listing-near.listing-near[aria-pressed="true"] {
  background-color: var(--neutral);
  color: var(--white);
}
.listing-near[aria-busy="true"] {
  cursor: progress;
}
.listing-near[aria-busy="true"]::before {
  opacity: .5;
}

/* Note under the header: a message, or the "Within 50 km of Toronto, ON ×" pill while on. */
.vendor-archive__header > .listing-near__note {
  grid-column: 1 / -1;
}
.listing-near__note {
  justify-self: start;
  color: var(--text-dark-muted);
  font-size: var(--text-s);
}
.listing-near__note:empty {
  display: none;
}
.listing-near__note.is-active {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-3xs, .25em);
  max-inline-size: 100%;
  padding-inline: var(--space-s) 0;
  border-radius: var(--radius-circle);
  background: var(--primary-ultra-light);
  color: var(--primary-dark);
  font-weight: 500;
}
.listing-near__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listing-near__clear {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2em;
  block-size: 2em;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.15em;
  line-height: 1;
  cursor: pointer;
  position: relative;
}
/* 44px hit area around the small ×. */
.listing-near__clear::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: 44px;
  block-size: 44px;
  translate: -50% -50%;
}
.listing-near__clear:hover {
  background: var(--white);
}
.listing-near__clear:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* Phones: search on its own row, then sort and Near me side by side. */
@media (max-width: 478px) {
  .vendor-archive__controls .vendor-archive__search {
    grid-column: 1 / -1;
  }
}