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

@mixin debug-text {
  background-color: #EBEBEB;
  border: 1px solid #7A7A7A;
  color: #000;
  display: inline-block;
  font-family: monospace, serif;
  font-size: 8px;
  left: 0;
  line-height: 11px;
  padding: 0px 2px;
  position: absolute;
  top: 0;
  z-index: 999;
}

@mixin debug-styles {
  position: relative;
  &:before {
    @include debug-text;
  }
}

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

@mixin debug-layout-styles {
  @include debug-styles;
  &:before {
    bottom: 0;
    padding: 1px 4px;
    top: auto;
    white-space: pre-wrap;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
  }
}

@mixin debug-layout-info( $info ) {
  &:before {
    content: "#{ $info }";
  }
}