@layer components {
  .rs-flyout {
    inline-size: min(320px, calc(100vw - var(--rs-unit-x8)));
    max-block-size: min(420px, calc(100dvh - var(--rs-unit-x8)));
    overflow: auto;
    border: 1px solid var(--rs-color-border-neutral-faded);
    border-radius: var(--rs-radius-medium);
    background: var(--rs-color-background-elevation-overlay);
    color: var(--rs-color-foreground-neutral);
    box-shadow: var(--rs-shadow-overlay);
    transform-origin: var(--rs-flyout-origin-x, 50%)
      var(--rs-flyout-origin-y, 0%);
    transition:
      opacity var(--rs-duration-fast) var(--rs-easing-decelerate),
      transform var(--rs-duration-fast) var(--rs-easing-decelerate);
  }

  .rs-flyout[data-state="closed"] {
    opacity: 0;
    transform: scale(0.92) translateY(var(--rs-unit-x2));
    pointer-events: none;
  }

  .rs-flyout[data-position^="top"] {
    --rs-flyout-origin-y: 100%;
  }

  .rs-flyout[data-position$="start"] {
    --rs-flyout-origin-x: 0%;
  }

  .rs-flyout[data-position$="end"] {
    --rs-flyout-origin-x: 100%;
  }
}