@import "[path-to]/breakpoints";
@include break([breakpoint]) {
	// css here
}

//-		DS2 core (c) 2024 Alexander McIlwraith 
//-		Licensed under CC BY-SA 4.0 

// default breakpoints match bootstrap 5 breakpoints.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;

@mixin breakpoint-debug {
	body::before, body::after {
		background-color: #555;	
		color: white;	
		content: "bigger than extra large";
		display: grid;
		font-size: 25px;
		grid-template-columns: auto;
		padding: 25px;
		place-content: center;
		// text-align: center;
		@include break(-xl) {
			content: "extra large";
		}
		@include break(-lg) {
			content: "large";
		}
		@include break(-md) {
			content: "medium";
		}
		@include break(-sm) {
			content: "small";
		}
	}
}

@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);
			$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;
		}
	}
}