/* Media query mixin for writing Mobile First
 * ========================================== */

@function convertBreakpointKeyToValue($breakpoint) {

	@if map-has-key($breakpoints, $breakpoint) {
		@return map-get($breakpoints, $breakpoint);
	}

	@warn "Unknown breakpoint: `#{$breakpoint}` in $breakpoints.";
	@return null;
}

@mixin mq($min: null, $max: null) {
	$query: "all" !default;

	// Try to convert $min value if not number or null
	@if(type-of($min) != number and $min != null){
		$min: convertBreakpointKeyToValue($min);
	}

	// Try to convert $max value if not number or null
	@if(type-of($max) != number and $max != null){
		$max: convertBreakpointKeyToValue($max);
	}

	// set both min and max
	@if ($min != null and $max != null) {
		$query: "(min-width: #{$min}px) and (max-width: #{$max - 1}px)";
	}
	// set just min
	@else if ($min != null and $max == null) {
		$query: "(min-width: #{$min}px)";
	}
	// set just max
	@else if ($min == null and $max != null) {
		$query: "(max-width: #{$max - 1}px)";
	}

	@media screen and #{$query} {
		@content;
	}
}