.panel {
    overflow: hidden;
    position: relative;
    touch-action: none;
    user-select: none;
}

.panel.armed {
    cursor: grab;
}

.panel.dragging {
    cursor: grabbing;
}

.panel-stage {
    --panel-x: 0;
    --panel-y: 0;
    --panel-scale: 1;

    transform: translate(var(--panel-x), var(--panel-y));
    transform-origin: 0 0;
    width: max-content;
    will-change: transform;
}

.panel-zoom {
    transform: scale(var(--panel-scale));
    transform-origin: 0 0;
    width: max-content;
}

.panel-controls {
    bottom: var(--space-sm);
    display: flex;
    gap: var(--space-xs);
    opacity: 0;
    position: absolute;
    right: var(--space-sm);
    transition: opacity var(--transition-fast) ease;
    z-index: var(--z-dropdown);
}

.panel:hover .panel-controls,
.panel:focus-within .panel-controls,
.panel.dragging .panel-controls {
    opacity: 1;
}

.panel-control {
    align-items: center;
    background: var(--code-block);
    border: var(--border-s) solid var(--accent-subtle);
    border-radius: var(--radius-sm);
    color: var(--white-alpha-muted);
    cursor: pointer;
    display: flex;
    font-size: var(--font-sm);
    height: var(--touch-target-min);
    justify-content: center;
    transition: all var(--transition-fast) ease;
    width: var(--touch-target-min);
}

.panel-control:hover {
    background: var(--overlay-light);
    border-color: var(--banes-lab-accent);
    color: var(--banes-lab-accent);
}

@media (hover: none) {
    .panel-controls {
        opacity: 1;
    }
}