$indent-size: 16px;
$border-radius: var(--border-radius-small);
.list {
  --indent-size: 0px;
  --item-background: transparent;
  --item-selection-color: var(--color-neutral-20);
  --item-hover-color: var(--color-neutral-30);
  --item-child-of-selected-color: var(--color-neutral-10);
  position: relative;
  // &:hover {
  //   .expand {
  //     opacity: 1;
  //   }
  // }
  &:not(.dragging) {
    .item {
      &:not(.disabled) {
        &:focus-visible {
          box-shadow: 0 0 0 1px solid var(--item-hover-color);
        }
        &:hover:not(.selected) {
          // background-color: var(--item-hover-color);
          box-shadow: inset 0 0 0 1px var(--item-hover-color);
        }
      }
    }
  }
}

.item {
  --indent-size: 0px;
  background: var(--item-background);
  position: relative;
  user-select: none;
  cursor: default;
  display: flex;
  align-items: start;
  outline: none;
  border: none;
  backface-visibility: hidden;
}
.selected {
  background: var(--item-selection-color);
}

.roundTop {
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
}

.roundBottom {
  border-bottom-left-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
}

.childOfSelected {
  background: var(--item-child-of-selected-color);
}

.expand {
  outline: none;
  font-size: 10px;
}

.dropLine {
  position: absolute;
  background: white;
  height: 3px;
  width: 100%;
}

.placeInside::before {
  position: absolute;
  inset: -1px 0 -1px calc(var(--indent-size) + 8px);
  display: block;
  content: '';
  pointer-events: none;
  transition: all 0.1s ease-out;
  border: 0px solid white;
  border-width: 2px;
  border-radius: 8px;
  left: var(--indent-size);
}

.placementInvalid::before {
  border-color: var(--color-error-30);
}

/** Indent levels */
@for $i from 1 through 10 {
  .indent#{$i} {
    padding-left: $indent-size * $i;
    --indent-size: #{$indent-size * $i};
  }
}

.dropPoint {
  position: absolute;
  background: white;
  left: calc(16px + var(--indent-size));
  height: 1px;
  width: calc(100% - var(--indent-size) - 16px);
  z-index: 1;

  transition: all 0.1s ease-in-out;

  &.placementInvalid {
    background-color: var(--color-error-30);
  }
}