////////////////////////////////////////////////////////////////////////////////
// unstyled markers
//
// TODO add an option for disabling all these rules in the production build

@mixin mark-unstyled-children {
  * {
    border: 1px dashed red;
  }
}

@mixin is-styled {
  border: 0;
}

////////////////////////////////////////////////////////////////////////////////
// layout strategies

@mixin stack($gap) {
  // Arranges for all children to be separated by the same distance, `$gap`, in
  // such a way that children can also use the same layout (with a different
  // gap) inside them.
  //
  // Source: <https://every-layout.dev/layouts/stack/>
  @include is-styled;
  & > * {
    margin: 0;
  }
  & > * + * {
    margin-top: $gap;
  }
}