/* prettier-ignore */
@utility breakout-* {
  margin-inline: --spacing(--value(integer) * -1);
  margin-inline: calc(--value([length]) * -1);
}

/* prettier-ignore */
@utility breakout-x-* {
  margin-inline: --spacing(--value(integer) * -1);
  margin-inline: calc(--value([length]) * -1);
}

/* prettier-ignore */
@utility breakout-l-* {
  margin-inline-start: --spacing(--value(integer) * -1);
  margin-inline-start: calc(--value([length]) * -1);
}

/* prettier-ignore */
@utility breakout-r-* {
  margin-inline-end: --spacing(--value(integer) * -1);
  margin-inline-end: calc(--value([length]) * -1);
}

/*********************
 * Vertical breakouts *
 *********************/

/* prettier-ignore */
@utility breakout-y-* {
  margin-block: --spacing(--value(integer) * -1);
  margin-block: calc(--value([length]) * -1);
}

/* prettier-ignore */
@utility breakout-t-* {
  margin-block-start: --spacing(--value(integer) * -1);
  margin-block-start: calc(--value([length]) * -1);
}

/* prettier-ignore */
@utility breakout-b-* {
  margin-block-end: --spacing(--value(integer) * -1);
  margin-block-end: calc(--value([length]) * -1);
}