/*---
TITLE:
DEPTH Mixin

DESCRIPTION:
Use this mixin to debug nested DOM levels

USAGE:
```scss
.depth {
  // root gets bg
  @include depth;

  // root does *NOT* get bg
  &--no-root {
    @include depth(false);
  }
}
```

```html
<div class="depth">
  <div class="depth__child">
    <div class="depth__grandchild"></div>
  </div>
  <div class="depth__child"></div>
</div>
```
*/

@mixin depth($rootBG:true) {
  html body & * { outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
  html body & {
    @if $rootBG {
      background-color: rgba(0,0,0,.08);
    }
  }
  html body & *                   { background-color: rgba(255,0,0,.08)  ; }
  html body & * *                 { background-color: rgba(0,255,0,.08)  ; }
  html body & * * *               { background-color: rgba(0,0,255,.08)  ; }
  html body & * * * *             { background-color: rgba(255,0,255,.08); }
  html body & * * * * *           { background-color: rgba(0,255,255,.08); }
  html body & * * * * * *         { background-color: rgba(255,255,0,.08); }
  html body & * * * * * * *       { background-color: rgba(255,0,0,.08)  ; }
  html body & * * * * * * * *     { background-color: rgba(0,255,0,.08)  ; }
  html body & * * * * * * * * *   { background-color: rgba(0,0,255,.08)  ; }
}

.depth {

  // root gets bg
  @include depth;

  // root does *NOT* get bg
  &--with-outline {
    @include depth;
  }

  &--no-root {
    @include depth(false);
  }

}

[depth] {
  @include depth;
}

/*---
TITLE:
outline

DESCRIPTION:
Use this class to merely outline something

USAGE:
```html
<div class="existing-thing outline"></div>
...OR...
<div class="existing-thing" outline></div>
```
*/

[outline],
.outline {
  outline: 2px solid orangered;
}