@use "sass:map";
@use "tokens";

/// PC 이상(>= 768px). 미디어 쿼리 조건부는 `var()`를 해석하지 못해 브레이크포인트만
/// 컴파일타임 값이고, 그래서 이 믹스인 경유가 강제된다.
@mixin pc {
  @media (min-width: tokens.$breakpoint-pc) {
    @content;
  }
}

/// PC 미만. `pc`와 경계가 겹치지 않도록 0.02px을 뺀다.
@mixin mobile {
  @media (max-width: tokens.$breakpoint-pc - 0.02px) {
    @content;
  }
}

/// 이름 붙은 브레이크포인트 이상에서 적용 — `xsm`(768) · `sm`(1024) · `default`(1440).
/// 같은 이름의 `grid-wrap-*`이 그 폭의 컨테이너다.
@mixin from($name) {
  @if not map.has-key(tokens.$breakpoints, $name) {
    @error "[@fox] 알 수 없는 브레이크포인트: `#{$name}` — 사용 가능한 값: #{map.keys(tokens.$breakpoints)}";
  }

  @media (min-width: map.get(tokens.$breakpoints, $name)) {
    @content;
  }
}