@use "sass:map";

// The three breakpoints of the per-device settings (mobile, tablet,
// desktop), each with its class suffix and its minimum-height variable.
// `@include per-band using ($band, $min-h) { … }` writes the content once
// per breakpoint, inside its media query.

$gs-bands: (
	sm: ( query: "(max-width: 600px)", min-h: var(--gutenslider-min-height-sm) ),
	md: ( query: "(min-width: 601px) and (max-width: 960px)", min-h: var(--gutenslider-min-height-md) ),
	lg: ( query: "(min-width: 961px)", min-h: var(--gutenslider-min-height) ),
);

@mixin per-band {

	@each $band, $b in $gs-bands {

		@media only screen and #{map.get($b, query)} {

			@content ($band, map.get($b, min-h));
		}
	}
}