// Section: Utilities
// Module: Media Queries

@use "sass:map";
@use "sass:string";
@use "sass:math";
@use "sass:meta";
@use "../config/breakpoints" as config-breakpoint;
@use "../functions/feature-flags" as fn-flags;
@use "../functions/units" as fn-units;
@use "../functions/breakpoints" as fn-breakpoints;

// @description Media query mixins.
// @param {string|number} $breakpoint - The breakpoint value.
// @param {string} $type - The media query type (e.g. 'lg', 'md').
@mixin media-up($breakpoint, $debug: null) {
    $blueprint-value: fn-units.fix-units(fn-breakpoints.get-breakpoint-value($breakpoint, $debug));
    @media screen and (min-width: #{$blueprint-value}) {
        @content;
    }
}

@mixin media-down($breakpoint) {
    $blueprint-value: fn-units.fix-units(fn-breakpoints.get-breakpoint-value($breakpoint));
    $val: $blueprint-value - 0.01;
    @media screen and (max-width: #{$val}) {
        @content;
    }
}

@mixin media-between($lower, $upper) {
    $lower-val: fn-units.fix-units(fn-breakpoints.get-breakpoint-value($lower));
    $upper-val: fn-units.fix-units(fn-breakpoints.get-breakpoint-value($upper));
    $upper-val: $upper-val - 0.01;
    @media screen and (min-width: #{$lower-val}) and (max-width: #{$upper-val}) {
        @content;
    }
}

// Only at specific breakpoint
@mixin media-only($breakpoint) {
    @if meta.type-of($breakpoint) == "number" and math.is-unitless($breakpoint) {
        @error "media-only() needs a breakpoint value";
    }
    $min: 0;
    @if map.has-key(config-breakpoint.$breakpoints, $breakpoint) {
        $min: fn-breakpoints.get-breakpoint-value($breakpoint);
    } @else {
        @error "media-only() needs a valid breakpoint value #{$breakpoint} is not in your $breakpoints map";
    }

    $next-breakpoint: null;

    @each $name, $width in config-breakpoint.$breakpoints {
        @if $width > $min and (meta.type-of($next-breakpoint) == "null" or $width < $next-breakpoint) {
            $next-breakpoint: $width;
        }
    }

    @if $next-breakpoint {
        @media (min-width: #{$min}) and (max-width: #{$next-breakpoint - 0.02px}) {
            @content;
        }
    } @else {
        @media (min-width: #{$min}) {
            @content;
        }
    }
}