{"version":3,"file":"Lightbox.module.cjs","names":[],"sources":["../../../src/components/Lightbox/Lightbox.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal);\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3);\n    padding-top: max(var(--tempest-space-3), var(--tempest-safe-area-top));\n    padding-bottom: max(var(--tempest-space-3), var(--tempest-safe-area-bottom));\n    background-color: rgb(0 0 0 / 0.88);\n    animation: overlay-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n@keyframes overlay-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n.topBar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    flex: 0 0 auto;\n}\n\n.counter {\n    color: #ffffff;\n    font-size: var(--tempest-text-sm);\n    font-variant-numeric: tabular-nums;\n}\n\n.iconButton {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border: 0;\n    border-radius: var(--tempest-radius-full);\n    background-color: rgb(255 255 255 / 0.12);\n    color: #ffffff;\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.iconButton:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.24);\n}\n\n.iconButton:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.iconButton:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid #ffffff;\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.stage {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-3);\n    flex: 1 1 auto;\n    min-height: 0;\n}\n\n.nav {\n    flex: 0 0 auto;\n}\n\n.figure {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    min-width: 0;\n    min-height: 0;\n}\n\n.image {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.caption {\n    color: rgb(255 255 255 / 0.82);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.thumbnails {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n    padding-bottom: var(--tempest-space-1);\n}\n\n.thumbnail {\n    flex: 0 0 auto;\n    width: 56px;\n    height: 56px;\n    padding: 0;\n    border: 2px solid transparent;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    cursor: pointer;\n    opacity: 0.55;\n    transition:\n        opacity var(--tempest-duration-fast) var(--tempest-ease-out),\n        border-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.thumbnail:hover {\n    opacity: 0.85;\n}\n\n.thumbnailActive {\n    opacity: 1;\n    border-color: #ffffff;\n}\n\n.thumbnail:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid #ffffff;\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.thumbnailImage {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: calc(var(--tempest-radius-sm) - 1px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overlay {\n        animation: none;\n    }\n\n    .iconButton,\n    .thumbnail {\n        transition: none;\n    }\n}\n"],"mappings":";"}