@require '_variables';

// @stylint off
debug($color = magenta) {
  outline: 1px solid $color !important;

  * {
    outline: 1px solid rgba(complement($color), 0.8) !important;
  }

  * * {
    outline: 1px solid rgba($color, 0.6) !important;
  }

  * * * {
    outline: 1px solid rgba(complement($color), 0.4) !important;
  }

  * * * * {
    outline: 1px solid rgba($color, 0.2) !important;
  }
}
// @stylint on

/*
 * Baseline overlay helper
 */
debug-baseline(color = rgba(magenta, 0.2), grid-height = $baseline-grid-height) {
  if (!@position || @position == 'static') {
    position: relative;
  }

  &::before {
    $gradient-vertical = linear-gradient(transparent, transparent (grid-height - 1), color 100%);
    $gradient-horizontal = linear-gradient(90deg, transparent, transparent (grid-height - 1), color 100%);

    content: ' ';
    display: block;
    position: absolute;
    z-index: 0;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: $gradient-vertical repeat-y, $gradient-horizontal repeat-x;
    background-size: 100% grid-height, grid-height 100%;
    background-position: 0px 0px;
    pointer-events: none;
  }
}