/* Map panel (part of the leaflet library): <div class="sv-map-panel" data-sv-map data-sv-map-mode>
   > .sv-map-panel__map (role=region) + .sv-map-panel__tools + .sv-map-panel__readout. */

.sv-map-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--sv-color-border);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-color-surface);
  overflow: hidden;
}
.sv-map-panel__map {
  position: relative;
  z-index: 0;
  height: var(--sv-map-height);
  background: var(--sv-color-surface-sunken);
  transition: height var(--sv-duration) var(--sv-ease);
}
.sv-map-panel.is-expanded .sv-map-panel__map { height: var(--sv-map-height-expanded); }
.sv-map-panel__map:focus-visible { box-shadow: inset 0 0 0 3px var(--sv-color-focus); }

.sv-map-panel__tools {
  position: absolute;
  z-index: 500;
  inset-block-start: var(--sv-space-2);
  inset-inline-end: var(--sv-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-1);
}
.sv-map-panel__tools .sv-button {
  box-shadow: var(--sv-shadow-md);
}
.sv-map-panel__tools .sv-button[aria-pressed="true"] {
  --_bg: var(--sv-color-primary-subtle);
  --_fg: var(--sv-color-primary);
  --_border: var(--sv-color-primary);
}

.sv-map-panel__readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-1) var(--sv-space-4);
  min-height: 2.5rem;
  padding: var(--sv-space-2) var(--sv-space-3);
  border-top: 1px solid var(--sv-color-border);
  color: var(--sv-color-text-muted);
  font-size: var(--sv-text-sm);
  font-variant-numeric: tabular-nums;
}
.sv-map-panel__readout strong { color: var(--sv-color-text); font-weight: var(--sv-weight-semibold); }
.sv-map-panel__notice {
  padding: var(--sv-space-2) var(--sv-space-3);
  background: var(--sv-warning-bg);
  color: var(--sv-warning-fg);
  font-size: var(--sv-text-sm);
}

/* Leaflet integration. */
.sv-map-panel .leaflet-container {
  font-family: var(--sv-font-sans);
  font-size: var(--sv-text-sm);
}
.sv-map-panel .leaflet-bar a,
.sv-map-panel .leaflet-control-layers-toggle { color: var(--sv-color-text); }
.sv-map-panel .leaflet-bar a:focus-visible,
.sv-map-panel .leaflet-control-layers-toggle:focus-visible { box-shadow: var(--sv-focus-ring); }
.sv-map-panel .leaflet-control-attribution { font-size: 0.6875rem; }
.sv-map-panel .leaflet-control-attribution a { color: var(--sv-color-link); }
.sv-map-panel .leaflet-control-layers { border-radius: var(--sv-radius-md); box-shadow: var(--sv-shadow-md); }
.sv-map-panel .leaflet-control-layers-expanded { padding: var(--sv-space-2) var(--sv-space-3); }

/* Map in a dialog fills the body. */
.sv-dialog--map .sv-map-panel { border: 0; border-radius: 0; }
.sv-dialog--map .sv-map-panel__map { height: min(70vh, 36rem); }

@media (max-width: 47.99em) {
  .sv-map-panel.is-expanded .sv-map-panel__map { height: 80vh; height: 80dvh; }
}