{"version":3,"file":"lightbox.module.mjs","names":[],"sources":["../../../../package/common/lightbox/lightbox.module.pcss"],"sourcesContent":[".lightbox {\n  position: fixed;\n  inset: 0;\n\n  /* Modal's value: shared by every overlay, so the order they opened in decides. */\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n\n  /* `--custom-lightbox-fade`: how far a swipe to close has gone, 0 to 1. */\n  background: color-mix(\n    in srgb,\n    var(--lightbox-background, var(--background)) calc(100% - var(--custom-lightbox-fade, 0) * 100%),\n    transparent\n  );\n  transition: background-color 0.18s ease-out;\n  color: var(--text-color);\n  font-family: var(--default-font);\n  animation: lightboxFadeIn 0.2s ease-out;\n\n  /* As long as CLOSE_MS in lightbox.tsx. `forwards`, so the last frame holds if that timer runs late. */\n  &-closing {\n    animation: lightboxFadeOut 0.25s ease-in forwards;\n  }\n\n  /* Focused only to catch the focus of a slide that left. */\n  outline: none;\n\n  &-dragging,\n  &-dragging &-toolbar,\n  &-dragging &-panZoom,\n  &-dragging &-glow,\n  &-dragging &-caption {\n    transition: none;\n  }\n\n  &-toolbar {\n    opacity: calc(1 - var(--custom-lightbox-fade, 0));\n    transition: opacity 0.18s ease-out;\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--spacing-m);\n    padding: var(--spacing-s) var(--spacing-m);\n  }\n\n  /* Its auto margin pushes the buttons right, with or without a count in it. */\n  &-counter {\n    margin-inline-end: auto;\n    font-variant-numeric: tabular-nums;\n  }\n\n  &-unavailable {\n    opacity: 0.35;\n    pointer-events: none;\n  }\n\n  &-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--spacing-xs, 4px);\n  }\n\n  /* Two classes, to outrank Carousel's whichever loads first. Clipped only sideways, so an image\n     swiped up passes over the toolbar. Scaled here, not per figure, which would replay on every\n     mount. `touch-action`, or a swipe from the caption scrolls and cancels the swipe to close. */\n  & &-carousel {\n    flex: 1 1 auto;\n    min-height: 0;\n    border-radius: 0;\n    overflow: clip visible;\n    touch-action: none;\n    animation: lightboxZoomIn 0.2s ease-out;\n  }\n\n  /* After the rule above, which it ties with. */\n  &-closing &-carousel {\n    animation: lightboxZoomOut 0.25s ease-in forwards;\n  }\n\n  /* So the flight lands where the image comes to rest. Not `animation: none`, which would replay the\n     scale as the flight ends: the normal duration, back OPEN_FLIGHT_MS later, finds it long over. */\n  &-flying:not(&-closing) &-carousel {\n    animation-duration: 0s;\n  }\n\n  &-arrow {\n    opacity: calc(1 - var(--custom-lightbox-fade, 0));\n  }\n\n  /* A tap clears the screen for the picture. Not `visibility`, which would drop the fade. */\n  &-clear &-toolbar,\n  &-clear &-arrow,\n  &-clear &-caption {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  /* Three classes, to outrank Carousel's two-class transition, which would trail the finger. */\n  &-dragging &-carousel &-arrow {\n    transition: none;\n  }\n\n  /* Carousel's row otherwise takes the tallest slide's height, and an image taller than the screen\n     pushes it past the bottom. */\n  &-track {\n    height: 100%;\n    grid-template-rows: 100%;\n  }\n\n  /* A grid, so the glow shares the PanZoom's cell and is fitted in it the way the image is. Isolated,\n     so the glow's negative z-index puts it behind the image rather than behind the backdrop. */\n  &-figure {\n    display: grid;\n    grid-template: minmax(0, 1fr) / minmax(0, 1fr);\n    gap: var(--spacing-s);\n    isolation: isolate;\n    box-sizing: border-box;\n    height: 100%;\n    margin: 0;\n    padding: 0 var(--spacing-m) var(--spacing-m);\n  }\n\n  /* Down to three quarters by the time a swipe to close has faded the backdrop out. */\n  &-panZoom,\n  &-glow {\n    grid-area: 1 / 1;\n    scale: calc(1 - var(--custom-lightbox-fade, 0) * 0.25);\n    transition: scale 0.18s ease-out;\n  }\n\n  /* The image's own size, capped by the cell as PanZoom caps the image, and a little over it so the\n     colours reach past its edges. Brightened, or a dark image throws a grey shadow on a light theme.\n     No `will-change`: on a layer of its own the compositor redoes the blur every frame, measured at 8 to\n     13 times its work during a swipe. */\n  &-glow {\n    z-index: -1;\n    place-self: center;\n    max-width: 100%;\n    max-height: 100%;\n    opacity: 0;\n    filter: blur(48px) saturate(2) brightness(1.2);\n    scale: calc(1.08 * (1 - var(--custom-lightbox-fade, 0) * 0.25));\n    transition:\n      scale 0.18s ease-out,\n      opacity 0.4s ease-out;\n    pointer-events: none;\n  }\n\n  &-glowLit {\n    opacity: 1;\n  }\n\n  /* Off while the copy in flight stands in for the image, and lit again once it has landed. */\n  &-flying &-glowLit {\n    opacity: 0;\n  }\n\n  /* The copy in flight stands in for it. */\n  &-flying &-panZoom {\n    visibility: hidden;\n  }\n\n  /* Over the dialog: the same z-index, later in the document. Placed and sized from lightbox.tsx. */\n  &-flyer {\n    position: fixed;\n    z-index: 1;\n    display: block;\n    margin: 0;\n    object-fit: cover;\n    transform-origin: 0 0;\n    pointer-events: none;\n  }\n\n  /* As large as the image will show: its own width, set by Image, capped by PanZoom like the image\n     is. Until that width is known, the whole viewport. */\n  &-thumbnail {\n    width: var(--custom-image-width, 100%);\n    height: 100%;\n    object-fit: contain;\n  }\n\n  /* Only once loading takes a moment, so a cached image never flashes a spinner. */\n  &-loader {\n    animation: lightboxLoaderAppear 0.2s 0.5s both;\n  }\n\n  &-error {\n    margin: 0;\n    color: var(--text-dark);\n    text-align: center;\n  }\n\n  &-caption {\n    flex: 0 0 auto;\n    opacity: calc(1 - var(--custom-lightbox-fade, 0));\n    transition: opacity 0.18s ease-out;\n    text-align: center;\n  }\n}\n\n@keyframes lightboxFadeIn {\n  from {\n    opacity: 0;\n  }\n}\n\n@keyframes lightboxLoaderAppear {\n  from {\n    opacity: 0;\n  }\n}\n\n@keyframes lightboxFadeOut {\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes lightboxZoomIn {\n  from {\n    transform: scale(0.95);\n  }\n}\n\n@keyframes lightboxZoomOut {\n  to {\n    transform: scale(0.95);\n  }\n}\n\n/* `!important` against the spring back useSwipeDismiss sets inline. Fades are not motion and stay. */\n@media (prefers-reduced-motion: reduce) {\n  .lightbox .lightbox-carousel,\n  .lightbox-closing .lightbox-carousel {\n    animation: none;\n  }\n\n  .lightbox-figure {\n    transition: none !important;\n  }\n\n  .lightbox-panZoom {\n    transition: none;\n  }\n\n  .lightbox-glow {\n    transition: opacity 0.4s ease-out;\n  }\n}\n"],"mappings":""}