.tree__list--root {
  list-style-type: none;
}

.tree__list {
  list-style-type: none;
  margin-left: 16px;
}

.tree__link {
  padding: 6px 16px;
  line-height: 20px;
  display: flex;
  color: #606770;
  font-weight: 400;
  border-radius: 0.25rem;
  transition-property: color, background-color;
  transition-duration: 0.3s;
  justify-content: space-between;
}

.tree__link--active {
  color: var(--genji-main-color);
  background: rgba(0, 0, 0, 0.05);
}

.tree__list-item {
  margin: 0.25rem 0;
}

.tree__link:hover {
  background: rgba(0, 0, 0, 0.05);
}

.tree__link--sublist::after {
  content: " ";
  height: 1.25rem;
  width: 1.25rem;
  display: inline-block;
  transform: rotate(180deg);
  transition-duration: 0.3s;
  transition-property: transform;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="16px" height="16px" viewBox="0 0 1024 1024" version="1.1"><path fill="rgba(0, 0, 0, 0.5)" d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3c-3.8 5.3-0.1 12.7 6.5 12.7h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.tree__list-item--collapsed .tree__link--sublist::after {
  transform: rotate(90deg);
}