// /*==========  $Media-queries  ==========*\
// Creates a media query targeting a specific set of features specified by the argument
/// @param {Multiple} $media-query for the breakpont settings
@mixin mq($media-query) {
	@if type-of($media-query) == number {
		// Params is of the kind: 960px, 60em
		@if unitless($media-query) {
			@error "You should use a unit for your breakpoint size: px, em, rem";
			@content;
		}
		@else {
			@media only screen and (min-width: #{$media-query}) { @content; }
		}
	}
	@elseif type-of($media-query) == list {
		// Param is of the kind:
		// 960px min-width
		// 60em max-device-width
		// 320px 960px

		@if length($media-query) == 2 {
			@if type-of( nth($media-query, 1) ) == number and type-of( nth($media-query, 2) ) == number { // Both items are numbers, then it's a size range
				@media only screen and (min-width: #{nth($media-query, 1)}) and (max-width: #{nth($media-query, 2)}) { @content; }
			}
			@else { // There are 2 items in the list and they are not a size range...
				@media only screen and (#{nth($media-query, 2)}:#{nth($media-query, 1)}) { @content; }
			}
		}
		@else {
			@warn "Oops! There are more than 2 items for the mq() parameter";
		}
	}
	@elseif type-of($media-query) == string {
		// param is of the kind:
		// palm
		// desk
		// sm
		// lg
		// 'only screen and (min-width:10em) and (orientation:landscape)'

		// Set a flag for string types
		$is-device-or-abbr: false;

		@each $device-name, $device-attrs in $devices-list {
			$device-abbr: map-get($device-attrs, abbr);

			@if ($device-name == $media-query) or ($device-abbr == $media-query) {
				// Since there is a device with $device-name or $device-abbr, set the flag to true
				$is-device-or-abbr: true;

				$device-size: get-device-attr($device-name, size);

				@if type-of($device-size) == list {
					@media only screen and (min-width:#{nth($device-size, 1)}) and (max-width:#{nth($device-size, 2)}) { @content; }
				}
				@elseif type-of($device-size) == number {
					$mq-type: get-device-attr($device-name, type);

					@if ( type-of($mq-type) == string ) {
						@if $mq-type == min or $mq-type == max {
							@media only screen and (#{$mq-type}-width:$device-size) { @content; }
						}
					}
					@elseif type-of($mq-type == null) {
						@media only screen and (min-width:$device-size) { @content; }
					}
					@else {
						@warn "Please provide a proper breakpoint type for the device. Your breakpoint type was `#{type-of($mq-type)}`";
					}
				}
				@else {
					@warn "Please provide a correct size value for the device. Your size type was `#{type-of($device-size)}`";
				}
			}
		}

		@if $is-device-or-abbr == false {
			// There were no devices with that abbreviation or name, then it should be a full media-query string
			@media #{$media-query} { @content; }
		}
	}
	@else {
		@warn "mq() mixin needs a parameter af type number, list or string. Your parameter type was `#{type-of($media-query)}`";
	}
}
