@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;

@include b(tree) {
  box-sizing: border-box;
  transition: height 0.3s getCssVar("bezier", "1");
  overflow: hidden;

  @include e(node) {
    border-radius: getCssVar("radius", "medium");
    padding: 4px;
    margin-bottom: 4px;
    color: getCssVar("color", "text-1");
    cursor: pointer;
    overflow: hidden;

    &:hover {
      background-color: getCssVar("color", "fill-2");
    }
    &:last-child {
      margin-bottom: 0;
    }
    @include when(selected) {
      background-color: getCssVar("color", "fill-2");
    }
    @include when(disabled) {
      cursor: not-allowed;
    }
  }

  @include e(content) {
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 8px;
  }

  @include e(expand-icon) {
    height: 18px;
    width: 18px;
    font-size: 14px;
    border-radius: getCssVar("radius", "circle");
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s getCssVar("bezier", "1");
    cursor: pointer;
    &:hover {
      background-color: getCssVar("color", "fill-3");
    }
    @include when(expanded) {
      transform: rotate(90deg);
    }
    @include when(leaf) {
      opacity: 0;
    }
  }

  .tree-list-move,
  .tree-list-enter-active,
  .tree-list-leave-active {
    transition: all 0.3s getCssVar("bezier", "1");
  }

  .tree-list-enter-from,
  .tree-list-leave-to {
    opacity: 0;
  }

  .tree-list-enter-to,
  .tree-list-leave-from {
    opacity: 1;
  }

  .tree-list-leave-active {
    position: absolute;
    pointer-events: none;
  }
}