{"version":3,"file":"BarcodeScanner.module.cjs","names":[],"sources":["../../../src/components/BarcodeScanner/BarcodeScanner.module.css"],"sourcesContent":[".scanner {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The viewport is a fixed-ratio box and the video fills it with `object-fit: cover`,\n * because a camera hands back whatever aspect ratio the device felt like: letting the\n * element size itself makes the layout jump the moment the stream arrives, which on a\n * phone pushes the button the user was aiming at off the screen.\n */\n.viewport {\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface-3);\n}\n\n.video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n/*\n * Corner brackets: they tell the user where to aim without hiding the frame, which a\n * full border or a dimming mask would. Eight background layers — a horizontal and a\n * vertical bar per corner — because a `linear-gradient` cannot draw an L.\n */\n.frame {\n    position: absolute;\n    inset: 12%;\n    background-image:\n        linear-gradient(var(--tempest-primary) 0 0), linear-gradient(var(--tempest-primary) 0 0),\n        linear-gradient(var(--tempest-primary) 0 0), linear-gradient(var(--tempest-primary) 0 0),\n        linear-gradient(var(--tempest-primary) 0 0), linear-gradient(var(--tempest-primary) 0 0),\n        linear-gradient(var(--tempest-primary) 0 0), linear-gradient(var(--tempest-primary) 0 0);\n    background-repeat: no-repeat;\n    background-size:\n        22% 3px,\n        3px 22%,\n        22% 3px,\n        3px 22%,\n        22% 3px,\n        3px 22%,\n        22% 3px,\n        3px 22%;\n    background-position:\n        left top,\n        left top,\n        right top,\n        right top,\n        left bottom,\n        left bottom,\n        right bottom,\n        right bottom;\n    pointer-events: none;\n}\n\n.laser {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    height: 2px;\n    background-color: var(--tempest-primary);\n    opacity: 0.35;\n}\n\n.laserActive {\n    opacity: 0.9;\n    animation: tempest-barcode-sweep 1.6s ease-in-out infinite alternate;\n}\n\n@keyframes tempest-barcode-sweep {\n    from {\n        top: 0;\n    }\n    to {\n        top: calc(100% - 2px);\n    }\n}\n\n/*\n * A sweeping line is the one animation here, and it is the first thing to drop: the\n * indicator that matters is the `role=\"status\"` text, so with reduced motion the line\n * simply sits still at the top of the frame.\n */\n@media (prefers-reduced-motion: reduce) {\n    .laserActive {\n        animation: none;\n    }\n}\n\n.torch {\n    position: absolute;\n    top: var(--tempest-space-2);\n    right: var(--tempest-space-2);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--tempest-space-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.torch[aria-pressed=\"true\"] {\n    border-color: var(--tempest-warning);\n    background-color: var(--tempest-warning-bg);\n    color: var(--tempest-warning-fg);\n}\n\n.torch:focus-visible,\n.retry:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .torch {\n        transition: none;\n    }\n}\n\n/* Touch hit-slop — 44×44 without changing the visual footprint, as `Button` does. */\n@media (pointer: coarse) {\n    .torch::after {\n        content: \"\";\n        position: absolute;\n        inset: -8px;\n    }\n}\n\n.overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    padding: var(--tempest-space-3);\n    background-color: var(--tempest-surface);\n    text-align: center;\n}\n\n.overlayText {\n    margin: 0;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n}\n\n.retry {\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid transparent;\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.status {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    margin: 0;\n    min-height: 1.25em;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.statusIcon {\n    flex: 0 0 auto;\n}\n\n.notice {\n    margin: 0;\n    padding: var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n}\n\n.footer {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n"],"mappings":";"}