{"version":3,"file":"popover.module.mjs","names":[],"sources":["../../../../package/common/popover/popover.module.pcss"],"sourcesContent":["/* Neither of these two generates a box, so the trigger lands in the consumer's\n   layout exactly as if Popover were not around it: it is the flex item, the grid\n   item, the block-level child. A field that fills its column still fills it, a\n   short button is still only as wide as itself, and a row that stretches its\n   children reaches the trigger instead of stopping at a wrapper around it. They\n   stay in the event path, so the handlers on them still fire, and\n   `usePopoverPosition` already looks past boxless wrappers for its anchor.\n\n   Every box we tried here was wrong in one direction or the other. A wrapper that\n   spans its container opens the panel from the empty space beside a short button.\n   `width: fit-content` collapses a field whose own width is a percentage of its\n   parent. A flex root stretches the trigger's height but sizes its width by\n   content, which collapsed KlipyPicker's search field.\n\n   The cost is that `className`, `style` and `classNames.root` cannot paint\n   anything on these two, because there is nothing to paint on. */\n.popover {\n  display: contents;\n\n  &-trigger {\n    display: contents;\n  }\n\n  &-floating {\n    position: fixed;\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    /* Hidden until usePopoverPosition writes the first coordinates, to avoid a top-left flash. */\n    visibility: hidden;\n  }\n\n  &-panel {\n    position: relative;\n\n    /* Above the arrow so the panel background hides the arrow's inner half — only the\n       tip pokes out past the panel edge. */\n    z-index: 1;\n    color: var(--text-color);\n    font-family: var(--default-font);\n    font-size: var(--default-font-size);\n    background: var(--background-modal);\n    box-shadow: var(--card-shadow);\n    border-radius: calc(var(--default-border-radius) + 4px);\n    padding: 12px 14px;\n\n    /* A readable measure for a popover of text. A panel that brings its own\n       width — a calendar, a media grid — turns it off with `constrainWidth`.\n       `.sheet-panel` overrides this by name for the sheet path; check there\n       before touching the cap. */\n    &-constrained {\n      max-width: min(320px, calc(100vw - 24px));\n    }\n\n    animation: popoverIn 0.12s ease-out forwards;\n  }\n\n  &-arrow {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    background: var(--background-modal);\n    box-shadow: var(--card-shadow);\n    transform: rotate(45deg);\n  }\n\n  /* Arrow sits on the panel edge facing the trigger; --arrow-x / --arrow-y centre it on the trigger. */\n  &-floating[data-placement='bottom'] &-arrow {\n    top: -5px;\n    left: var(--arrow-x, 50%);\n    margin-left: -5px;\n  }\n\n  &-floating[data-placement='top'] &-arrow {\n    bottom: -5px;\n    left: var(--arrow-x, 50%);\n    margin-left: -5px;\n  }\n\n  &-floating[data-placement='right'] &-arrow {\n    left: -5px;\n    top: var(--arrow-y, 50%);\n    margin-top: -5px;\n  }\n\n  &-floating[data-placement='left'] &-arrow {\n    right: -5px;\n    top: var(--arrow-y, 50%);\n    margin-top: -5px;\n  }\n\n  /* Grow from the edge nearest the trigger. */\n  &-floating[data-placement='bottom'] &-panel {\n    transform-origin: top center;\n  }\n\n  &-floating[data-placement='top'] &-panel {\n    transform-origin: bottom center;\n  }\n\n  &-floating[data-placement='right'] &-panel {\n    transform-origin: center left;\n  }\n\n  &-floating[data-placement='left'] &-panel {\n    transform-origin: center right;\n  }\n\n  @keyframes popoverIn {\n    from {\n      opacity: 0.4;\n      transform: scale(0.7);\n    }\n\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .popover-panel {\n    animation: none;\n  }\n}\n"],"mappings":""}