// FoxTableRow — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                      tbl-*-row-head · tbl-*-row-body
//
// 마크업 계약: `_fox-table.scss` 상단 참고.
//
// 줄 자체는 모양을 갖지 않는다 — 시안에서 바탕과 아래 선이 모두 칸에 걸려 있다.
// 좁은 화면에서 카드가 될 때만 줄이 테두리를 갖는다(그 규칙은 `_fox-table.scss`에 있다).

@use "abstracts" as fox;

.fox-table-row {
  // 마지막 줄도 아래 선을 갖는다(시안). 칸이 그리므로 여기서는 둘 것이 없다.
  border: none;

  // 고른 줄. 칸이 바탕과 글자를 그리므로 여기서 자식만 골라 덮는다 — 후손 선택자를 쓰면
  // 칸 안에 든 표까지 파랗게 물든다.
  &--selected > .fox-table-cell {
    background: fox.color(action-primary-hover);
    color: fox.color(font-theme-primary);
  }

  // 행 전체가 눌리는 경우 — 누를 수 있다는 것이 보이고, 키보드 초점도 드러나야 한다.
  &--clickable {
    cursor: pointer;

    // 바탕은 칸이 그린다 — 줄에 색을 주면 칸의 불투명한 바탕에 가려 아무것도 보이지 않는다.
    // 고른 줄은 제 색을 지켜야 하므로 비켜 간다(둘 다 자식 선택자라 순서로만 갈린다).
    &:not(.fox-table-row--selected):hover > .fox-table-cell {
      background: fox.color(action-default-hover);
    }

    &:focus-visible {
      outline: fox.border(2) solid fox.color(border-theme-primary);
      outline-offset: calc(-1 * #{fox.border(2)});
    }
  }
}