/*
HoverCard

Built on the popover's chrome: the content is `.popover.hover-card`, the
arrow `.popover-arrow`. This file adds only what a preview card does
differently: it is not a dialog, takes no focus ring of its own, and lays
out a media row (avatar, then text) when asked.

<div class="popover-root hover-card-root" data-popover-root>
  <span class="popover-trigger" data-popover-trigger>   slot "trigger"
  <div class="popover hover-card" popover="manual" data-state data-side data-align>
*/

@layer components {

.hover-card {
  font-size: var(--text-ui);
}

/* Unless it scrolls: an overflowing card is a Tab stop (popover.ts
   keepScrollStops) and shows the ring the popover gives it. */
.hover-card:focus-visible:not([data-popover-scroll-stop]) {
  box-shadow: var(--overlay-shadow);
}

/* A hover card's backdrop only dims: the pointer passes through it, so
   resting on the link or moving to the card keeps working. */
.hover-card-backdrop {
  pointer-events: none;
}

/* A media row: image or avatar, then a column of text. */
.hover-card-media {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
}

.hover-card-media > :last-child {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  min-width:      0;
}

}