/*
 * 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.
 */

/* A column of small square icon buttons (zoom, minimap, full screen), spaced so they read as one control. */
.ps-icon-button-stack {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--ui-scale, 1));
}

/* `display: flex` above beats the browser's own `[hidden] { display: none }`, so a holder hidden by script (the
   immersive toggle during the tutorial, #5085) needs the attribute restated at higher specificity. */
.ps-icon-button-stack[hidden] {
  display: none;
}

.ps-icon-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 stack's outer corners; a button on its own gets all four. */
.ps-icon-button:first-of-type {
  border-top-left-radius: calc(7px * var(--ui-scale, 1));
  border-top-right-radius: calc(7px * var(--ui-scale, 1));
}

.ps-icon-button:last-of-type {
  border-bottom-left-radius: calc(7px * var(--ui-scale, 1));
  border-bottom-right-radius: calc(7px * var(--ui-scale, 1));
}

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

.ps-icon-button-icon {
  display: block;
  width: calc(18px * var(--ui-scale, 1));
  height: calc(18px * var(--ui-scale, 1));
  transition: transform 0.1s ease;
}

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

/* A row of pill buttons over the pano; each page positions its own row. */
.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);
}

/* The pills sit on imagery, so the ring is white rather than the page's blue; only keyboard focus draws it. */
.pano-overlay-button:focus-visible {
  outline: 2px solid var(--color-neutral-white);
  outline-offset: 2px;
}

/* A pill whose setting is off its default (the Image adjustments) wears a small dot, so a value persisted in an
   earlier session is visible without opening the panel. The chevron wears the same dot while its menu is closed and
   drops it once open, since the pill itself then shows it — the usual overflow-menu badge. */
.pano-overlay-button--active {
  position: relative;
}

.pano-overlay-button--active::after {
  content: "";
  position: absolute;
  top: calc(3px * var(--ui-scale, 1));
  right: calc(3px * var(--ui-scale, 1));
  width: calc(5px * var(--ui-scale, 1));
  height: calc(5px * var(--ui-scale, 1));
  border-radius: 50%;
  background: var(--color-banana-600);
  box-shadow: 0 0 0 1px var(--color-asphalt-400);
}

/* The chevron's badge is a quiet hint that lives on screen all session, so it is white rather than the pill's
   yellow. */
.pano-overlay-toggle.pano-overlay-button--active::after {
  background: var(--color-neutral-white);
}

.pano-overlay-toggle[aria-expanded="true"].pano-overlay-button--active::after {
  display: none;
}

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