// 믹스인 — 여러 선언이 항상 함께 가야 하는 패턴을 묶는다.

@use "tokens";

/// PC 이상(>= 768px)에서 적용. 모바일 우선이므로 기본 스타일은 밖에 쓴다.
///
/// ⚠️ 미디어 쿼리 조건부는 `var()`를 해석하지 못하므로 브레이크포인트만은 CSS 변수가
/// 아닌 컴파일타임 값이다. 그래서 이 믹스인 경유가 강제된다.
@mixin pc {
  @media (min-width: tokens.$breakpoint-pc) {
    @content;
  }
}

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