website/src/css/util.scss

@use "sass:map";

$breakpoints: (
  xs: 369px,
  sm: 736px,
  md: 1025px,
  lg: 1500px,
);

// @include respond-above() {}
@mixin respond-above($breakpoint) {
  @if map.has-key($breakpoints, $breakpoint) {
    $breakpoint-value: map.get($breakpoints, $breakpoint);

    @media only screen and (min-width: $breakpoint-value) {
      @content;
    }
  }

  @else {
    @warn "Invalid #{$breakpoint}.";
  }
}

// @include respond-below() {}
@mixin respond-below($breakpoint) {
  @if map.has-key($breakpoints, $breakpoint) {
    $breakpoint-value: map.get($breakpoints, $breakpoint);

    @media only screen and (max-width: ($breakpoint-value - 1)) {
      @content;
    }
  }

  @else {
    @warn "Invalid #{$breakpoint}.";
  }
}

// @include respond-between(sm, md) {}
@mixin respond-between($lower, $upper) {
  @if map.has-key($breakpoints, $lower) and map.has-key($breakpoints, $upper) {
    $lower-breakpoint: map.get($breakpoints, $lower);
    $upper-breakpoint: map.get($breakpoints, $upper);

    @media only screen and (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
      @content;
    }
  }

  @else {
    @if (map.has-key($breakpoints, $lower) == false) {
      @warn "Lower breakpoint invalid: #{$lower}.";
    }

    @if (map.has-key($breakpoints, $upper) == false) {
      @warn "Upper breakpoint invalid: #{$upper}.";
    }
  }
}