@each $breakpoint, $width in $breakpoints {
	@each $display in $displays {
		.visible-#{$breakpoint}-#{$display} {
			@extend .hidden;
		}
	}
}

@each $breakpoint, $rules in $breakpoints {
	$query-min: if(map-has-key($rules, min), #{map-get($rules, min)}, '');
	$query-max: if(map-has-key($rules, max), #{map-get($rules, max)}, '');

	$query: '(min-width: #{$query-min}) and (max-width: #{$query-max})';

	@if ($query-min == '') {
		$query: '(max-width: #{$query-max})';
	}

	@if ($query-max == '') {
		$query: '(min-width: #{$query-min})';
	}

	@media #{$query} {
		.hidden-#{$breakpoint} {
			@include display;
		}

		@each $display in $displays {
			.visible-#{$breakpoint}-#{$display} {
				@include display(#{$display});
			}
		}
	}
}