/**
 * Popover Component - CSS
 * Source: src/components/Atoms/Popover/popover.tsx
 * Last synced: 2026-04 (ui-core v2.0.76)
 */

@import url("../tokens.4b8ea74adec1.css");

.ui-popover-trigger { position: relative; display: inline-flex; }

.ui-popover {
    position: absolute;
    z-index: 50;
    /* React uses fixed w-72 (288px); we keep min-width so consumers (e.g. DateRangePicker)
       can size to content without an explicit override class. */
    min-width: 200px;
    padding: 16px;
    background: var(--uicore-popover);
    color: var(--uicore-popover-foreground);
    border: 1px solid var(--uicore-border);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    display: none;
    animation: popoverFadeIn 0.15s ease;
}

.ui-popover.open { display: block; }

.ui-popover.bottom { top: calc(100% + 4px); left: 0; }
.ui-popover.top { bottom: calc(100% + 4px); left: 0; }
.ui-popover.left { right: calc(100% + 4px); top: 0; }
.ui-popover.right { left: calc(100% + 4px); top: 0; }

@keyframes popoverFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}