@use "sass:map";

$breakpoints: (
  "xsmall": 320px,
  "small": 500px,
  "medium": 820px,
  "large": 1024px,
  "xlarge": 1280px,
  "xxlarge": 1440px,
  "vsmall": 750px,
);

$breakpoints-min: (
  "xsmall": (
    min-width: map.get($breakpoints, "xsmall"),
  ),
  "small": (
    min-width: map.get($breakpoints, "small"),
  ),
  "medium": (
    min-width: map.get($breakpoints, "medium"),
  ),
  "large": (
    min-width: map.get($breakpoints, "large"),
  ),
  "xlarge": (
    min-width: map.get($breakpoints, "xlarge"),
  ),
  "xxlarge": (
    min-width: map.get($breakpoints, "xxlarge"),
  ),
  "vsmall": (
    min-height: map.get($breakpoints, "vsmall"),
  ),
) !default;

$breakpoints-max: (
  "xsmall": (
    max-width: map.get($breakpoints, "xsmall"),
  ),
  "small": (
    max-width: map.get($breakpoints, "small"),
  ),
  "medium": (
    max-width: map.get($breakpoints, "medium"),
  ),
  "large": (
    max-width: map.get($breakpoints, "large"),
  ),
  "xlarge": (
    max-width: map.get($breakpoints, "xlarge"),
  ),
  "xxlarge": (
    max-width: map.get($breakpoints, "xxlarge"),
  ),
  "vsmall": (
    max-height: map.get($breakpoints, "vsmall"),
  ),
) !default;

@mixin breakpoint($breakpoint) {
  @if map-has-key($breakpoints-min, $breakpoint) {
    @media #{inspect(map.get($breakpoints-min, $breakpoint))} {
      @content;
    }
  } @else {
    @warn "Error: Breakpoint `#{$breakpoint}` not found.";
  }
}

@mixin breakpoint-max($breakpoint) {
  @if map-has-key($breakpoints-max, $breakpoint) {
    @media #{inspect(map.get($breakpoints-max, $breakpoint))} {
      @content;
    }
  } @else {
    @warn "Error: Breakpoint `#{$breakpoint}` not found.";
  }
}