.x-overlay {
  --overlay-constraint-top: 0px;
  --overlay-constraint-left: 0px;
  --overlay-constraint-width: 100vw;
  --overlay-constraint-height: 100vh;
  --_ct: var(--overlay-constraint-top, 0px);
  --_cl: var(--overlay-constraint-left, 0px);
  --_cw: var(--overlay-constraint-width, 100vw);
  --_ch: var(--overlay-constraint-height, 100vh);
}

@supports (height: 1svh) {
  .x-overlay {
    --overlay-constraint-width: 100svw;
    --overlay-constraint-height: 100svh;
  }
}

.x-overlay {
  top: var(--_ct);
  left: var(--_cl);
  translate: calc(-50% + var(--overlay-dx, 0px) +
        clamp(50%,
          var(--overlay-x, calc(var(--_cw) / 2)),
          calc(-50% + var(--_cw))))
    calc(-50% + var(--overlay-dy, 0px) +
        clamp(50%,
          var(--overlay-y, calc(var(--_ch) / 2)),
          calc(-50% + var(--_ch))));
  transform: translate(var(--_ex, 0px), var(--_ey, 0px));
  bottom: auto;
  right: auto;
}

@supports (anchor-name: --x) and (position-area: block-end) {
  .x-overlay[data-anchor="element"] {
    translate: var(--overlay-dx, 0px) var(--overlay-dy, 0px);
    position-area: var(--overlay-area, block-end);
    position-try-fallbacks: flip-block, flip-inline;
    position-visibility: anchors-visible;
    margin: var(--overlay-gap, var(--space-2));
    top: auto;
    left: auto;
  }
}

.x-overlay-anchor {
  pointer-events: none;
  width: 0;
  height: 0;
  transition: top var(--overlay-duration, .3s)
      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1)),
    left var(--overlay-duration, .3s)
      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1)),
    width var(--overlay-duration, .3s)
      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1)),
    height var(--overlay-duration, .3s)
      var(--overlay-easing, cubic-bezier(.32, .72, 0, 1));
  position: fixed;
}

@supports (anchor-name: --x) and (position-area: block-end) {
  .x-overlay-anchor[data-follow] {
    top: anchor(top);
    left: anchor(left);
    width: anchor-size(width);
    height: anchor-size(height);
  }
}

.x-overlay {
  --overlay-width: 480px;
  width: var(--overlay-w, var(--overlay-width));
  max-width: var(--_cw);
  height: var(--overlay-h, fit-content);
  max-height: var(--_ch);
  --overlay-duration: .3s;
  --overlay-easing: cubic-bezier(.32, .72, 0, 1);
  transition: top var(--overlay-duration) var(--overlay-easing),
    left var(--overlay-duration) var(--overlay-easing),
    translate var(--overlay-duration) var(--overlay-easing),
    transform var(--overlay-duration) var(--overlay-easing),
    width var(--overlay-duration) var(--overlay-easing),
    height var(--overlay-duration) var(--overlay-easing);
  flex-direction: column;
}

.x-overlay:not([open], :popover-open) {
  pointer-events: none;
}

.x-overlay:where([popover]) {
  display: none;
}

.x-overlay:where([open], :popover-open) {
  display: flex;
}

.x-overlay > .x-card {
  flex: auto;
  min-height: 0;
}

@supports not (translate: 0px) {
  .x-overlay {
    top: auto;
    left: auto;
    margin: auto;
    inset: 0;
  }
}

@supports (interpolate-size: allow-keywords) {
  .x-overlay {
    interpolate-size: allow-keywords;
  }
}