/* Copyright (c) 2026 DeepBeepMeep - part of WanGP, WanGP Community License 2.0 (see LICENSE.txt) */
.wangp-zoom-viewport {
    overflow: hidden;
}
.wangp-zoom-image {
    transform-origin: center;
    user-select: none;
    -webkit-user-drag: none;
}
.wangp-zoomed {
    cursor: grab;
    touch-action: none;
}
.wangp-zoomed.wangp-panning {
    cursor: grabbing;
}
.wangp-image-zoom-controls {
    position: absolute;
    top: 28px;
    right: 0;
    z-index: 31;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.icon-button-wrapper > .wangp-image-zoom-controls,
.wv-preview-actions > .wangp-image-zoom-controls {
    top: calc(100% + var(--spacing-xxs, 1px));
    right: -1px;
    height: auto;
    flex-direction: column;
    gap: var(--spacing-sm, 2px);
}
.icon-button-wrapper > button:has(+ .wangp-image-zoom-controls)::after,
.icon-button-wrapper.wangp-image-zoom-controls button:not(:last-child):not(.no-border *)::after {
    display: none;
}
.wangp-image-zoom-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xxs, 1px);
    border: 1px solid transparent;
    border-radius: var(--radius-xs, 2px);
    background: var(--block-background-fill);
    color: var(--block-label-text-color);
    cursor: pointer;
}
.wangp-image-zoom-controls button > div {
    display: flex;
    width: 14px;
    height: 14px;
}
.wangp-image-zoom-controls svg {
    width: 100%;
    height: 100%;
}
.wangp-image-zoom-controls button:hover {
    background: var(--background-fill-secondary);
}
.wangp-image-zoom-controls button:disabled {
    opacity: 0.45;
    cursor: default;
}
.wangp-image-zoom-controls button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
#media-viewer .wangp-image-zoom-controls {
    top: max(62px, calc(env(safe-area-inset-top) + 50px));
    right: max(12px, env(safe-area-inset-right));
    gap: 6px;
}
#media-viewer .wangp-image-zoom-controls button > div {
    width: 24px;
    height: 24px;
}