{"version":3,"file":"sheet.module.mjs","names":[],"sources":["../../../../package/common/styles/sheet.module.pcss"],"sourcesContent":["/*\n * Bottom-sheet presentation, shared by every popup that can switch away from being anchored to\n * its trigger (see `useSheet`).\n *\n * Every selector is doubled (`.sheet.sheet`) on purpose: these classes land on the same elements\n * as a component's own single-class panel styles and have to win over them. Which of two\n * equal-specificity rules wins otherwise depends on the order the bundler happens to emit the\n * two CSS modules in, which is not something a component should have to depend on.\n */\n\n.sheet.sheet {\n  position: fixed;\n  left: 0;\n  right: 0;\n  margin: 0 auto;\n  width: 100%;\n\n  /* Wide enough for a comfortable list on a phone, narrow enough not to span a tablet —\n     `Presentation.Auto` reaches a 744px one, where full width would be a banner rather than a\n     sheet. A token like the other two sheet dimensions, since this selector is doubled and a\n     consumer could otherwise only beat it with an inline style. */\n  max-width: var(--sheet-max-width, 560px);\n\n  /* Two separate caps: how much of the screen a sheet may take at most, and how much screen\n     there actually is — the latter set inline by `useSheet` from the visual viewport, since no\n     viewport unit shrinks when the on-screen keyboard opens. */\n  max-height: min(var(--sheet-max-height, 70vh), var(--sheet-available-height, 100vh));\n  max-height: min(var(--sheet-max-height, 70dvh), var(--sheet-available-height, 100dvh));\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n  animation: sheetSlideIn 0.2s ease-out;\n}\n\n/* What a sheet looks like where it meets the screen, split out from `.sheet-panel` because a\n   component whose own root is the surface (Modal) needs the look without the fill-the-root\n   layout below it. */\n.sheet-surface.sheet-surface {\n  overscroll-behavior: contain;\n  border-radius: calc(var(--default-border-radius) + 4px) calc(var(--default-border-radius) + 4px) 0 0;\n\n  /* Clears the home indicator on a phone without leaving a gap on a device that has none. */\n  padding-bottom: max(var(--sheet-safe-padding, 8px), env(safe-area-inset-bottom));\n}\n\n.sheet-panel {\n  composes: sheet-surface;\n}\n\n.sheet-panel.sheet-panel {\n  position: static;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  max-height: 100%;\n\n  /* Overrides a panel that caps its own width when anchored, e.g. Popover's 320px. */\n  max-width: 100%;\n\n  /* The sheet root owns the entrance animation; a panel that scales itself in when anchored\n     (Popover) would otherwise play a second, conflicting one on top of the slide-up. */\n  animation: none;\n  overflow-y: auto;\n}\n\n/* For an inner list that caps its own height when anchored: the sheet caps the height instead. */\n.sheet-scroll.sheet-scroll {\n  max-height: none;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n.sheet-backdrop.sheet-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: #00000052;\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  animation: sheetBackdropFadeIn 0.2s ease-out;\n}\n\n@keyframes sheetSlideIn {\n  from {\n    transform: translateY(100%);\n  }\n\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes sheetBackdropFadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n/* Neither animation has a fill mode, so removing them lands both at their natural state: the\n   panel already at translateY(0), the backdrop already opaque. */\n@media (prefers-reduced-motion: reduce) {\n  .sheet-panel,\n  .sheet-backdrop.sheet-backdrop {\n    animation: none;\n  }\n}\n"],"mappings":""}