/* "Near me" map control and the user's location dot (built by market-map.js as a Leaflet control). */

.map-nearby {
  display: grid;
  grid-template-columns: auto minmax(calc(var(--space-xs) * 6), 1fr);
  max-inline-size: var(--width-s);
  background: var(--white);
}
.map-nearby__button,
.map-nearby__radius {
  min-block-size: calc(var(--space-xs) * 3.25);
  border: 0;
  background: var(--white);
  font: inherit;
  font-size: var(--text-s);
  cursor: pointer;
}
.map-nearby__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-xs) / 2);
  padding: calc(var(--space-xs) / 2) calc(var(--space-xs) * .75);
  border-inline-end: 1px solid var(--neutral-light);
  color: var(--primary-dark);
  white-space: nowrap;
}
.map-nearby__button svg {
  flex: none;
  inline-size: 1.2em;
  block-size: 1.2em;
}
.map-nearby__button:disabled {
  opacity: .65;
  cursor: wait;
}
.map-nearby__radius {
  min-inline-size: calc(var(--space-xs) * 6);
  padding: calc(var(--space-xs) / 2);
  border-radius: 0;
  color: var(--neutral-dark);
}
.map-nearby__button:focus-visible,
.map-nearby__radius:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: calc(var(--focus-width) * -1);
}
.map-nearby__status {
  grid-column: 1 / -1;
  padding: calc(var(--space-xs) / 4) calc(var(--space-xs) / 2);
  border-block-start: 1px solid var(--neutral-light);
  color: var(--neutral-dark);
  font-size: var(--text-xs);
  line-height: var(--heading-line-height);
}
.map-nearby__status:empty {
  display: none;
}

/* The user's position on the map. */
.map-nearby__dot {
  position: absolute;
  z-index: 650; /* above Leaflet's marker pane (600) */
  inline-size: calc(var(--space-xs) * 1.1);
  block-size: calc(var(--space-xs) * 1.1);
  border: 2px solid var(--white);
  border-radius: var(--radius-circle);
  background: var(--primary-dark);
  box-shadow: 0 0 0 calc(var(--space-xs) * .3) var(--primary-trans-20);
  translate: -50% -50%;
  pointer-events: none;
}