@use "sass:math";
@use "sass:map";
@use "sass:meta";

// Basic breakpoint width definitions
$width-sm: 600px !default;
$width-md: 905px !default;
$width-lg: 1240px !default;
$width-xl: 1440px !default;

// Map of breakpoint names to min-width values
$breakpoint-floors: (
  "xs": 0px,
  "sm": $width-sm,
  "md": $width-md,
  "lg": $width-lg,
  "xl": $width-xl,
);

// Map of breakpoint names to max-width values
$breakpoint-ceilings: (
  "xs": map.get($breakpoint-floors, "sm") - 1px,
  "sm": map.get($breakpoint-floors, "md") - 1px,
  "md": map.get($breakpoint-floors, "lg") - 1px,
  "lg": map.get($breakpoint-floors, "xl") - 1px,
  "xl": math.$max-number * 1px,
);

// Mixin to apply styles when at least at a certain breakpoint
@mixin breakpoint-at-least($breakpoint) {
  @if not map.has-key($breakpoint-floors, $breakpoint) {
    @error "Invalid breakpoint `#{$breakpoint}` provided to breakpoint-at-least. "
      + "Available breakpoints are: #{map.keys($breakpoint-floors)}.";
  }

  @media (min-width: map.get($breakpoint-floors, $breakpoint)) {
    @content;
  }
}

// Mixin to apply styles when at most at a certain breakpoint
@mixin breakpoint-at-most($breakpoint) {
  @if not map.has-key($breakpoint-ceilings, $breakpoint) {
    @error "Invalid breakpoint `#{$breakpoint}` provided to breakpoint-at-most. "
      + "Available breakpoints are: #{map.keys($breakpoint-ceilings)}.";
  }

  @media (max-width: map.get($breakpoint-ceilings, $breakpoint)) {
    @content;
  }
}

// Mixin shorthand for standard desktop
@mixin is-desktop() {
  @include breakpoint-at-least("md") {
    @content;
  }
}

// Mixin shorthand for standard mobile
@mixin is-mobile() {
  @include breakpoint-at-most("sm") {
    @content;
  }
}

// Style utility mixin to use breakpoint maps
@mixin responsive-values($values) {
  @if meta.type-of($values) == "map" {
    @each $breakpoint, $value in $values {
      @include breakpoint-at-least($breakpoint) {
        @content (( "value": $value ));
      }
    }
  } @else {
    @content (( "value": $values ));
  }
}