// Bootstrap 5-style responsive mixins (more intuitive than Bootstrap 4)
// Learn the difference here https://getbootstrap.com/docs/5.0/migration/#sass

@mixin bs5-media-breakpoint-up($name) {
    $min: map-get($grid-breakpoints, $name);
    @if $min and $min > 0 {
        @media (min-width: $min) {
            @content;
        }
    } @else {
        @content;
    }
}

@mixin bs5-media-breakpoint-down($name) {
    $max: map-get($grid-breakpoints, $name);
    @if $max {
        @media (max-width: calc(#{$max} - 0.02px)) {
            @content;
        }
    } @else {
        @content;
    }
}

@mixin bs5-media-breakpoint-between($lower, $upper) {
    $min: map-get($grid-breakpoints, $lower);
    $max: map-get($grid-breakpoints, $upper);
    @if $min and $max {
        @media (min-width: $min) and (max-width: calc(#{$max} - 0.02px)) {
            @content;
        }
    }
}

@mixin bs5-media-breakpoint-only($name) {
    $breakpoint-names: map-keys($grid-breakpoints);
    $index: index($breakpoint-names, $name);
    $next-name: nth($breakpoint-names, $index + 1);

    @include bs5-media-breakpoint-between($name, $next-name) {
        @content;
    }
}
