// FoxListToolbar — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) list-toolbar (3002:8151)
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-list-toolbar">
//     <div class="fox-list-toolbar__base">
//       <div class="fox-list-toolbar__left">…</div>
//       <div class="fox-list-toolbar__right">…</div>
//     </div>
//     <div class="fox-list-toolbar__filter">…</div>   <!-- 선택 -->
//   </div>
//
// 좌우가 각각 `flex: 1`이라 반씩 나눠 갖고, 우측 내용은 오른쪽 끝으로 몰린다.
//
// 토큰이 아닌 값:
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로 export하지 않는다.

@use "abstracts" as fox;

.fox-list-toolbar {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding-block-end: fox.spacing(bottom-md);

  &__base {
    display: flex;
    inline-size: 100%;
    flex-shrink: 0;
    align-items: center;
  }

  &__left,
  &__right {
    display: flex;
    flex: 1 0 0;
    min-inline-size: 0;
    align-items: center;
    gap: fox.gap(4);
  }

  &__right {
    justify-content: flex-end;
  }

  &__sorts {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: fox.gap(3);
  }

  // 아래 줄 — 위 줄과 가로 구분선으로 나뉜다.
  &__filter {
    display: flex;
    inline-size: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: fox.gap(3);
    margin-block-start: fox.padding(5);
    padding-block-start: fox.padding(5);
    border-block-start: fox.border(1) solid fox.color(border-neutral-subtler);
  }
}

// 총 건수 — 숫자만 굵고 색이 다르다.
.fox-list-count {
  flex-shrink: 0;
  margin: 0;
  color: fox.color(font-neutral-default);
  font-family: fox.font-family(body);
  font-size: fox.font-size(label-md);
  font-weight: fox.font-weight(regular);
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;

  &__value {
    color: fox.color(font-theme-primary);
    font-weight: fox.font-weight(bold);
  }
}