/* Base styles for the tree structure */
#kpacks-tree {
  margin: 0;
  padding: 0;
}

#kpacks-tree ul {
  list-style: none; /* Removes bullet points */
  padding-left: 20px; /* Indentation for child items */
}

#kpacks-tree li {
  margin: 5px 0;
}

#kpacks-tree a {
  color: #005aa9;
  font-size: 12px;
}

/* Tree parent styles */
.tree-parent {
  user-select: none;
  position: relative;
  display: flex;
  align-items: center; /* Align arrow and text vertically */
}

/* Arrow styles */
.tree-parent-arrow {
  cursor: pointer;
  margin-right: 10px; /* Space between arrow and text */
  position: relative;
  width: 16px; /* Arrow size */
  height: 16px; /* Arrow size */
  display: inline-block;
  transform-origin: center center; /* Add this */
}

.tree-parent-arrow::before {
  content: ""; /* Arrow symbol */
  position: absolute;
  left: 0;
  top: 50%;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #005aa9;
  transform: translateY(-50%); /* Center the arrow vertically */
  transition: transform 0.3s ease-in-out; /* Move transition here */
  transform-origin: center center; /* Add this */
}

/* Change this selector to rotate the main element instead of the pseudo-element */
.tree-parent-arrow.expanded::before {
  transform: translateY(-50%) rotate(90deg); /* Apply rotation to pseudo-element */
}

/* Tree children styles */
.tree-children {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth expand/collapse */
  margin-left: 1em; /* Indentation for child nodes */
}

.tree-children.expanded {
  max-height: none !important;
  opacity: 1;
}