/**
 * SWITCHER PRIMITIVE
 * Based on Every Layout's Switcher
 * Switches between horizontal and vertical layout at a container-based threshold
 *
 * Uses the "Holy Albatross" technique: calc((threshold - 100%) * 999)
 * - Negative result (wide container): flex-basis becomes 0, elements grow horizontally
 * - Positive result (narrow container): huge flex-basis forces vertical stack
 *
 * Usage:
 * .switcher - Default 30rem threshold
 * .switcher[data-switcher="mobile"] - 20rem threshold
 * .switcher[data-switcher="tablet"] - 40rem threshold
 * etc.
 */

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--s0));
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-limit, 30rem) - 100%) * 999);
}

/* ========================================
   DATA ATTRIBUTE VARIANTS
   Breakpoint configurations
   ======================================== */

/* Mobile-first threshold */
.switcher[data-switcher="mobile"] {
  --switcher-limit: 20rem;
}

/* Tablet threshold */
.switcher[data-switcher="tablet"] {
  --switcher-limit: 40rem;
}

/* Wide threshold */
.switcher[data-switcher="wide"] {
  --switcher-limit: 60rem;
}

/* Ultra-wide threshold */
.switcher[data-switcher="ultra"] {
  --switcher-limit: 80rem;
}

/* ========================================
   QUANTITY QUERIES
   Force vertical layout when too many items
   Prevents squashed layouts with many elements
   ======================================== */

/* Switch to vertical when 5+ items */
.switcher > :nth-last-child(n+5),
.switcher > :nth-last-child(n+5) ~ * {
  flex-basis: 100%;
}

/* Switch to vertical when 7+ items */
.switcher[data-switcher="quantity-7"] > :nth-last-child(n+7),
.switcher[data-switcher="quantity-7"] > :nth-last-child(n+7) ~ * {
  flex-basis: 100%;
}

/* Switch to vertical when 10+ items */
.switcher[data-switcher="quantity-10"] > :nth-last-child(n+10),
.switcher[data-switcher="quantity-10"] > :nth-last-child(n+10) ~ * {
  flex-basis: 100%;
}