@import url('../CloudTheme.css');

.treeNode:hover:not(.selected) {
  background-color: $blue-blue5;
}

.treeNode {
  position: relative;
  padding: 2px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
  box-sizing: border-box;
  width: 100%;
  outline: none;
  transition:
    background-color 0.2s ease,
    outline 0.2s ease;
  border-radius: 6px;

  .treeNodeIcon {
    display: flex;
    align-items: center;
    justify-content: center; /* 图标容器居中 */
    path {
      fill: $black-black1;
    }
  }
  .labelTextWrapper {
    max-width: 100%;
    display: flex;
    align-items: center; /* 文本容器居中 */
  }

  /* &.firstChild {
    margin-top: 2px;
  } */

  &:hover {
    background-color: $blue-blue5;
  }

  &.selected {
    background-color: $blue-blue4;
    &:hover {
      background-color: $blue-blue4;
    }

    .labelText {
      color: $blue-blue1;
      font-weight: 500 !important;
    }
    .treeNodeIcon {
      path {
        fill: $blue-blue1 !important;
      }
    }
    .treeContent {
      font-weight: 500;
      color: $blue-blue1;
    }
  }

  &.level0 {
    margin-top: 4px;
  }

  &.level1 {
    left: 15px !important;
    width: calc(100% - 15px) !important;
    .treeNodeIcon {
      path {
        fill: $black-black2;
      }
    }
  }
  &.level2 {
    left: 45px !important;
    width: calc(100% - 45px) !important;

    .labelText {
      font-weight: 400;
    }
    .treeNodeIcon {
      path {
        fill: $black-black2;
      }
    }
  }
  &.level3 {
    left: 65px !important;
    width: calc(100% - 65px) !important;

    .labelText {
      font-weight: 400;
    }
    .treeNodeIcon {
      path {
        fill: $black-black2;
      }
    }
  }
}

.treeNodeIcon svg path {
  transition: fill 0.2s ease;
}

.treeContent {
  max-width: calc(100% - 50px);
  width: 100%;
}

.loadingNode {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 95%;
  &.level1 {
    left: 20px !important;
  }
  &.level2 {
    left: 35px !important;
  }
  &.level3 {
    left: 65px !important;
  }
}

.noItemNode {
  display: flex;
  align-items: center;
  &.level1 {
    left: 20px !important;
  }
  &.level2 {
    left: 35px !important;
  }
  &.level3 {
    left: 65px !important;
  }
}

.virtualTreeList {
  padding-right: 4px;
}

.treeContentWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  padding-right: 0;
  height: 28px;
  flex: 1;
  width: 100%;

  .actionNode {
    display: none;
    align-items: center;
    gap: 2px;
    &.show {
      display: flex;
    }
  }
  .staticNode,
  .actionNodeWrapper {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  &:hover {
    .actionNode {
      display: flex;
    }
  }
}