/// Overlay name of the current breakpoint for development.
///
/// @group dev
///
/// @example scss - usage
///   @include k-DevBreakpoint((z-index: 901));
///
/// @example html
///   <div className="k-DevBreakpoint"></div>
@mixin k-DevBreakpoint($options: ()) {
  $z-index: k-default(map-get($options, 'z-index'), 9999);

  // Show the name of the current breakpoint

  .k-DevBreakpoint {
    pointer-events: none;
  }

  .k-DevBreakpoint:before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: $z-index;

    width: 2em;
    height: 1.25em;
    padding: .25em;

    background: rgba(black, .1);
    border-bottom-right-radius: .25rem;

    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.25;
    color: rgba(black, .5);

    @each $name, $_query in $k-media-queries {
      @include k-media-min($name) { content: "#{$name}" }
    }
  }
}