core/src/scss/utilities/mixins/breakpoint/_grid-media-between.scss
///
/// Media query that spans multiple breakpoint widths (between the min and max breakpoints).
///
/// @name su-grid-media-between
///
/// @param {key code} $lower - The lower breakpoint key code eg: 'sm'
/// @param {key code} $upper - The upper breakpoint key code eg: 'xl'
/// @param {map} $breakpoints - A map of each of the screen breakpoint sizes.
///
/// @group mixin
@mixin grid-media-between($lower: 'xs', $upper: 'sm', $breakpoints: $su-grid-screens) {
$min: breakpoint-min($lower, $breakpoints);
$max: breakpoint-max($upper, $breakpoints);
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
@content;
}
}
@else if $max == null {
@include grid-media-min($lower, $breakpoints) {
@content;
}
}
@else if $min == null {
@include grid-media-max($upper, $breakpoints) {
@content;
}
}
}