@layer components {
  .rs-popover {
    position-anchor: --rs-popover-anchor;
    position-area: block-end span-inline-end;
    max-inline-size: min(320px, calc(100vw - 32px));
    border: 1px solid var(--rs-color-border-neutral-faded);
    border-radius: var(--rs-radius-medium);
    padding: var(--rs-unit-x4);
    margin: 0;
    background: var(--rs-color-background-elevation-overlay);
    color: var(--rs-color-foreground-neutral);
    box-shadow: var(--rs-shadow-overlay);
    opacity: 0;
    translate: 0 var(--rs-unit-x2);
    position-try: flip-block, flip-inline;
    position-try-fallbacks: flip-block, flip-inline;
    transition:
      opacity var(--rs-duration-fast) var(--rs-easing-decelerate),
      translate var(--rs-duration-fast) var(--rs-easing-decelerate),
      overlay var(--rs-duration-fast) allow-discrete,
      display var(--rs-duration-fast) allow-discrete;
  }

  .rs-popover-anchor {
    anchor-name: --rs-popover-anchor;
  }

  .rs-popover:popover-open,
  .rs-popover:open {
    inset: auto;
    opacity: 1;
    translate: 0;
  }

  @starting-style {
    .rs-popover:popover-open,
    .rs-popover:open {
      opacity: 0;
      translate: 0 0;
    }
  }
}