@use "sass:map";
@use "sass:meta";

$mobile: 767;
$tablet: 1439;
$desktopSecond: 1919;

$mobileMin: "mobileMin";
$mobileMax: "mobileMax";
$tabletMin: "tabletMin";
$tabletMax: "tabletMax";
$desktopSecondMin: "desktopSecondMin";
$desktopSecondMax: "desktopSecondMax";

$breakpoints: (
	"mobileMin": (
		min-width: $mobile + 1 + px
	),
	"mobileMax": (
		max-width: $mobile + px
	),
	"tabletMin": (
		min-width: $tablet + 1 + px
	),
	"tabletMax": (
		max-width: $tablet + px
	),
	"desktopSecondMin": (
		min-width: $desktopSecond + 1 + px
	),
	"desktopSecondMax": (
		max-width: $desktopSecond + px
	)
) !default;

@mixin respond-to($breakpoint) {
	@if map.has-key($breakpoints, $breakpoint) {
		@media #{meta.inspect(map.get($breakpoints, $breakpoint))} {
			@content;
		}
	} @else {
		@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
    + "Available breakpoints are: #{map.keys($breakpoints)}.";
	}
}
