/* shortwind: layout@0.0.2 sha:48025daeec83041a */

/* @guide
   Composition primitives. @stack-* stacks children vertically (flex-col);
   @row* lays them out horizontally (flex-row). Choose the gap with the size
   suffix (xs/sm/md/lg on stacks); bare @stack is the default and equals
   @stack-md. Use @grid-2/3/4 only for true multi-column grids, @center to
   center on both axes, @full to fill the parent. Common slips: there is no
   @flex-row (use @row) or @flex-col (use a @stack-*), and the grids are
   @grid-3, not @grid-cols-3.
*/

/* Bare stack — default gap, alias for @stack-md. */
@recipe stack { @stack-md }

/* Vertical stack with extra-small gap. */
@recipe stack-xs {
  flex flex-col gap-1
}

/* Vertical stack with small gap. */
@recipe stack-sm {
  flex flex-col gap-2
}

/* Vertical stack with medium gap. */
@recipe stack-md {
  flex flex-col gap-4
}

/* Vertical stack with large gap. */
@recipe stack-lg {
  flex flex-col gap-8
}

/* Horizontal row with default gap and centered items. */
@recipe row {
  flex flex-row items-center gap-2
}

/* Horizontal row with space between children. */
@recipe row-between {
  flex flex-row items-center justify-between gap-2
}

/* Horizontal row aligned to the end. */
@recipe row-end {
  flex flex-row items-center justify-end gap-2
}

/* Two-column responsive grid. */
@recipe grid-2 {
  grid grid-cols-1 gap-4 sm:grid-cols-2
}

/* Three-column responsive grid. */
@recipe grid-3 {
  grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3
}

/* Four-column responsive grid. */
@recipe grid-4 {
  grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4
}

/* Center content horizontally and vertically. */
@recipe center {
  flex items-center justify-center
}

/* Fill the available width and height. */
@recipe full {
  h-full w-full
}