/* Used for every micro utility in this file */

@utility micro {
  > *,
  > :where(.contents) > *,
  > *:where(astro-island, astro-slot) > * {
    flex-grow: var(--grow);
  }
}

/* horizontal *
 *********************/
@utility horizontal {
  @apply micro;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));

  > .spacer,
  > :where(.contents) > .spacer {
    margin-inline-start: auto;
  }
}

/* vertical *
 *********************/
@utility vertical {
  @apply micro;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));

  > .spacer {
    margin-block-start: auto;
  }
}

/* flow *
 *********************/
@utility flow {
  @apply micro;
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
}