{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Popover/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-popover-arrow-offset-block: 5px;\n    --lobe-popover-arrow-offset-inline: 8px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 12px;\n    height: 6px;\n\n    transition:\n      inset-inline-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n      inset-block-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease);\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    & [data-role='fill'] {\n      fill: ${cssVar.colorBgElevated};\n    }\n\n    & [data-role='stroke'] {\n      fill: none;\n      stroke: ${cssVar.colorBorder};\n      stroke-width: 1px;\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-popover-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-popover-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    box-sizing: border-box;\n    min-width: 120px;\n    max-width: var(--available-width);\n    border-radius: ${cssVar.borderRadius};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow: ${cssVar.boxShadowSecondary}, var(--lobe-ring);\n\n    transition-timing-function: var(--lobe-popover-animation-ease-out);\n    transition-duration: var(--lobe-popover-animation-duration);\n    transition-property: opacity, transform;\n\n    /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n       one frame later; the box only morphs if width/height actually read them. */\n    &[data-layout-animation] {\n      width: var(--popup-width, auto);\n      height: var(--popup-height, auto);\n\n      transition-timing-function:\n        var(--lobe-popover-animation-ease-out), var(--lobe-popover-animation-ease-out),\n        var(--lobe-popover-layout-ease), var(--lobe-popover-layout-ease);\n      transition-duration:\n        var(--lobe-popover-animation-duration), var(--lobe-popover-animation-duration),\n        var(--lobe-popover-layout-duration), var(--lobe-popover-layout-duration);\n      transition-property: opacity, transform, width, height;\n    }\n\n    &[data-repop] {\n      transition: none;\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0)\n        scale(var(--lobe-popover-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-popover-animation-ease-in);\n      transition-duration: var(--lobe-popover-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    --lobe-popover-animation-duration: 150ms;\n    --lobe-popover-animation-translate: 6px;\n    --lobe-popover-animation-scale: 0.96;\n    --lobe-popover-animation-ease-in: ease-in;\n    --lobe-popover-animation-duration-exit: 75ms;\n    --lobe-popover-animation-ease-out: ${cssVar.motionEaseOut};\n    --lobe-popover-translate-x: 0;\n    --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n    --lobe-popover-layout-duration: 380ms;\n    --lobe-popover-layout-ease: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.661,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n\n    z-index: 1100;\n\n    width: min(var(--positioner-width), var(--available-width));\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-popover-animation-ease-out);\n    transition-duration: var(--lobe-popover-animation-duration);\n    transition-property: none;\n\n    &[data-layout-animation] {\n      transition-timing-function: var(--lobe-popover-layout-ease);\n      transition-duration: var(--lobe-popover-layout-duration);\n      transition-property:\n        inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n    }\n\n    &[data-instant],\n    &[data-repop] {\n      transition: none;\n    }\n\n    /* Fallback: never show a popover when the anchor is hidden or the positioner falls back to (0,0). */\n    &[data-anchor-hidden],\n    &[data-zero-origin='true'] {\n      pointer-events: none;\n      visibility: hidden;\n    }\n\n    &[data-placement='top'],\n    &[data-placement='topLeft'],\n    &[data-placement='topRight'] {\n      --lobe-popover-translate-x: 0;\n      --lobe-popover-translate-y: var(--lobe-popover-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-popover-translate-x: 0;\n      --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-popover-translate-x: var(--lobe-popover-animation-translate);\n      --lobe-popover-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-popover-translate-x: calc(var(--lobe-popover-animation-translate) * -1);\n      --lobe-popover-translate-y: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      --lobe-popover-layout-duration: 0s;\n    }\n  `,\n\n  root: css`\n    user-select: none;\n    position: relative;\n    filter: drop-shadow(0 2px 8px rgb(0 0 0 / 12%));\n  `,\n\n  viewport: css`\n    --lobe-popover-viewport-inline-padding: 12px;\n    --lobe-popover-content-shift: 8px;\n    --lobe-popover-content-blur: 4px;\n\n    position: relative;\n    overflow: clip;\n    padding-block: 12px;\n    padding-inline: var(--lobe-popover-viewport-inline-padding);\n\n    /* Old and new content overlap in one clip box while the box morphs; blurring both layers\n       during the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n      opacity: 1;\n      filter: blur(0);\n      transition:\n        transform var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n        opacity calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out),\n        filter calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out);\n    }\n\n    [data-current] {\n      transition-delay:\n        0s, calc(var(--lobe-popover-layout-duration) / 6),\n        calc(var(--lobe-popover-layout-duration) / 6);\n    }\n\n    [data-previous][data-ending-style],\n    [data-current][data-starting-style] {\n      filter: blur(var(--lobe-popover-content-blur));\n    }\n\n    /* Freeze both layers at their own final width so neither re-wraps while the box morphs;\n       the viewport clip reveals the new content as the box grows over it. */\n    [data-previous] {\n      position: absolute;\n      inset-block-start: 12px;\n      inset-inline-start: var(--lobe-popover-viewport-inline-padding);\n      width: calc(var(--popup-width) - var(--lobe-popover-viewport-inline-padding) * 2);\n    }\n\n    &[data-transitioning] [data-current] {\n      width: calc(var(--positioner-width) - var(--lobe-popover-viewport-inline-padding) * 2);\n    }\n\n    &[data-repop] [data-previous] {\n      display: none;\n    }\n\n    &[data-repop] [data-current] {\n      transition: none;\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;cAyBE,OAAO,gBAAgB;;;;;gBAKrB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,OAAO,GAAG;;;;;;;qBAOS,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;kBAEvB,OAAO,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0C1C,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6F5D,MAAM,GAAG;;;;;CAMT,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Ff,EAAE"}