@import "../base/_devices";

@function breakpoints($view) {
	$breakpoints: (
		mobile: (min: $mobileMin, max: $mobileMax),
		tablet: (min: $tabletMin, max: $tabletMax),
		tabletLandscape: (min: $tabletLandscapeMin, max: $tabletLandscapeMax),
		tabletPortrait: (min: $tabletPortraitMin, max: $tabletPortraitMax),
		desktop: (min: $desktop, max: 10000px)
	);

	@if not map-has-key($breakpoints, $view) {
		@warn "Breakpoint `#{$view}` not found";
	}
	@return map-get($breakpoints, $view);
}

@mixin viewport-bound($min: null, $max: null) {
	@if not $min and not $max {
		@error "No viewport bound dimensions specified";
	}
	$query: 'only screen';
	@if ($min) { $query: $query + " and (min-width: #{$min})" };
	@if ($max) { $query: $query + " and (max-width: #{$max})" };

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

@mixin viewport-minimum($view) {
	$width: map-get(breakpoints($view), 'min');
	@include viewport-bound($width) { @content; }
}

@mixin viewport-maximum($view) {
	$width: map-get(breakpoints($view), 'max');
	@include viewport-bound(null, $width) { @content; }
}

/*
	Viewport Mixin Usage
	@include viewport(mobile, tablet, ...)

	Note:
	1) Mixin applies styles between maximum and minimum width values of viewports specified
					i.e. @include viewport(mobile, desktop) will be applied to tablets too.
	2) This implementation reduces the css generated as media query
					as its contents only need to be generated once.
*/
@mixin viewport($views...) {
	$rangeMin: ();
	$rangeMax: ();
	@each $view in $views {
		$sizes: breakpoints($view);
		$min: map-get($sizes, min);
		$max: map-get($sizes, max);
		@if $min { $rangeMin: append($rangeMin, $min); }
		@if $max { $rangeMax: append($rangeMax, $max); }
	}
	@include viewport-bound(min($rangeMin...), max($rangeMax...)) {
		@content;
	}
}