@mixin debug($bg, $fg: white) {
  border: 1px solid rgba($bg, 0.5);
  padding: 1rem;
  margin-bottom: 1rem;
  position: relative;

  &::after {
    content: attr(class);
    position: absolute;
    top: -1px;
    left: 100%;
    padding: 2px 4px;
    background: rgba($bg, 0.5);
    color: $fg;
    display: block;
    font-size: 10px;
    line-height: 1em;
    white-space: pre;
  }
}

.class-debug {
  > * {
    @include debug(black);

    > * {
      @include debug(blue);

      > * {
        @include debug(red);

        > * {
          @include debug(orange);

          > * {
            @include debug(pink, black);

            > * {
              @include debug(green);

              > * {
                @include debug(#ccc, black);

                > * {
                  @include debug(#aaa, black);

                  > * {
                    @include debug(pink, black);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}