@if (config(debug) == true) {
  /* ==========================================================================
     UTILITIES / #DEBUG
     ========================================================================== */

  /* Layout debugging
     =========================================== */

  /**
   * Warn people when they try to manipulate layout items in grids that are
   * already reversed.
   */
  .o-layout--reverse {
    > [class*="u-push"],
    > [class*="u-pull"] {
      outline: 10px solid red;
    }
  }

  /**
   * Warn people when they try to use layout items outside of a layout context.
   */
  .o-layout__item {
    outline: 10px solid red;

    .o-layout > & {
      outline: none;
    }
  }

}