////
/// @author Mark Otto
////

/// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
/// @since 0.1.0 - The O.G.
/// @param {String} $name - the name for the breakpoint
/// @param {Map} $breakpoints - a map of grid breakpoints
/// @output a CSS media query with only min values
/// @content applies to the given breakpoint and wider.
/// @example scss
///  .test {
///    @include media-breakpoint-up('md') {
///      width: 25%;
///    }
///  }
@mixin media-breakpoint-up($name, $breakpoints) {
	$min: breakpoint-min($name, $breakpoints);

	@if $min {
		@media (min-width: $min) {
			@content;
		}
	} @else {
		@content;
	}
}

/// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
/// @since 0.1.0 - The O.G.
/// @param {String} $name - the name for the breakpoint
/// @param {Map} $breakpoints - a map of grid breakpoints
/// @output a CSS media query with only max values
/// @content applies to the given breakpoint and narrower.
/// @example scss
///  .test {
///    @include media-breakpoint-down('md') {
///      width: 100%;
///    }
///  }
@mixin media-breakpoint-down($name, $breakpoints) {
	$max: breakpoint-max($name, $breakpoints);

	@if $max {
		@media (max-width: $max) {
			@content;
		}
	} @else {
		@content;
	}
}

/// Media between the breakpoint's minimum and maximum widths.
/// No minimum for the smallest breakpoint, and no maximum for the largest one.
/// @since 0.1.0 - The O.G.
/// @param {String} $name - the name for the breakpoint
/// @param {Map} $breakpoints - a map of grid breakpoints
/// @output a CSS media query with both min and max values
/// @content applies only to the given breakpoint, not viewports any wider or narrower.
/// @example scss
///  .test {
///    @include media-breakpoint-only('md') {
///      width: 50%;
///    }
///  }
@mixin media-breakpoint-only($name, $breakpoints) {
	@include media-breakpoint-up($name, $breakpoints) {
		@include media-breakpoint-down($name, $breakpoints) {
			@content;
		}
	}
}