$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;

@mixin rainbow {
	@include break(xs) { --am-bp: 'xs'; background-color: rgba(yellow, .1); }
	@include break(sm) { --am-bp: 'sm'; background-color: rgba(green, .1); }
	@include break(md) { --am-bp: 'md'; background-color: rgba(blue, .1); }
	@include break(lg) { --am-bp: 'lg'; background-color: rgba(indigo, .1); }
	@include break(xl) { --am-bp: 'xl'; background-color: rgba(violet, .1); }
}


@mixin break($bps, $points: $grid-breakpoints) {
	
	@each $bp in $bps {
	
		$min: 0;
		$max: 0;

		@if str-length($bp) == 2 {

			// only a single break point was received
			$min: map-get($points, $bp);
			@if $bp == "xl" {
				// just in case the single breakpoint is extra large, 
				// we have an extra large to end of 10million-1.
				$max: 9999999px;
			} @else {
				$max: map-get($points, nth(map-keys($points), index(map-keys($points), $bp) + 1));
			}
		
		} @else {

			
			@if str-slice($bp, 0, 1) == "-" {
				// no lower breakpoint was received
				$min: null;
				$max: map-get($points, str-slice($bp, 2, 3));
				
			} @else {
				
				$min: map-get($points, unquote(str-slice($bp, 0, 2)));
				
				
				@if str-length($bp) == 3 {		
					// no upper break point was received 
					$max: null;
				} @else {
					$max: map-get($points, str-slice($bp, 4, 5));
				}
			}
		}
		
		@if $min != null and $max != null {
			// Makes the @content apply between the min and max breakpoints
			@media (min-width: $min) and (max-width: $max) {
			  @content;
			}
		} @else if $min == null {
			// Makes the @content apply to the given breakpoint and narrower.
			@media (max-width: $max) {
				@content;
			}
		} @else if $max == null {
			// Makes the @content apply to the given breakpoint and wider.
			@media (min-width: $min) {
				@content;
			}
		} @else {
			@content;
		}
		
	}
}

@mixin cf {
	&::after {
		clear: both;
		content: " ";
		display: block;
	}
}