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

// 트리 한 줄 — 깊이만큼 들여쓰고 캐럿·아이콘·이름이 차례로 선다.
.name {
  display: flex;
  align-items: center;
  gap: fox.gap(2);
}

.toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: fox.icon(4);
  font-size: fox.icon(4);
  block-size: fox.icon(4);
  border: none;
  background: none;
  color: fox.color(icon-neutral-default);
  cursor: pointer;

  > svg {
    inline-size: fox.icon(3);
    font-size: fox.icon(3);
    block-size: fox.icon(3);
  }

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

// 자식이 없는 줄도 자리를 잡아 이름 시작 위치가 흔들리지 않게 한다.
.togglePlaceholder {
  display: inline-block;
  flex-shrink: 0;
  inline-size: fox.icon(4);
}

.icon {
  display: inline-flex;
  flex-shrink: 0;
  color: fox.color(icon-neutral-subtle);

  > svg {
    inline-size: fox.icon(3);
    font-size: fox.icon(3);
    block-size: fox.icon(3);
  }
}