// FoxSnackbarList — 시안: 통합관리자페이지 디자인시스템 Figma snackbar-list
//
// 스낵바가 여러 개일 때 세로로 쌓는 묶음이다. 배치만 갖는다 — 무엇이 몇 개 떠 있는지는
// 호출부가 소유한다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-snackbar-list" role="group">
//     …fox-snackbar…
//     …fox-snackbar…
//   </div>
//
// 자식 폭과 묶음 폭이 같은 640px이다 — 묶음이 자식을 늘이거나 줄이지 않고, `align-items`가
// `flex-start`라 자식이 자기 폭을 그대로 갖는다(시안 지정).
//
// 토큰이 아닌 값:
//   - ⚠️ `inline-size: 64rem`: **시안의 폭(640px)을 그대로 적용해 둔 것이다.** 자식
//     `fox-snackbar`와 같은 값이고 근거도 같다 — 토큰 스케일에 640이 없다. 폭을 바꿔야 하는
//     자리는 호출부가 `className`으로 덮는다.
//   - display / flex-direction / align-items: 구조 규칙.
//
// ⚠️ 모바일에서는 자식과 같은 이유로 고정 폭을 푼다 — 640px을 그대로 두면 화면 밖으로 넘쳐
// 잘린다(`fox-snackbar` 상단 주석 참고).

@use "@fox/styles/abstracts" as fox;

.fox-snackbar-list {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: fox.gap(3);
  inline-size: 64rem;

  // 모바일에서는 부모 폭을 채운다. 자식(`fox-snackbar`)도 같은 규칙을 스스로 갖는다.
  @include fox.mobile {
    inline-size: 100%;
  }
}