@if $enable-debugger-classes {
  .#{$prefix}grid-debug {
    &::before {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2000;
      padding: $spacer * .5 $spacer;
      font-family: $font-family-base;
      color: $black;
      background-color: $white;
      border-radius: 0 0 4px; // stylelint-disable-line property-disallowed-list
      @include font-size($h1-font-size);
    }

    @each $breakpoint, $value in $grid-breakpoints {
      @include media-breakpoint-up($breakpoint) {
        &::before {
          content: "#{$breakpoint}";
        }
      }
    }

    [class^="container"],
    &[class^="container"],
    .row,
    &.row {
      position: relative;

      &::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1999;
        pointer-events: none;
        content: "";
        background: repeating-linear-gradient(to right, transparent, transparent calc(var(--#{$prefix}gutter-x) * .5), var(--#{$prefix}primary) calc(var(--#{$prefix}gutter-x) * .5), var(--#{$prefix}primary) calc((100% - 12 * var(--#{$prefix}gutter-x)) / 12 + var(--#{$prefix}gutter-x) * .5), transparent calc((100% - 12 * var(--#{$prefix}gutter-x)) / 12 + var(--#{$prefix}gutter-x) * .5), transparent calc(100% / 12)); // stylelint-disable-line function-disallowed-list
        opacity: .3;
      }
    }
  }
}