.tree {
  overflow-y: auto;
  appearance: none;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  --pico-background-color: var(--pico-form-element-background-color);
  --pico-border-color: var(--pico-form-element-border-color);
  --pico-color: var(--pico-form-element-color);
  --pico-box-shadow: none;
  border: var(--pico-border-width) solid var(--pico-border-color);
  border-radius: var(--pico-border-radius);
  outline: 0;
  background-color: var(--pico-background-color);
  box-shadow: var(--pico-box-shadow);
  color: var(--pico-color);
  font-weight: var(--pico-font-weight);
  transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
}

.tree-item > i {
  color: var(--pico-primary);
}

.tree-item > input[type=radio] {
  display: none;
}

.tree-item > label,
.tree-item > input[type=radio] + label {
  display: inline-block;
  border-radius: var(--pico-border-radius);
  padding: calc(0px - var(--pico-border-width)) calc(10px - var(--pico-border-width)) calc(-3px - var(--pico-border-width)) calc(10px - var(--pico-border-width));
  background-color: transparent;
  color: var(--pico-color);
  cursor: pointer;
  transition: background-color var(--pico-transition), color var(--pico-transition);
}

.tree-item > label > i,
.tree-item > input[type=radio] + label > i {
  color: var(--pico-primary);
  transition: color var(--pico-transition);
}

.tree-item > label > input[type=radio],
.tree-item > input[type=radio] + label > input[type=radio] {
  display: none;
}

.tree-item > label:not(:has(> input[type=radio]:checked)):hover,
.tree-item > input[type=radio]:not(:checked) + label:hover {
  background-color: var(--pico-primary-hover);
  color: var(--pico-primary-inverse);
}

.tree-item > label:not(:has(> input[type=radio]:checked)):hover > i,
.tree-item > input[type=radio]:not(:checked) + label:hover > i {
  color: var(--pico-primary-inverse);
}

.tree-item > label:has(> input[type=radio]:checked),
.tree-item > input[type=radio]:checked + label {
  background-color: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

.tree-item > label:has(> input[type=radio]:checked) > i,
.tree-item > input[type=radio]:checked + label > i {
  color: var(--pico-primary-inverse);
}