.p-tree {
  @apply bg-surface-0 p-4 text-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-tree-root-children,
.p-tree-node-children {
  @apply m-0 flex list-none flex-col gap-[2px];
}

.p-tree-root-children {
  @apply px-0 pb-0 pt-[2px];
}

.p-tree-node-children {
  @apply pb-0 pe-0 ps-4 pt-[2px];
}

.p-tree-node {
  @apply p-0 outline-none;
}

.p-tree-node-content {
  @apply flex items-center gap-1 rounded-md px-2 py-1 text-surface-700 transition-colors duration-200 dark:text-surface-0;
}

.p-tree-node:focus-visible > .p-tree-node-content {
  @apply outline outline-1 outline-offset-2 outline-primary;
}

.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover {
  @apply bg-surface-100 text-surface-700 dark:bg-surface-800 dark:text-surface-0;
}

.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon {
  @apply text-surface-600 dark:text-surface-300;
}

.p-tree-node-content.p-tree-node-selected {
  @apply bg-highlight;
}

.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button {
  @apply text-inherit;
}

.p-tree-node-toggle-button {
  @apply relative inline-flex h-7 w-7 flex-shrink-0 cursor-pointer select-none items-center justify-center overflow-hidden rounded-full border-none bg-transparent p-0 text-surface-500 transition-colors duration-200 enabled:hover:bg-surface-100 enabled:hover:text-surface-600 dark:text-surface-400 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-300;
}

.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover {
  @apply bg-surface-0 text-primary dark:bg-surface-900;
}

.p-tree-root {
  @apply overflow-auto;
}

.p-tree-node-selectable {
  @apply cursor-pointer select-none;
}

.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button {
  @apply invisible;
}

.p-tree-node-icon {
  @apply text-surface-500 transition-colors duration-200 dark:text-surface-400;
}

.p-tree-node-content.p-tree-node-selected .p-tree-node-icon {
  @apply text-primary;
}

.p-tree-filter {
  @apply mb-2;
}

.p-tree-filter-input {
  @apply w-full;
}

.p-tree-loading {
  @apply relative h-full;
}

.p-tree-loading-icon {
  @apply h-8 w-8 text-[2rem];
}

.p-tree .p-tree-mask {
  @apply absolute z-10 flex items-center justify-center;
}

.p-tree-flex-scrollable {
  @apply flex h-full flex-1 flex-col;
}

.p-tree-flex-scrollable .p-tree-root {
  @apply flex-1;
}
