.map-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--map-height);
  margin-block-start: var(--space-3);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-deep);
  color: var(--color-text);
  font: var(--text-small);
  text-align: center;
}

/* The placeholder: shown while the map loads, and for good if it can't. */
.map-slot::before {
  content: '';
  position: absolute;
  width: var(--map-area-size);
  height: var(--map-area-size);
  border: var(--map-area-stroke) solid var(--color-copper-bright);
  border-radius: var(--radius-full);
  background: var(--color-map-area);
}

.map-slot > span {
  position: relative;
}

.map-slot.is-ready::before,
.map-slot.is-ready > span {
  display: none;
}

/* Prefixed with .map-slot because the vendor stylesheet is injected after this one. */
.map-slot .map-slot__map {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.map-slot.is-ready .map-slot__map {
  opacity: 1;
}

.map-slot .maplibregl-ctrl-group {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: none;
}

.map-slot .maplibregl-ctrl-group button {
  width: var(--tap-target);
  height: var(--tap-target);
}

.map-slot .maplibregl-ctrl-group button + button {
  border-block-start: var(--border-width) solid var(--color-border);
}

.map-slot .maplibregl-ctrl-group button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-offset));
}

.map-slot .maplibregl-ctrl-icon {
  filter: var(--map-icon-filter);
}

.map-slot .maplibregl-ctrl.maplibregl-ctrl-attrib {
  background: var(--color-map-attribution);
  color: var(--color-text-muted);
  font: var(--text-micro);
}

.map-slot .maplibregl-ctrl-attrib a {
  color: var(--color-text);
}