// Fylgja (https://fylgja.dev)
// Licensed under MIT Open Source

@use "sass:map";
@use "sass:list";

$breakpoints: (
	"sm": 480px,
	"md": 768px,
	"lg": 1024px,
	"xl": 1440px,
	"xxl": 1920px,
) !default;

@function map-get-next($map, $key) {
	$keys: map.keys($map);
	$next-key: list.index($keys, $key) + 1;
	$next-has-key: $next-key <= list.length($keys);

	@if $next-has-key {
		$next-key-value: list.nth($keys, $next-key);

		@return map.get($map, $next-key-value);
	} @else {
		@return "";
	}
}

/// @param {"min"|"max"|"minmax"} $range [min] - direction of the media query
/// @param {Map} $map [$breakpoints] - map to loop trough
/// @param {Bool} $var-syntax [false] - opt in to use @custom-media syntax
/// @content any value inside will be wrapped in the mq, for classes use it with `for-mq using ($name)`
/// @output {Mixed} CSS wrapped with each value of the breakpoints
@mixin for-mq($range: "min", $map: $breakpoints, $var-syntax: false) {
	@if $var-syntax {
		@each $name, $mq in $map {
			$syntax: if(sass($range == "max"): "--#{$name}-max"; else: "--#{$name}");

			@media ($syntax) {
				@content ($name);
			}
		}
	} @else {
		@each $name, $mq in $map {
			@if $range == "minmax" {
				$next-mq: map-get-next($map, $name);
				$syntax: if(sass($next-mq != ""): "#{$mq} <= width <= #{$next-mq}"; else: "width >= #{$mq}");

				@media ($syntax) {
					@content ($name);
				}
			} @else {
				$syntax: if(sass($range == "max"): "width < #{$mq}"; else: "width >= #{$mq}");

				@media ($syntax) {
					@content ($name);
				}
			}
		}
	}
}