/* ==========================================================================
    Objects / Mediaq export
========================================================================== */

/**
 * Generates a JSON string with each breakpoint's value and information about
 * which of the breakpoints are currently active (i.e. viewport width >= breakpoint)
 * Ex.: 900px width returns '{"phone":{"value": "320px", "active": true}, "tablet":{"value": "768px", "active": true}, "desktop":{"value": "1024px", "active": false}}'
 *
 * @param {String} $target-name Name of breakpoint to evaluate
 * @return {String} Resulting JSON string
 */
@function mq-breakpoints-to-json($target-name) {
    $breakpoints-json: ();
    $target-value: map-get($breakpoints, $target-name);

    @each $name, $value in $breakpoints {
        $breakpoint: '"#{$name}":{"value": "#{$value}", "active": #{$target-value >= $value}}';
        $breakpoints-json: append($breakpoints-json, $breakpoint, 'comma');
    }

    @return '{#{$breakpoints-json}}';
}

/**
 * Generates the media queries necessary to export breakpoints
 *
 * @param {String} $element Element to append JSON data to
 */
@mixin mq-export($element) {
    @each $name, $value in $breakpoints {
        @include mediaq('>=#{$name}') {
            #{$element} {
                content: mq-breakpoints-to-json($name);
                display: block;
                height: 0;
                overflow: hidden;
                width: 0;
            }
        }
    }
}

@include mq-export(
    if(
        variable-exists('im-export-element'),
        $im-export-element + '::after',
        'body::after'
    )
);
