@use 'sass:map';
@use 'variables' as v;

/// Applies styles at a specific breakpoint defined by `$breakpoints`.
///
/// This mixin looks up the breakpoint in the `$breakpoints` map and wraps
/// the content in a min-width media query. If an invalid breakpoint is defined,
/// it will display a warning.
///
/// @group Layout
///
/// @param {String} $point — The name of the breakpoint (e.g., `mobile`, `tablet`, `desktop`).
///
/// @example scss
/// 	@use '@daffodil/design/scss/utilities';
///
/// 	@include utilities.breakpoint(tablet) {
///   	// styles for tablet and up
/// 	}
///
@mixin breakpoint($point) {
	@if not map.has-key($map: v.$breakpoints, $key: $point) {
		@warn 'breakpoint(): "#{$point}" is not defined in the $breakpoints map.';
	}

	@media (min-width: map.get(v.$breakpoints, $point)) {
		@content;
	}
}