/* 접거나 펴는 자리가 없는 한 단 목록이라 details 도 화살표 칸도 안 둠. 폭은 이 부품이 안 정하고
   담는 자리가 준 폭을 다 씀(docs/components/FolderTree.md) */
.folder-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.folder-tree__item, .folder-tree__sub { display: flex; }

/* 구분선은 고정 폴더 아래 한 줄만. 시스템이 만드는 서류 묶음과 사람이 올리는 분류를 눈으로 가름 */
.folder-tree__item--pinned { border-bottom: var(--border-width) solid var(--border-default); }

.folder-tree__btn {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: var(--space-inline-sm);
  font: inherit;
  text-align: left;
  padding: var(--space-inset-xs) var(--space-inset-sm);
  border: 0;
  background: transparent;
  color: var(--text-default);
  cursor: pointer;
}

.folder-tree__btn:hover, .folder-tree__btn:focus-visible { background: var(--surface-sunken); }

/* 하위 줄은 왼쪽 여백 한 단으로만 갈림. 잇는 선을 그리면 접는 자리가 있는 트리로 읽힘 */
.folder-tree__sub .folder-tree__btn { padding-left: var(--space-inset-md); }

.folder-tree__item--on .folder-tree__btn, .folder-tree__sub--on .folder-tree__btn {
  background: var(--surface-highlight);
}

.folder-tree__count { flex: none; color: var(--text-muted); font-size: var(--font-label); }