/**
 * popover.css
 *
 * Styles for the native HTML Popover API.
 * ------------------------------------------------------------------------------
 * @feature {Popover API} - Provides styles for `[popover]` elements.
 * @feature {::backdrop} - Styles the background overlay for modal popovers.
 * @feature {Animations} - Uses `@starting-style` for robust entry/exit animations.
 */

[popover] {
  --b-bg: var(--surface-default);
  --b-bw: var(--border-width, 1px);
  --b-bc: var(--outline-default);
  --b-r: var(--radius-lg, 0.75rem);
  --b-p: var(--spacing-lg, 1.5rem);
  background: var(--b-bg);
  color: var(--auto-contrast-text, oklch(from var(--b-bg) clamp(0.1, (var(--l-threshold, 0.65) / l - 1) * 999, 0.98) min(c, var(--c-threshold, 0.08)) h));
  border: var(--b-bw) solid var(--b-bc);
  border-radius: var(--b-r);
  padding: var(--b-p);
  position: fixed;
  inset: 0;
  inline-size: min(var(--popover-width, 22rem), calc(100vw - 2rem));
  max-inline-size: min(90vw, var(--popover-max-width, 24rem));
  max-block-size: min(80vh, var(--popover-max-height, 32rem));
  margin: auto;
  overflow: auto;
  box-shadow: var(--popover-shadow, var(--shadow-lg, 0 1rem 2rem rgb(0 0 0 / 0.18)));
}
[popover]::backdrop {
  background: var(--popover-backdrop, transparent);
}

[popover][data-scrim]::backdrop {
  --popover-backdrop: oklch(0% 0 0 / 0.4);
}

/* Modern entry/exit animation support */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: translateY(10px);
  }
}

[popover]:popover-open {
  transition: opacity 300ms ease-out, transform 300ms ease-out, display 300ms;
}