{"version":3,"file":"modal.module.mjs","names":[],"sources":["../../../../package/common/modal/modal.module.pcss"],"sourcesContent":[".modal {\n  /* Theme tokens resolved once, each with a built-in fallback. Set any of the public\n     `--modal-*` variables via ThemeProvider (theme-wide) or `style` (per instance) to\n     override; unset ones fall back to the values below. */\n  --custom-modal-padding: var(--modal-padding, var(--spacing-l));\n  --custom-modal-gap: var(--modal-gap, var(--spacing-l));\n\n  /* Half the gap, so the scroll port's clipping edge — where the divider sits — lands midway\n     between the chrome and where the content rests, with the same room either side. Flush\n     against the chrome (bleed = gap) reads as a sliced line of text colliding with the title;\n     an unrelated value (this was `0.6em`) puts it at a distance that drifts with the font size. */\n  --custom-modal-body-bleed: var(--modal-body-bleed, calc(var(--custom-modal-gap) / 2));\n\n  /* The panel never comes closer to the screen edge than its own padding, at every size. A\n     percentage instead reads as a different inset on every screen, and pairing one with a\n     breakpoint made the two axes disagree: 5% of a 390px width is 19.5px but 5% of a 780px\n     height is 39px, so the same rule came out narrower and taller than the default on one phone. */\n  --custom-modal-max-width: var(--modal-max-width, calc(100% - 2 * var(--custom-modal-padding)));\n  --custom-modal-max-height: var(--modal-max-height, calc(100% - 2 * var(--custom-modal-padding)));\n\n  padding: var(--custom-modal-padding);\n  border-radius: var(--default-border-radius);\n  background: var(--background-modal);\n  color: var(--text-color);\n  font-family: var(--default-font);\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  transform-origin: bottom center;\n  animation:\n    slideIn 0.2s,\n    fadeIn 0.3s forwards;\n  max-width: var(--custom-modal-max-width);\n  max-height: var(--custom-modal-max-height);\n\n  /* The panel itself never scrolls, so the header stays put; `&-body` is what scrolls. */\n  overflow: hidden;\n\n  /* A sheet-presented modal carries forms and detail views, not a short menu, so it takes more\n     of the screen than the shared default — and keeps the panel's own padding at the bottom edge. */\n  &-sheet {\n    --sheet-max-height: 90dvh;\n    --sheet-safe-padding: var(--custom-modal-padding);\n  }\n\n  &-container {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    top: 0;\n    left: 0;\n\n    /* Shared by every overlay, so the order they are portaled in, which is the order they opened in, decides. */\n    z-index: 1;\n  }\n\n  &-header {\n    display: flex;\n    gap: var(--spacing-m);\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: var(--custom-modal-gap);\n    flex: 0 0 auto;\n\n    div {\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  &-body {\n    /* `min-height: 0` lets this shrink below its content's height so it, not the panel, scrolls. */\n    flex: 1 1 auto;\n    min-height: 0;\n    overflow: auto;\n\n    /* A negative margin cancelled by an equal padding, so a focus ring or a floating label at\n       the body's edge isn't clipped by the scroll container. Override the pair with\n       `--modal-body-bleed`, never with a plain `padding`, which drops the negative half and\n       brings the clipping back. See `docs/Modal.md` for what the two do together. */\n    margin: calc(-1 * var(--custom-modal-body-bleed));\n    padding: var(--custom-modal-body-bleed);\n\n    /* The mask lives in `styles/scrollFade.module.pcss`; the component applies it along with the\n       modifiers saying which end genuinely hides content. The run has to clear the port's own\n       padding before any content fades at all, hence gap + bleed. Set here as the shared sheet's\n       private length rather than as `--scroll-fade-length`, which would inherit down into a\n       `ScrollFade` nested in the body. */\n    --custom-scroll-fade-length: var(\n      --modal-scroll-fade,\n      calc(var(--custom-modal-gap) + var(--custom-modal-body-bleed))\n    );\n  }\n\n  &-footer {\n    margin-top: var(--custom-modal-gap);\n    flex: 0 0 auto;\n  }\n\n  &-close-button {\n    flex-shrink: 0;\n  }\n\n  &-wrapper {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background: #00000052;\n    top: 0;\n    left: 0;\n    transition: all 0.3s ease-in-out;\n    opacity: 0;\n\n    &-shown {\n      opacity: 1;\n    }\n  }\n}\n\n@keyframes slideIn {\n  from {\n    transform: scale(0);\n  }\n\n  to {\n    transform: scale(0.99);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n/* Only the scale-in goes; the backdrop and the panel still fade, which is not motion.\n   `slideIn` ends at scale(0.99) and the panel has no transform of its own, so dropping the\n   animation lands it at scale(1) rather than leaving it collapsed. */\n@media (prefers-reduced-motion: reduce) {\n  .modal {\n    animation: fadeIn 0.3s forwards;\n  }\n}\n"],"mappings":""}