// ────────────────────────────────────────────────────────────────
// Tokens · Breakpoints
//
// Media-Queries als benannte Mixins, damit die Grenzen an einer Stelle
// stehen. `up` = ab Breite (min-width), `down` = bis Breite (max-width).
// ────────────────────────────────────────────────────────────────
@use "sass:map";

$breakpoints: (
  xs: 480px,
  sm: 620px,
  md: 900px,
  lg: 1000px,
  xl: 1200px,
) !default;

@function bp($name) {
  @if map.has-key($breakpoints, $name) {
    @return map.get($breakpoints, $name);
  }
  @error "Unbekannter Breakpoint: #{$name}";
}

/// ab (>=) Breakpoint
@mixin up($name) {
  @media (min-width: bp($name)) {
    @content;
  }
}

/// bis (<) Breakpoint
@mixin down($name) {
  @media (max-width: (bp($name) - 0.02px)) {
    @content;
  }
}