@use "sass:map";

// Define breakpoint map
$breakpoints: (
	xs: 0, // Extra small devices (default, no media query)
	sm: 576px, // Small devices (landscape phones)
	md: 768px, // Medium devices (tablets)
	lg: 992px, // Large devices (desktops)
	xl: 1200px, // Extra large devices (large desktops)
	xxl: 1400px // Extra extra large devices (larger desktops)
);

// Mixin for media queries
@mixin media-breakpoint-up($breakpoint) {
	$min-width: map.get($breakpoints, $breakpoint);

	// Check if breakpoint is defined and not `xs`
	@if $min-width != null and $min-width != 0 {
		@media (min-width: $min-width) {
			@content;
		}
	} @else {
		// If `xs`, just include the content without a media query
		@content;
	}
}

// Mixin for media-breakpoint-down
@mixin media-breakpoint-down($breakpoint) {
	$max-width: map.get($breakpoints, $breakpoint);

	// Check if $max-width is valid
	@if $max-width != null and $max-width > 0 {
		// Subtract a small value (0.02px) to handle non-inclusive max-width
		$max-width: $max-width - 0.02px;

		@media (max-width: $max-width) {
			@content;
		}
	} @else {
		// If `xs`, no media query is necessary
		@content;
	}
}

// Mixin for media-breakpoint-only
@mixin media-breakpoint-only($breakpoint) {
	$min-width: map.get($breakpoints, $breakpoint);
	$breakpoints-keys: map.keys($breakpoints);
	$index: index($breakpoints-keys, $breakpoint);
	$next-breakpoint: nth($breakpoints-keys, $index + 1);

	@if $min-width != null {
		$max-width: map.get($breakpoints, $next-breakpoint);

		@if $max-width != null {
			// Handle both min-width and max-width range
			$max-width: $max-width - 0.02px; // Adjust max-width to be exclusive
			@media (min-width: $min-width) and (max-width: $max-width) {
				@content;
			}
		} @else {
			// If no max-width (e.g., last breakpoint), use only min-width
			@media (min-width: $min-width) {
				@content;
			}
		}
	} @else {
		@warn "The breakpoint `#{$breakpoint}` is not defined in `$breakpoints`.";
	}
}

// Mixin for media-breakpoint-between
@mixin media-breakpoint-between($start, $end) {
	$min-width: map.get($breakpoints, $start);
	$max-width: map.get($breakpoints, $end);

	@if $min-width == null or $max-width == null {
		@warn "One or both breakpoints `#{$start}` and `#{$end}` are not defined in `$breakpoints`.";
	} @else {
		// Subtract 0.02px from max-width to ensure non-overlapping behavior
		$max-width: $max-width - 0.02px;

		@media (min-width: $min-width) and (max-width: $max-width) {
			@content;
		}
	}
}