/* simple tree */
.simple-tree {
  user-select: none;
  -moz-user-select: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
}
.simple-tree>details>summary {
  display: none;
}
.simple-tree a,
.simple-tree summary {
  display: block;
  width: fit-content;
  width: -moz-fit-content;
  border: solid 1px transparent;
  padding: 0 2px;
  outline: none;
  cursor: pointer;
}
.simple-tree a {
  text-decoration: none;
  color: inherit;
}
.simple-tree ::-webkit-details-marker {
  display: none;
}
.simple-tree summary {
  list-style-type: none;
  background-color: #fff;
  outline: none;
}
.simple-tree.dark summary {
  background-color: #444;
}
.simple-tree details>:not(details),
.simple-tree details {
  position: relative;
}
.simple-tree details :not(summary) {
  margin-left: 20px;
}
.simple-tree.nodots details :not(summary) {
  margin-left: 20px;
}
.simple-tree details::before,
.simple-tree details>:not(details)::before {
  content: '';
  width: 10px;
  display: block;
  position: absolute;
}
.simple-tree details::before,
.simple-tree details>:not(details)::before {
  background: none;
}

.simple-tree details::before {
  display: none;
}

.simple-tree details>:not(details):not(summary)::before {
  display: none;
}

/*Closed*/
.simple-tree details>summary::before {
  content: '\e13a';
  font-family: 'Phosphor';
  font-size: 16px;
  line-height: 1;
  color: inherit;
  -webkit-text-stroke: 0.4px currentColor;
  background: none;
  width: auto;
  left: -18px;
  top: 1px;
}

/*Open*/
.simple-tree details[open]>summary::before {
  content: '\e136';
  font-family: 'Phosphor';
  font-size: 16px;
  line-height: 1;
  color: inherit;
  -webkit-text-stroke: 0.4px currentColor;
  background: none;
  width: auto;
  left: -18px;
  top: 1px;
}

/* async tree */
.async-tree details[open][data-loaded=false] {
  pointer-events: none;
}

.async-tree details[open][data-loaded=false]>summary::before {
  content: '\e66c';
  font-family: 'Phosphor';
  font-size: 16px;
  line-height: 1;
  color: inherit;
  -webkit-text-stroke: 0.4px currentColor;
  background: none;
  width: auto;
  animation: tree-spin 1s linear infinite;
}
.async-tree.black details[open][data-loaded=false]>summary::before {
  color: white;
}

@keyframes tree-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* select tree */
.select-tree .selected {
  background-color: #beebff;
  border-color: #99defd;
  z-index: 1;
}

.select-tree.dark .selected {
  background-color: #3a484e;
  border-color: #99defd;
}