/// Overlay grid for development.
///
/// @group dev
///
/// @example scss - usage
///   @include k-DevGrid((z-index: 900));
///
/// @example html
///   <div className="k-DevGrid">
///     <div className="k-DevGrid__container">
///       <div className="k-DevGrid__row">
///         <div className="k-DevGrid__col">
///           <div className="k-DevGrid__inner"></div>
///         </div>
///         <div className="k-DevGrid__col">
///           <div className="k-DevGrid__inner"></div>
///         </div>
///         <div className="k-DevGrid__col">
///           <div className="k-DevGrid__inner"></div>
///         </div>
///         <div className="k-DevGrid__col">
///           <div className="k-DevGrid__inner"></div>
///         </div>
///         <div className="k-DevGrid__col">
///           <div className="k-DevGrid__inner"></div>
///         </div>
///         <div className="k-DevGrid__col">
///           <div className="k-DevGrid__inner"></div>
///         </div>
///         <div className="k-DevGrid__col">
///           <div className="k-DevGrid__inner"></div>
///         </div>
///         <div className="k-DevGrid__col">
///           <div className="k-DevGrid__inner"></div>
///         </div>
///         <div className="k-DevGrid__col">
///           <div className="k-DevGrid__inner"></div>
///         </div>
///         <div className="k-DevGrid__col">
///           <div className="k-DevGrid__inner"></div>
///         </div>
///         <div className="k-DevGrid__col">
///           <div className="k-DevGrid__inner"></div>
///         </div>
///         <div className="k-DevGrid__col">
///           <div className="k-DevGrid__inner"></div>
///         </div>
///       </div>
///     </div>
///   </div>
@mixin k-DevGrid($options: ()) {
  $z-index: k-default(map-get($options, 'z-index'), 9998);

  .k-DevGrid {
    position: fixed;
    top: 0;
    z-index: $z-index;

    width: 100%;
    height: 100%;

    pointer-events: none;
  }

  .k-DevGrid__container {
    @include k-container;
    box-sizing: border-box;
    height: 100%;

    outline: 1px dotted rgba(black, .2);
  }

  .k-DevGrid__container--withoutOutline {
    outline: none;
  }

  .k-DevGrid__row {
    height: 100%;
    @include k-grid;
  }

  .k-DevGrid__col {
    height: 100%;

    @include k-grid-col(1);
  }

  .k-DevGrid__inner {
    height: 100%;
    background: rgba(black, .1);
  }
}