{"version":3,"file":"tooltip.css.cjs","names":[],"sources":["../../../src/overlay/tooltip/tooltip.css?inline"],"sourcesContent":["/* ========================================\n   Popover UA resets — unlayered so they unconditionally beat\n   the browser's [popover] UA stylesheet (padding / inset / border / margin).\n   Must NOT be inside @layer; unlayered author rules win over every layer and\n   every UA default.\n   ======================================== */\n.tooltip {\n  inset: unset;\n  padding: calc(var(--size-0-5) / 2) var(--size-2) var(--size-0-5);\n  margin: 0;\n  overflow: visible;\n  border: var(--_tooltip-border-width, var(--border-0)) solid var(--_tooltip-border-color, transparent);\n  transform-origin: center;\n}\n\n@layer refine.base {\n  :host {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tooltip {\n    --_tooltip-fg: var(--color-contrast-100);\n    --_tooltip-bg: color-mix(in oklch, var(--color-contrast-900) 80%, transparent);\n    --_tooltip-border-width: var(--border);\n    --_tooltip-border-color: color-mix(in oklch, var(--color-contrast-100) 12%, transparent);\n    --_tooltip-shadow: var(--shadow-md);\n    --_tooltip-closed-transform: translateY(4px) scale(0.98);\n\n    /* Positioning — JS sets top/left inline */\n    position: fixed;\n    max-width: var(--tooltip-max-width, var(--size-72));\n    font-size: var(--text-xs);\n    font-weight: var(--font-medium);\n    line-height: var(--leading-normal);\n    color: var(--_tooltip-fg);\n    word-break: auto-phrase;\n    white-space: normal;\n    pointer-events: none;\n    background: var(--_tooltip-bg);\n    border-radius: var(--tooltip-radius, var(--rounded-lg));\n    box-shadow: var(--_tooltip-shadow);\n\n    /* Hidden by default (also serves as exit state) */\n    opacity: 0;\n    backdrop-filter: blur(var(--blur-sm));\n    transform: var(--_tooltip-closed-transform);\n    transition:\n      opacity var(--transition-fast),\n      transform var(--transition-fast),\n      display var(--transition-fast) allow-discrete,\n      overlay var(--transition-fast) allow-discrete;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .tooltip {\n      --_tooltip-fg: var(--color-contrast-900);\n      --_tooltip-bg: color-mix(in oklch, var(--color-contrast-100) 80%, transparent);\n      --_tooltip-border-color: color-mix(in oklch, var(--color-contrast-900) 12%, transparent);\n    }\n  }\n\n  .tooltip-text {\n    display: block;\n    white-space: pre-line;\n  }\n\n  .tooltip[data-placement='top'] {\n    --_tooltip-closed-transform: translateY(4px) scale(var(--overlay-enter-scale-dialog));\n  }\n\n  .tooltip[data-placement='bottom'] {\n    --_tooltip-closed-transform: translateY(-4px) scale(var(--overlay-enter-scale-dialog));\n  }\n\n  .tooltip[data-placement='left'] {\n    --_tooltip-closed-transform: translateX(4px) scale(var(--overlay-enter-scale-dialog));\n  }\n\n  .tooltip[data-placement='right'] {\n    --_tooltip-closed-transform: translateX(-4px) scale(var(--overlay-enter-scale-dialog));\n  }\n\n  .tooltip[data-open] {\n    display: block;\n  }\n\n  /* Entry animation via @starting-style */\n  .tooltip:popover-open,\n  .tooltip[data-open] {\n    opacity: 1;\n    transform: translate(0, 0) scale(1);\n    transition:\n      opacity var(--transition-normal),\n      transform var(--transition-spring),\n      display var(--transition-normal) allow-discrete,\n      overlay var(--transition-normal) allow-discrete;\n    will-change: opacity, transform;\n\n    @starting-style {\n      opacity: 0;\n      transform: var(--_tooltip-closed-transform);\n    }\n  }\n}\n\n@layer refine.variants {\n  /* Light tooltip */\n  :host([variant='light']) .tooltip {\n    --_tooltip-fg: var(--color-contrast-900);\n    --_tooltip-bg: color-mix(in oklch, var(--color-contrast-100) 80%, transparent);\n    --_tooltip-border-color: color-mix(in oklch, var(--color-contrast-900) 12%, transparent);\n    --_tooltip-shadow: var(--shadow-md);\n  }\n\n  @media (prefers-color-scheme: dark) {\n    :host([variant='light']) .tooltip {\n      --_tooltip-fg: var(--color-contrast-100);\n      --_tooltip-bg: color-mix(in oklch, var(--color-contrast-900) 80%, transparent);\n      --_tooltip-border-color: color-mix(in oklch, var(--color-contrast-100) 12%, transparent);\n    }\n  }\n}\n\n@layer refine.utilities {\n  :host([size='sm']) .tooltip {\n    font-size: var(--text-xs);\n  }\n\n  :host([size='lg']) .tooltip {\n    font-size: var(--text-base);\n  }\n}\n"],"mappings":""}