// FoxTableCell — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                       tbl-basic-cell-head (425:5694) · tbl-basic-cell-body (425:5701)
//                       tbl-list-cell-head (391:4116) · tbl-list-cell-body (391:4150)
//                       tbl-form-cell-head (391:4307) · tbl-form-cell-body (391:4337)
//
// 마크업 계약: `_fox-table.scss` 상단 참고.
//
// 여섯 시안이 한 컴포넌트다 — 바탕(머리 회색 / 본문 흰색)과 아래 선이 모두 같고, 여백·
// 글자·기본 정렬만 표 타입에 따라 달라진다. 그 값은 표가 커스텀 프로퍼티로 내려보낸다.
//
// 열 이름(`__label`)은 카드로 접혔을 때만 보인다 — 표로 있을 때는 머리행이 이미 같은 말을
// 한다.
//
// 토큰이 아닌 값:
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.

@use "abstracts" as fox;

.fox-table-cell {
  padding-inline: var(--fox-table-cell-padding-inline);
  border-block-end: fox.border(1) solid fox.color(border-neutral-subtler);
  color: fox.color(font-neutral-default);
  font-family: fox.font-family(body);
  font-size: fox.font-size(body-md);
  font-weight: fox.font-weight(regular);
  line-height: 1.5;
  letter-spacing: -0.025em;
  text-align: var(--fox-table-body-align);
  vertical-align: middle;

  &--head {
    min-inline-size: var(--fox-table-head-min-inline-size);
    min-block-size: var(--fox-table-cell-min-block-size);
    padding-block: var(--fox-table-head-padding-block);
    background: fox.color(surface-neutral-gray);
    font-family: var(--fox-table-head-font-family);
    font-size: var(--fox-table-head-font-size);
    font-weight: var(--fox-table-head-font-weight);
    line-height: var(--fox-table-head-line-height);
    text-align: var(--fox-table-head-align);
  }

  &--body {
    padding-block: var(--fox-table-body-padding-block);
    background: fox.color(surface-neutral-default);
  }

  // 그 줄을 대표하는 칸. 시안 list 표의 제목 열이 이렇다.
  &--emphasis {
    font-family: fox.font-family(title);
    font-size: fox.font-size(heading-xsm);
    font-weight: fox.font-weight(bold);
    line-height: 1.4;
  }

  // 칸이 직접 정한 정렬은 표 기본값을 이긴다.
  &--start { text-align: start; }
  &--center { text-align: center; }
  &--end { text-align: end; }

  // 표로 있을 때는 머리행이 열 이름을 말하므로 감춘다.
  &__label {
    display: none;
  }

  @include fox.mobile {
    // 카드로 접힌 줄 안에서만 열 이름이 보인다.
    .fox-table--list & {
      display: flex;
      gap: fox.gap(3);
      align-items: baseline;
      text-align: start;
    }

    .fox-table--list &__label {
      display: block;
      flex-shrink: 0;
      color: fox.color(font-neutral-subtle);
      font-family: fox.font-family(title);
      font-size: fox.font-size(heading-2xsm);
      font-weight: fox.font-weight(bold);
      line-height: 1.4;
    }

    .fox-table--list &__content {
      flex: 1 0 0;
      min-inline-size: 0;
    }
  }
}