/*
 * 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;
}