/* Hierarchy search result styles */
.Hierarchy {
  @apply col-span-full grid size-full auto-cols-[minmax(auto,2fr)] grid-flow-col grid-cols-[minmax(262px,1fr)_minmax(262px,1fr)] gap-1 overflow-x-auto overflow-y-hidden px-2.5 [grid-row:2/4];

  .watch-button {
    @apply hidden;
  }
}

.Hierarchy-column {
  @apply max-h-full min-w-[262px] overflow-y-auto;

  /* Hacky way to make sure that a single column will span full width */
  .Hierarchy > & {
    &:has(+ .Hierarchy-children) {
      @apply col-span-2;
    }
  }

  a[data-mismatch-hierarchy-type] {
    @apply pointer-events-none cursor-none opacity-30;
  }

  ul {
    @apply mx-1.5 mb-4 overflow-hidden rounded-lg shadow-md before:blokk before:h-[42px] before:w-full before:bg-gray-100;
  }

  li {
    @apply flex items-center bg-white px-4 before:me-2 before:ms-4 before:blokk before:h-7 before:w-px before:bg-gray-200 hover:bg-gray-100 [&:not(:last-child)]:border-b;

    a:not(.Hierarchy-expand) {
      @apply -order-1 flex-grow truncate py-3.5 text-sm font-medium text-gray-900 no-underline hover:underline;
    }

    &.is-selected {
      @apply bg-primary-50;

      .Hierarchy-expand {
        @apply text-primary-800;
      }
    }

    &:has(.Hierarchy-expand:hover) {
      @apply bg-white;
    }

    &:not(:has(.Hierarchy-expand)) {
      @apply after:btu-icon after:btu-icon-chevron-right rtl:after:btu-icon-chevron-left after:blokk after:p-1 after:text-gray-300;
    }
  }
}

.Hierarchy-children {
  @apply contents;

  /* Shows the user that the selected item has no loadable children */
  :has(li.is-selected) + &.loaded:empty {
    @apply blokk h-[42px] min-w-[262px] flex-1 rounded-lg bg-gray-100 shadow-md;
  }
}

.Hierarchy-expand {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-chevron-right touch-device:btu-button-sm rtl:before:btu-icon-chevron-left hover:bg-gray-200;
}

.Hierarchy-moreElements {
  @apply hidden;
}
