/* "Download" map control on the LabelMap (#4095): a labeled pill to the left of the zoom/compass cluster that opens
   a disclosure panel of download formats. Fixed page chrome, so no --ui-scale. */

/* Lay the corner's controls out in a row so the pill sits beside the zoom/compass cluster instead of stacking
   under it. Safe to restyle Mapbox's corner container: this stylesheet loads only on the LabelMap. */
.mapboxgl-ctrl-top-right {
  display: flex;
  align-items: flex-start;
}

.map-download-control {
  position: relative;

  /* The control mounts after the built-in navigation cluster (it waits for the label data), so flex order,
     not DOM order, puts it on the left. */
  order: -1;

  /* Mapbox's control container sets a 12px Helvetica stack; restore the design system's type. */
  font: var(--text-small-medium);
}

.map-download-control__button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--color-neutral-white);
  color: var(--color-neutral-900);
  border: none;
  border-radius: 999px;
  font: var(--text-small-medium);
  cursor: pointer;

  /* Matches the shadow Mapbox draws on its own corner controls so the stack reads as one cluster. */
  box-shadow: 0 0 0 2px rgb(0 0 0 / 10%);
}

.map-download-control__button:hover {
  background: var(--color-neutral-100);
}

/* While a download is being prepared the pill is a status, not an invitation — drop the hover affordance. */
.map-download-control__button[aria-busy="true"] {
  color: var(--color-neutral-700);
  cursor: progress;
}

.map-download-control__button[aria-busy="true"]:hover {
  background: var(--color-neutral-white);
}

/* Text carried only for screen readers: the live-region status and the docs link's new-tab warning. */
.map-download-control__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.map-download-control__button:focus-visible,
.map-download-control__item:focus-visible,
.map-download-control__docs-link:focus-visible {
  outline: 2px solid var(--color-neutral-900);
  outline-offset: 1px;
}

.map-download-control__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;

  /* The panel's own padding sets the single left edge everything below aligns to: title, count pill, the format
     buttons' borders, the separator, and the docs link all start here. Text rows carry no horizontal margins of
     their own — an outdented card border is what makes the panel read as messy. */
  padding: 12px;
  background: var(--color-neutral-white);
  border: 1px solid var(--color-neutral-300);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

.map-download-control__title {
  margin: 0 0 6px;
  font: var(--text-small-bold);
  color: var(--color-neutral-900);
}

.map-download-control__count {
  margin: 0 0 12px;
  font: var(--text-caption-regular);
  color: var(--color-neutral-700);
}

.map-download-control__count-pill {
  display: inline-block;
  margin-inline-end: 5px;
  padding: 1px 8px;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  border-radius: 999px;
  font: var(--text-caption-semibold);
  color: var(--color-neutral-900);
}

.map-download-control__caveat {
  margin: 0 0 12px;
  font: var(--text-caption-regular);
  color: var(--color-neutral-700);
}

/* The format actions get visible button chrome (border + rounded corners) rather than the flat rows typical of
   menus: this panel mixes info text with actions, and hover-only affordance is invisible on touch. */
.map-download-control__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  background: var(--color-neutral-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}

.map-download-control__item + .map-download-control__item {
  margin-top: 6px;
}

.map-download-control__item:hover:not(:disabled) {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-300);
}

.map-download-control__item:disabled {
  cursor: default;
  color: var(--color-neutral-500);
}

.map-download-control__format {
  font: var(--text-small-medium);
}

.map-download-control__hint {
  font: var(--text-caption-regular);
  color: var(--color-neutral-700);
}

.map-download-control__item:disabled .map-download-control__hint {
  color: var(--color-neutral-500);
}

.map-download-control__docs-link {
  display: block;
  margin-top: 12px;
  padding: 10px 0 0;
  border-top: 1px solid var(--color-neutral-200);
  font: var(--text-caption-regular);
  color: var(--color-neutral-700);
  text-decoration: underline;
}

.map-download-control__docs-link:hover {
  color: var(--color-neutral-900);
}