/* Vertical layout that applies even spacing between all child elements.
* Doesn't add spacing before first or after last child, so there's no doubling up.
*
* Customisation Options:
*
* Gap Spacing: Set "--space" (see spacing.css)
* Recursive: Use ".stack-recursive" to apply spacing to children of children, recursively.
* Split the Stack: Add ".stack-split" to the chid to split on
*
*/

.stack, .stack-recursive {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > *, .stack-recursive * {
  margin-block: 0;
}

.stack > * + *, .stack-recursive * + * {
  margin-block-start: var(--space, var(--space-s));
}

.stack:only-child, .stack-recursive:only-child {
  block-size: 100%;
}

/* Optionally split the stack at a certain element so that everything
* before appears at the top of the stack, everything after at the bottom
*/
.stack > :nth-child(.stack-split),
.stack-recursive > :nth-child(.stack-split){
  margin-block-end: auto;
}