.tree-view {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--spruce-font-family-mono);
  font-size: var(--spruce-font-size-sm);
}
.tree-view ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-inline-start: var(--spruce-border-width-base) solid var(--spruce-base-color-border);
  margin-inline-start: 1rem;
  padding-inline-start: 0.5rem;
}
.tree-view li {
  margin: 0 !important;
}
.tree-view li:focus {
  outline: none;
}
.tree-view li:focus-visible > .tree-view__label {
  outline: 2px solid var(--spruce-base-color-focus-ring);
  outline-offset: -2px;
}
.tree-view li[aria-expanded=false] > ul {
  display: none;
}
.tree-view li[aria-selected=true] > .tree-view__label {
  background-color: color-mix(in srgb, var(--spruce-base-color-primary) 12%, transparent);
  color: var(--spruce-base-color-primary);
}
.tree-view__label {
  align-items: center;
  border-radius: var(--spruce-border-radius-sm);
  color: var(--spruce-base-color-heading);
  cursor: pointer;
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
}
.tree-view__label:hover {
  background-color: var(--spruce-base-color-surface-muted);
}
.tree-view__label::before {
  background-color: currentcolor;
  block-size: 0.9em;
  content: "";
  flex-shrink: 0;
  inline-size: 0.9em;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition-duration: var(--spruce-duration);
  transition-property: rotate;
  transition-timing-function: var(--spruce-timing-function);
}
.tree-view__label--file::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
  opacity: 0.6;
}
[aria-expanded=true] > .tree-view__label::before {
  rotate: 90deg;
}

[dir=rtl] .tree-view__label:not(.tree-view__label--file)::before {
  scale: -1 1;
}