// ---------------------------------------------------------------------------
// @mixin 

@mixin debug-styles {
  position: relative;
  &:before {
    background-color: rgba(0,0,0,.2);
    display: inline-block;
    font-family: monospace, serif;
    font-size: 8px;
    line-height: 11px;
    padding: 0px 2px;
    position: absolute;
  }
}

@mixin debug-info( $columns, $context: $total-columns ) {
  $debug-text: "#{ $columns } of #{ $context }";
  &:before {
    content: "#{ $debug-text }";
  }
}