@use "sass:map";
@use "variables" as *;

@mixin media-breakpoint-up($breakpoint) {
  $min: map.get($grid-breakpoints, $breakpoint);
  @if $min != null and $min != 0 {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

@mixin media-breakpoint-down($breakpoint) {
  $breakpoints: $grid-breakpoints;
  $breakpoint-keys: map.keys($breakpoints);
  $index: index($breakpoint-keys, $breakpoint);

  @if $index == null or $index == length($breakpoint-keys) {
    // If last breakpoint or not found, just include content (no max)
    @content;
  } @else {
    $next: nth($breakpoint-keys, $index + 1);
    $max: map.get($breakpoints, $next) - 0.02px;

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

@mixin media-breakpoint-between($lower, $upper) {
  $breakpoints: $grid-breakpoints;
  $min: map.get($breakpoints, $lower);
  $max: map.get($breakpoints, $upper) - 0.02px;

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  }
}
