[data-scope="tree-view"][data-part="tree"] {
  margin-top: 20px;
  width: 240px;
}

[data-scope="tree-view"][data-part="item"],
[data-scope="tree-view"][data-part="branch-control"] {
  user-select: none;
  --padding-inline: 16px;
  padding-inline-start: calc(var(--depth) * var(--padding-inline));
  padding-inline-end: var(--padding-inline);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 2px;
  min-height: 32px;

  & svg {
    width: 16px;
    height: 16px;
    opacity: 0.5;
  }

  &:hover {
    background: rgb(243, 243, 243);
  }

  &[data-selected] {
    background: rgb(226, 226, 226);
  }

  &:focus {
    outline: 1px solid rgb(148, 148, 148);
    outline-offset: -1px;
  }
}

[data-scope="tree-view"][data-part="item-text"],
[data-scope="tree-view"][data-part="branch-text"] {
  flex: 1;
}

[data-scope="tree-view"][data-part="branch-content"] {
  position: relative;
  isolation: isolate;
}

[data-scope="tree-view"][data-part="branch-indent-guide"] {
  position: absolute;
  content: "";
  border-left: 1px solid rgb(226, 226, 226);
  height: 100%;
  translate: calc(var(--depth) * 1.25rem);
  z-index: 0;
}

[data-scope="tree-view"][data-part="branch-indicator"] {
  display: flex;
  align-items: center;
  &[data-state="open"] svg {
    transform: rotate(90deg);
  }

  &[data-loading] svg {
    animation: spin 1s linear infinite;
  }
}

[data-scope="tree-view"][data-part="branch-control"][data-loading],
[data-scope="tree-view"][data-part="branch-trigger"][data-loading] {
  opacity: 0.6;
  cursor: wait;
}

[data-scope="tree-view"][data-part="branch-control"][data-loading]:hover {
  background: rgb(243, 243, 243);
}
