{"version":3,"file":"loadingOverlay.module.mjs","names":[],"sources":["../../../../package/common/loadingOverlay/loadingOverlay.module.pcss"],"sourcesContent":[".loadingOverlay {\n  position: relative;\n\n  &-content {\n    /* Its own stacking context, so nothing inside with a z-index (a sticky header) paints over the backdrop. */\n    isolation: isolate;\n    height: 100%;\n  }\n\n  &-backdrop {\n    position: absolute;\n    inset: 0;\n    display: grid;\n    place-items: center;\n    padding: var(--spacing-m, 12px);\n    border-radius: inherit;\n    background: var(--loading-overlay-background, color-mix(in srgb, var(--background) 50%, transparent));\n    -webkit-backdrop-filter: blur(var(--loading-overlay-blur, 4px));\n    backdrop-filter: blur(var(--loading-overlay-blur, 4px));\n    cursor: progress;\n    animation: loadingOverlayFade 0.2s ease-out;\n\n    /* A transition rather than keyframes, so loading again mid-fade turns it back from where it is\n       instead of restarting from 0. 0.2s is FADE_OUT_MS in loadingOverlay.tsx, which unmounts it. */\n    transition: opacity 0.2s ease-in;\n\n    &-leaving {\n      opacity: 0;\n    }\n  }\n\n  &-panel {\n    /* Sticky, so on content taller than the screen it stays in view rather than at the middle. */\n    position: sticky;\n    top: var(--spacing-l, 24px);\n    bottom: var(--spacing-l, 24px);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 0.75em;\n    animation: loadingOverlayRise 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;\n  }\n\n  &-message {\n    max-width: 32ch;\n    font-size: var(--default-font-size);\n    font-weight: 500;\n    text-align: center;\n    color: transparent;\n    background: linear-gradient(100deg, var(--text-dark) 40%, var(--text-color) 50%, var(--text-dark) 60%) 0 0 / 300%\n      100%;\n    -webkit-background-clip: text;\n    background-clip: text;\n    animation: loadingOverlayShimmer 2.4s linear infinite;\n  }\n}\n\n@keyframes loadingOverlayFade {\n  from {\n    opacity: 0;\n  }\n}\n\n@keyframes loadingOverlayRise {\n  from {\n    opacity: 0;\n    transform: translateY(8px) scale(0.94);\n  }\n}\n\n@keyframes loadingOverlayShimmer {\n  from {\n    background-position: 100% 0;\n  }\n\n  to {\n    background-position: 0 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .loadingOverlay-panel {\n    animation-name: loadingOverlayFade;\n  }\n\n  .loadingOverlay-message {\n    color: var(--text-color);\n    background: none;\n    animation: none;\n  }\n}\n"],"mappings":""}