/*----------------------------------------------------------------------------*\
    #DEBUG BREAKPOINTS
\*----------------------------------------------------------------------------*/

/**
 * A simple way to help identify which breakpoint is active!
 */

body::before {
    @include offset(fixed, null, null, 0, 0);
    width: 100%;
    padding: 1em 2em;
    background: rgba($color-black, .85);
    color: $color-white;
    font-weight: 700;
    text-align: center;
    content: 'Initial';
    z-index: $layer-10;

    @if map-get ($breakpoints, 'small') != null {
        @media (min-width: map-get(map-get($breakpoints, 'small'), 'break-value')) {
            content: 'Breakpoint "small"';
        }
    }

    @if map-get ($breakpoints, 'compact') != null {
        @media (min-width: map-get(map-get($breakpoints, 'compact'), 'break-value')) {
            content: 'Breakpoint "compact"';
        }
    }

    @if map-get ($breakpoints, 'medium') != null {
        @media (min-width: map-get(map-get($breakpoints, 'medium'), 'break-value')) {
            content: 'Breakpoint "medium"';
        }
    }

    @if map-get ($breakpoints, 'large') != null {
        @media (min-width: map-get(map-get($breakpoints, 'large'), 'break-value')) {
            content: 'Breakpoint "large"';
        }
    }

    @if map-get ($breakpoints, 'wide') != null {
        @media (min-width: map-get(map-get($breakpoints, 'wide'), 'break-value')) {
            content: 'Breakpoint "wide"';
        }
    }

    @if map-get ($breakpoints, 'huge') != null {
        @media (min-width: map-get(map-get($breakpoints, 'huge'), 'break-value')) {
            content: 'Breakpoint "huge"';
        }
    }
}