/*
---
name: Debugging styles
category:
    - debug
    - debug/styles
sourcePath: /shared/_debug.scss
---

For debugging *visually* the classes below probably will help you. Place them
on any element you would like to.

- `debug-vertical-rhythm` (shows the vertical baseline grid)
- `debug-breakpoints` (shows the currently active breakpoint)
- `debug-box-model` (draws an outline around the element and *every* child element)

```html
<button onclick="document.documentElement.classList.toggle('debug-breakpoints')">debug-breakpoints</button>
<button onclick="document.body.classList.toggle('debug-vertical-rhythm')">debug-vertical-rhythm</button>
<button onclick="document.body.classList.toggle('debug-box-model')">debug-box-model</button>
```
*/
.debug-vertical-rhythm {
    position: relative;

    &::after {
        background-color: transparent;
        background-image: linear-gradient(transparent 50%, rgba(#37f, 0.25) 0%);
        background-repeat: repeat;
        background-size: 100% vertical-base();
        content: "";
        min-height: 100%;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: $z-debug;
    }
}

.debug-breakpoints {
    position: relative;

    &::after {
        background-color: #37f;
        bottom: 0;
        color: #fff;
        font-family: monospace;
        font-size: 0.75rem;
        line-height: vertical-base();
        padding: vertical-base(0.5) 1rem;
        position: fixed;
        right: 0;
        white-space: pre-wrap;
        z-index: $z-debug;

        @each $name, $width in $breakpoints {
            @include media(">=#{$width}") {
                content: "breakpoint: #{$name} (#{$width})";
            }
        }
    }
}

.debug-box-model {
    &,
    & *,
    & *::after,
    & *::before {
        outline: 1px solid rgba(#f33, 0.5);
    }
}