@use 'sass:map';

@mixin viewport-helper($breakpoints, $config: ()) {
    $config: map.deep-merge(
        (
            'backgroundColor': #36f5cf,
            'foregroundColor': #007272,
            'zIndex': 999999,
        ),
        $config
    );

    body::after {
        position: fixed;
        top: 0;
        left: 0;
        z-index: map.get($config, 'zIndex');

        padding: 0.375em 0.625em;
        color: map.get($config, 'foregroundColor');
        background-color: map.get($config, 'backgroundColor');
        border: 1px solid map.get($config, 'foregroundColor');

        font-size: 0.8rem;
        font-family: monospace;

        @each $breakpoint, $size in $breakpoints {
            @media (min-width: $size) {
                content: 'Breakpoint: #{$breakpoint}';
            }
        }
    }
}