//
// The list of media queries. This can be used to output a full list
// or just keep it in order.
//
$media-queries: (
	'small-only': mq(0, bp('small')),
	'small-up': mq(0, 9999),
	'medium-only': mq(bp('small'), bp('medium')),
	'medium-up': mq(bp('small'), 9999),
	'medium-down': mq(0, bp('medium')),
	'large-only': mq(bp('medium'), bp('large')),
	'large-up': mq(bp('medium'), 9999),
	'large-down': mq(0, bp('large')),
	'xlarge-only': mq(bp('large'), bp('xlarge')),
	'xlarge-up': mq(bp('large'), 9999),
	'xlarge-down': mq(0, bp('xlarge')),
	'xxlarge-only': mq(bp('xlarge'), bp('xxlarge')),
	'xxlarge-up': mq(bp('xlarge'), 9999),
	'xxlarge-down': mq(0, 9999),
	'mobile': mq(0, map-get($grid-breakpoints, 'small')),
	'landscape': '#{$grid-screen} and (orientation: landscape)',
	'portrait': '#{$grid-screen} and (orientation: portrait)'
);

//
// A little function to retrieve a media query from the list by its name.
// doesn't do much, but who knows what the future will bring?
//
@function media-query($qry) {
	@return map-get($media-queries, $qry);
}

//
// Variables for media queries, easy to use in the frontend by
// using `@media #{$small-only} { .element{ display: none; }};` for instance.
//
$small-only: media-query('small-only'); //
$medium-only: media-query('medium-only'); //
$medium-up: media-query('medium-up'); //
$medium-down: media-query('medium-down'); //
$large-only: media-query('large-only'); //
$large-up: media-query('large-up'); //
$large-down: media-query('large-down'); //
$xlarge-only: media-query('xlarge-only'); //
$xlarge-up: media-query('xlarge-up'); //
$xlarge-down: media-query('xlarge-down'); //
$xxlarge-only: media-query('xxlarge-only'); //

//
// In rare case you might want to know and have media queries in
// custom properties. This piece of code will output all media queries
// as custom properties. (needs to be enabled in the outputs)
//

@if output('custom-properties-media-queries') {
	:root {
		@each $qry-name, $qry-value in $media-queries {
			$variable: '--mq-#{to-lower-case($qry-name)}';
			#{$variable}: $qry-value;
		}
	}
}