/* ==========================================================================
   Base list-box styles
   ========================================================================== */

.list-box {
  @apply relative w-full overflow-clip p-1;

  /**
   * Spacing between direct children.
   *
   * NOTE: We intentionally avoid `display: flex` + `gap` here because
   * react-aria's Virtualizer renders a `position: relative` content
   * div with an explicit large height (e.g. 50000px) as the only child
   * of the ListBox. Flex shrinking would collapse that height and break
   * scrollbar sizing during virtualized scroll.
   */
  & > * + * {
    @apply mt-1;
  }

  /* This makes the horizontal separator take up 94% of the width and be centered */
  [data-slot="separator"][data-orientation="horizontal"] {
    @apply ml-[3%] w-[94%];
  }
}