.p-organizationchart-table {
  @apply mx-auto my-0 border-separate border-spacing-0;
}

.p-organizationchart-table > tbody > tr > td {
  @apply px-3 py-0 text-center align-top;
}

.p-organizationchart-node {
  @apply relative inline-block rounded-md border border-surface-200 bg-surface-0 px-4 py-3 text-surface-700 transition-colors duration-200 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) {
  @apply px-4 pb-5 pt-3;
}

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

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

.p-organizationchart-node-toggle-button {
  @apply absolute -bottom-3 start-1/2 z-20 -ms-3 inline-flex h-6 w-6 cursor-pointer select-none items-center justify-center rounded-full border border-surface-200 bg-surface-0 text-surface-500 no-underline transition-colors duration-200 hover:bg-surface-100 hover:text-surface-700 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-surface-700 dark:bg-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0;
}
.p-organizationchart-node-toggle-button-icon {
  @apply relative top-px;
}

.p-organizationchart-connector-down {
  @apply mx-auto my-0 h-6 w-px bg-surface-200 dark:bg-surface-700;
}

.p-organizationchart-connector-right {
  @apply rounded-none;
}

.p-organizationchart-connector-left {
  @apply rounded-none border-e border-surface-200 dark:border-surface-700;
}

.p-organizationchart-connector-top {
  @apply border-t border-surface-200 dark:border-surface-700;
}

.p-organizationchart-node-selectable {
  @apply cursor-pointer;
}

.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) {
  @apply border-e-0;
}

.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) {
  @apply rounded-se-md;
}

.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) {
  @apply rounded-ss-md border-s border-surface-200 dark:border-surface-700;
}
