{"version":3,"file":"panZoom.module.mjs","names":[],"sources":["../../../../package/common/panZoom/panZoom.module.pcss"],"sourcesContent":[".panZoom {\n  position: relative;\n\n  /* `100%` tracks fit a sized root, and fall back to `auto` on an unsized one, which takes the content's height. */\n  display: grid;\n  grid-template: 100% / 100%;\n\n  /* Not `hidden`, which focus on a link in zoomed content scrolls, and the geometry ignores scroll. */\n  overflow: clip;\n\n  /* At the fitted size a one-finger drag still scrolls the page; the pinch is ours either way. */\n  touch-action: pan-x pan-y;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n\n  /* Inset, because the root clips a ring drawn outside. */\n  &:focus-visible {\n    outline: none;\n    box-shadow: inset 0 0 0 2px var(--focus-border-color, var(--primary-color));\n  }\n\n  &-capture {\n    touch-action: none;\n  }\n\n  &-zoomed {\n    cursor: grab;\n\n    &:active {\n      cursor: grabbing;\n    }\n  }\n\n  /* `transform-origin: 0 0` is what `panZoom.geometry.ts` computes against. */\n  &-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    min-height: 0;\n    transform-origin: 0 0;\n\n    & > :is(img, svg, video, canvas) {\n      min-width: 0;\n      max-width: 100%;\n      min-height: 0;\n      max-height: 100%;\n    }\n\n    & > img {\n      -webkit-user-drag: none;\n    }\n  }\n\n  &-contentAnimated {\n    transition: transform 0.2s ease-out;\n  }\n\n  &-controls {\n    position: absolute;\n    right: var(--spacing-s, 8px);\n    bottom: var(--spacing-s, 8px);\n    z-index: 1;\n    display: flex;\n    gap: var(--spacing-xs, 4px);\n  }\n\n  /* Two classes, to outrank Button and ActionIcon whichever stylesheet loads first. */\n  & &-control {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-shadow: var(--card-shadow);\n    transition: opacity 0.15s;\n  }\n\n  /* The click lands on the controls' box, which gestures ignore, not on the content behind. */\n  &-controlDisabled {\n    opacity: 0.35;\n    pointer-events: none;\n  }\n}\n\n/* Only the animated steps go; a pinch or a drag follows the finger. */\n@media (prefers-reduced-motion: reduce) {\n  .panZoom-contentAnimated {\n    transition: none;\n  }\n}\n"],"mappings":""}