.tree-line.tree-location,
.tree-line.tree-fixture {
  min-height: 43px;
}

.tree-fixture {
  position: relative;
  transition: margin-top .16s ease, opacity .16s ease, transform .16s ease;
}

.tree-fixture.fixture-drag-source {
  opacity: .32;
  transform: scale(.99);
}

.fixture-drag-placeholder {
  height: 43px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 3px 0;
  padding: 0 12px;
  border: 1px dashed #78a583;
  border-radius: 11px;
  background: #eff9e5;
  color: var(--green);
  animation: fixturePlaceholderIn .14s ease-out;
}

.fixture-drag-placeholder span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px #214b3920;
}

.fixture-drag-placeholder strong {
  font-size: 11px;
}

@keyframes fixturePlaceholderIn {
  from { height: 0; opacity: 0; transform: scale(.98); }
  to { height: 43px; opacity: 1; transform: scale(1); }
}

.tree-location.room-light-drop {
  background: #e9f5ea;
  box-shadow: inset 0 0 0 2px #78a583;
}


.tree-line[draggable="true"] {
  cursor: grab;
}

.tree-line[draggable="true"]:active {
  cursor: grabbing;
}

.tree-label {
  min-width: 0;
}

.tree-toggle {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #667168;
}

.tree-toggle:hover:not(:disabled) {
  background: #e8ece5;
  color: var(--green);
}

.tree-toggle span {
  display: block;
  font-size: 20px;
  line-height: 1;
  transition: transform .15s ease;
}

.tree-toggle.expanded span {
  transform: rotate(90deg);
}

.tree-toggle:disabled {
  opacity: .2;
  cursor: default;
}

.tree-children.collapsed {
  display: none;
}

.tree-editable-name {
  display: inline-block;
  max-width: min(520px, 55vw);
  border-bottom: 1px solid transparent;
  cursor: text;
}

.tree-editable-name:hover {
  color: var(--green);
  border-bottom-color: #8da394;
}

.tree-editable-name .profile-title-editor {
  width: min(360px, 45vw);
  padding: 5px 8px;
  border-radius: 7px;
  font-size: inherit;
  font-weight: inherit;
}

.tree-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  opacity: .45;
  transition: opacity .15s ease;
}

.tree-line:hover > .tree-actions,
.tree-actions:focus-within {
  opacity: 1;
}

.tree-actions button {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #edf0e9;
  color: var(--green);
  font-weight: 900;
}

.tree-actions button:hover {
  background: #dfe8df;
}

.tree-actions button.tree-delete {
  background: #fff0ec;
  color: #a43b26;
}

.tree-actions button.tree-delete:hover {
  background: #ffddd5;
}

.tree-fixture input[type="range"] {
  flex: 0 0 110px;
  position: relative;
  z-index: 2;
  cursor: pointer;
}