/*
Popover

<div class="popover-root" data-popover-root>        display: contents; hosts the behavior
  <span class="popover-trigger" data-popover-trigger> display: contents; slot "trigger"
  <span class="popover-anchor" data-popover-anchor>   display: contents; slot "anchor"
  <div class="popover" popover="manual" role="dialog" data-state data-side data-align>
    <span class="popover-arrow" data-popover-arrow>  optional
    [.popover-body]                                  with the arrow: the scroll box
    .popover-header > .popover-title + .popover-description
    ...content...

The content sits in the top layer (popover="manual"), positioned by
float(), which sets data-side, data-align, --transform-origin,
--available-height and --anchor-width. Motion scales from the anchor and
slides in from the side it opened on.
*/

@layer components {

.popover-root,
.popover-trigger,
.popover-anchor,
.popover-close-part {
  display: contents;
}

.popover {
  /* Arrow: a square turned 45deg, half of it outside the edge. */
  --popover-arrow-size: var(--space-2-5);

  box-sizing:       border-box;
  width:            var(--container-xs);
  max-width:        var(--available-width, calc(100vw - 2 * var(--space-2)));
  padding:          var(--overlay-padding-lg);
  overflow:         visible;
  color:            var(--overlay-ink);
  background:       var(--overlay-bg);
  border:           var(--overlay-border-width) solid var(--overlay-border);
  border-radius:    var(--radius-overlay);
  box-shadow:       var(--overlay-shadow);
  font-family:      var(--font-body);
  font-size:        var(--text-ui);
  line-height:      var(--leading-body);
  /* A long URL or file name wraps instead of widening the fixed width. */
  overflow-wrap:    anywhere;
  outline:          none;
  transform-origin: var(--transform-origin);
}

/* A tall popover scrolls inside the room it has. Without an arrow the
   content itself scrolls. With one, the arrow sits outside the edge, which a
   scroll box would clip, so the content keeps overflow visible and an inner
   .popover-body takes the padding and scrolls instead. */
.popover:not(:has(> .popover-arrow)) {
  max-height: var(--available-height, none);
  overflow-y: auto;
}

.popover:has(> .popover-body) {
  padding: 0;
}

.popover-body {
  box-sizing:    border-box;
  max-height:    calc(var(--available-height, 100vh) - 2 * var(--overlay-border-width));
  padding:       var(--overlay-padding-lg);
  overflow-y:    auto;
  border-radius: inherit;
}

.popover.is-auto { width: max-content; }
.popover.is-sm   { width: calc(var(--container-xs) - var(--space-16)); }
.popover.is-lg   { width: var(--container-md); }
.popover.is-match { min-width: var(--anchor-width); }

.popover:focus-visible {
  box-shadow: var(--overlay-shadow), var(--focus-ring);
}

/* An overflowing body is a Tab stop (popover.ts keepScrollStops). */
.popover-body:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.popover-header {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.popover-header:not(:last-child) {
  margin-bottom: var(--space-3);
}

.popover-title {
  margin:         0;
  font-family:    var(--font-heading);
  font-size:      var(--text-ui);
  font-weight:    var(--weight-strong);
  letter-spacing: var(--tracking-heading);
  line-height:    var(--leading-snug);
  color:          var(--overlay-ink);
}

.popover-description {
  margin:      0;
  font-size:   var(--text-ui);
  line-height: var(--leading-body);
  color:       var(--ink-dim);
}

/* Backdrop */

/* An overlay under the content (backdrop={true}): its own popover="manual"
   element, shown in the top layer just before the content. A press on it is
   a press outside, so it closes a popover without reaching the page. */
.popover-backdrop {
  position:        fixed;
  inset:           0;
  width:           100vw;
  height:          100vh;
  max-width:       none;
  max-height:      none;
  margin:          0;
  padding:         0;
  border:          0;
  background:      var(--backdrop);
  backdrop-filter: blur(var(--backdrop-blur));
}

.popover-backdrop[data-state="open"] {
  animation: popover-fade-in var(--duration-enter) var(--ease-enter);
}

.popover-backdrop[data-state="closed"] {
  animation: popover-fade-out var(--duration-exit) var(--ease-exit) forwards;
}

@keyframes popover-fade-in  { from { opacity: 0; } }
@keyframes popover-fade-out { to   { opacity: 0; } }

/* Viewport */

/* PopoverViewport: when the active trigger changes while open, the previous
   content fades out on top of the new one, which slides in from the side of
   the trigger it came from (data-activation-direction). */
.popover-viewport {
  position: relative;
}

.popover-viewport > [data-previous] {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  animation:      popover-fade-out var(--duration-exit) var(--ease-exit) forwards;
}

.popover-viewport[data-transitioning] > [data-current] {
  animation: popover-viewport-in var(--duration-enter) var(--ease-enter);
}

.popover-viewport[data-activation-direction~="right"] { --popover-viewport-x: var(--enter-distance); }
.popover-viewport[data-activation-direction~="left"]  { --popover-viewport-x: calc(var(--enter-distance) * -1); }

@keyframes popover-viewport-in {
  from {
    opacity:   0;
    transform: translateX(var(--popover-viewport-x, 0));
  }
}

/* Arrow */

.popover-arrow {
  width:          var(--popover-arrow-size);
  height:         var(--popover-arrow-size);
  background:     var(--overlay-bg);
  border:         var(--overlay-border-width) solid var(--overlay-border);
  pointer-events: none;
}

.popover-arrow[data-side="bottom"] {
  top:                calc(var(--popover-arrow-size) / -2 - var(--overlay-border-width));
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform:          rotate(45deg);
}

.popover-arrow[data-side="top"] {
  bottom:             calc(var(--popover-arrow-size) / -2 - var(--overlay-border-width));
  border-left-color:  transparent;
  border-top-color:   transparent;
  transform:          rotate(45deg);
}

.popover-arrow[data-side="right"] {
  left:               calc(var(--popover-arrow-size) / -2 - var(--overlay-border-width));
  border-top-color:   transparent;
  border-right-color: transparent;
  transform:          rotate(45deg);
}

.popover-arrow[data-side="left"] {
  right:               calc(var(--popover-arrow-size) / -2 - var(--overlay-border-width));
  border-bottom-color: transparent;
  border-left-color:   transparent;
  transform:           rotate(45deg);
}

/* Motion */

.popover[data-state="open"] {
  animation: popover-in var(--duration-enter) var(--ease-enter);
}

.popover[data-state="closed"] {
  animation: popover-out var(--duration-exit) var(--ease-exit) forwards;
}

.popover[data-side="bottom"] { --popover-slide-x: 0; --popover-slide-y: calc(var(--enter-distance) * -1); }
.popover[data-side="top"]    { --popover-slide-x: 0; --popover-slide-y: var(--enter-distance); }
.popover[data-side="right"]  { --popover-slide-x: calc(var(--enter-distance) * -1); --popover-slide-y: 0; }
.popover[data-side="left"]   { --popover-slide-x: var(--enter-distance); --popover-slide-y: 0; }

@keyframes popover-in {
  from {
    opacity:   0;
    transform: translate(var(--popover-slide-x, 0), var(--popover-slide-y, 0)) scale(var(--enter-scale));
  }
}

@keyframes popover-out {
  to {
    opacity:   0;
    transform: scale(var(--enter-scale));
  }
}

}