/*
 * Shared styling for compact buttons that float over the panorama (Explore and Validate).
 * This file owns only the LOOK of the buttons (scaled by --ui-scale); each page positions the holder itself.
 */

/* Stacked +/- zoom control: two square buttons separated by a small gap. */
.zoom-buttons-holder {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--ui-scale, 1));
}

.zoom-buttons-holder .tooltip {
  width: calc(70px * var(--ui-scale, 1));
  font: var(--text-caption-regular);
}

.zoom-button {
  width: calc(22px * var(--ui-scale, 1));
  height: calc(22px * var(--ui-scale, 1));
  cursor: pointer;
  background-color: var(--color-asphalt-400);
  border-style: none;
  padding: 0;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Round only the outer corners so the gap-separated pair still reads as one stacked control. */
.zoom-button:first-of-type {
  border-radius: calc(7px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1)) 0 0;
}

.zoom-button:last-of-type {
  border-radius: 0 0 calc(7px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
}

.zoom-button.disabled {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

/* White +/- glyphs (public/images/icons/{plus,minus}-white.svg) shown over the black pill. */
.zoom-button-icon {
  display: block;
  width: calc(18px * var(--ui-scale, 1));
  height: calc(18px * var(--ui-scale, 1));
  transition: transform 0.1s ease;
}

.zoom-button:hover .zoom-button-icon {
  transform: scale(1.15);
}

/* Stuck/sound/feedback buttons look; positioning and the expand/collapse behavior in the {svl,svv}-canvas.css. */
.pano-overlay-button-group {
  display: flex;
  gap: calc(3px * var(--ui-scale, 1));
  align-items: stretch;
}

.pano-overlay-button {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale, 1));
  height: calc(30px * var(--ui-scale, 1));
  padding: 0 calc(8px * var(--ui-scale, 1));
  border-radius: calc(7px * var(--ui-scale, 1));
  background-color: var(--color-asphalt-400);
  color: var(--color-neutral-white);
  font: var(--text-caption-semibold);
  white-space: nowrap;
  cursor: pointer;
  border-style: none;
  outline: none;
}

.pano-overlay-button-icon {
  display: block;
  width: calc(20px * var(--ui-scale, 1));
  height: calc(20px * var(--ui-scale, 1));
  flex-shrink: 0;
}

.pano-overlay-button:hover {
  background-color: var(--color-asphalt-400);
}

/* Chevron-only toggle: a square pill with no label, sitting at the end of the row. */
.pano-overlay-toggle {
  width: calc(28px * var(--ui-scale, 1));
  padding: 0;
  justify-content: center;
}