.SearchFields {
  @apply grid-rows-[auto_1fr];
}

.SearchFields-tab-ul {
  @apply __horizontal-tabs;
}

.SearchFields-tab {
  @apply __tab-item;
}

.SearchFields-tab.is-selected {
  @apply __tab-item-selected;
}

.SearchFields-container.is-hidden,
.SearchFields-divider,
.SearchFields-input + span {
  @apply hidden;
}

.SearchFields-container {
  @apply flex h-full w-full flex-col gap-4 overflow-y-auto py-6 md:flex-row;
}

.SearchFields-hide,
.SearchFields-displayContainer {
  @apply w-full rounded-lg border md:w-1/2 md:overflow-y-auto;
}

/* Full height needed for draggable container */
.SearchFields-displayTitle {
  @apply flex h-full flex-col;
}

.SearchFields-heading {
  @apply btu-heading-5 border-b p-4 text-gray-900;
}

.SearchFields-heading + btu-input {
  @apply blokk px-4 before:btu-icon before:btu-icon-search before:absolute before:left-8 before:top-2;

  input {
    @apply ps-11;
  }
}

.SearchFields-filter {
  @apply my-4 border-gray-100 bg-gray-100;
}

.SearchFields-subheading {
  @apply border-t px-4 py-[13px] text-xs font-medium text-gray-700;
}

.SearchFields btu-input + ul {
  @apply border-t;
}

.SearchFields .RCIG-list {
  @apply mb-0 grow rounded-t-none;
}

.SearchFields .RCIG-item {
  @apply rounded-none;
}

.SearchFields .RCIG-item:not(.Sortable-ghost, .Sortable-drag) {
  @apply flex flex-row-reverse border-none bg-white px-4 hover:bg-gray-100;

  /* Sortable styles */
  &.is-added {
    --border-to: transparent;

    @apply border-solid;
  }
}

.SearchFields .RCIG-item.is-disabled {
  @apply pointer-events-none opacity-50;
}

.SearchFields-sort-item-label {
  @apply grow py-2;
}

/* Override input styles so they appear as arrow buttons */
.SearchFields-sort-item-label input.SearchFields-input {
  @apply btu-button btu-button-text-hidden !btu-button-fill-none btu-button-gray btu-button-xs shrink-0 border-none before:btu-icon before:btu-icon-circle-arrow-right touch-device:btu-button-sm after:hidden;
}

.SearchFields-displayContainer
  .SearchFields-sort-item-label
  input.SearchFields-input {
  @apply before:btu-icon-circle-arrow-left;
}

.SearchFields-sort-item-span {
  @apply me-auto text-sm font-semibold text-gray-900;
}

.SearchFields-drag {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs shrink-0 before:btu-icon before:btu-icon-grip-vertical touch-device:btu-button-sm hover:cursor-grab;
}

.SearchFields-missingValue {
  @apply italic;
}
