.SearchResult:has(.is-muuri) {
  --column-gap-x: 8px; /* the horizontal space between each board column */

  @apply grid-rows-[var(--search-controls-h)_minmax(0px,1fr)] after:content-none;
}

.SearchResult-board {
  @apply relative h-full select-none opacity-100 transition-opacity duration-[2400ms];
  @starting-style {
    opacity: 0;
  }
}

.SearchResult-board-column {
  --BoardColumn-minWidth: 270px;
  --BoardColumn-maxWidth: 400px;
  --BoardColumn-calcWidth: clamp(
    var(--BoardColumn-minWidth),
    calc(100% / var(--columnCount)),
    var(--BoardColumn-maxWidth)
  );

  @apply absolute left-0 top-0 z-[1] flex min-h-full w-[--BoardColumn-calcWidth];
}

.SearchResult-board-columnContent {
  @apply flex w-full flex-col gap-2;
}

/* Overrides standard search styles, establishes grid layout */
.SearchResult-items.is-muuri .SearchResult-boardContainer {
  @apply relative left-[calc(1rem_-_var(--column-gap-x))] h-full w-[calc(100%_-_var(--column-gap-x))] overflow-x-auto overscroll-x-contain [grid-area:results];

  .moreCards-button,
  .moreColumns-button {
    @apply hidden;
  }

  > .Message {
    @apply me-4 ms-1.5;
  }
}

h2.BoardView-title {
  @apply relative me-2.5 ms-1.5 flex h-12 items-center rounded-lg bg-gray-100 px-4 text-sm font-semibold capitalize text-gray-900 after:ms-[0.5ch] after:[content:'('_attr(data-count)_')'];
}

.BoardView-listContainer {
  @apply relative grow overflow-y-auto;
}

.BoardView-list {
  @apply absolute min-h-full w-[calc(100%_-_(2_*_var(--column-gap-x)))];
}

.BoardView-card {
  @apply absolute z-10 mx-1.5 mb-2 min-w-full list-none rounded-lg bg-white shadow-sm hover:cursor-grab hover:bg-gray-100;
}

/* When releasing a dragged card, this style helps smooth out the transition-in
  of the the newly added card to the DOM, before the Muuri grid positions it. */
.BoardView-card.muuri-item {
  @apply opacity-100 transition-opacity duration-500;
  @starting-style {
    opacity: 0;
  }
}

.BoardView-card .ContentSummary-row:has(~ .ContentSummary-row) {
  @apply mb-2;
}

/* If the row has viewers displayed, add a margin */
.BoardView-card [data-rtc-edit-field-update-viewers]:not(:empty) {
  @apply mt-2;
}

.BoardView-card .ContentSummary-row {
  @apply mb-0 flex-wrap;

  .ContentSummary-subtitle {
    @apply min-w-full max-w-full basis-full text-xs font-medium text-gray-500;
  }

  .ContentSummary-link {
    @apply flex-1 text-sm font-medium text-gray-900;
  }

  .ContentSummary-link > a {
    @apply hyphens-auto text-inherit no-underline hover:text-gray-900 hover:underline;
  }

  .ContentSummary-description {
    @apply text-xs font-medium text-gray-900;
  }
}

/* These seem like empty placeholders? Hiding for now. */
.BoardView-card .SearchResult-summary {
  @apply hidden;
}

.BoardView-card .ContentSummary-content {
  @apply overflow-clip p-4;
}

.BoardView-card.is-saving {
  @apply pointer-events-none grid place-items-center before:btu-loader before:absolute before:size-[--loader-size];
}

.BoardView-card.is-saving .ContentSummary-content {
  @apply !opacity-50;
}

/* The dragging styles. */
.SearchResult-dragContainer {
  @apply fixed left-0 top-0 z-[var(--BoardContainer-zIndex,_10000)];
}

.BoardView-card.muuri-item-dragging {
  @apply z-[12] cursor-grabbing border border-primary-500 shadow-xl;
}

.BoardView-card.muuri-item-releasing {
  @apply z-[11];
}

.BoardView-card.muuri-item-hidden {
  @apply z-[8];
}

.BoardView-card.muuri-item-placeholder {
  @apply z-[9] m-0 border border-dashed border-primary-500 bg-primary-25;
}

.BoardView-card.muuri-item-placeholder > * {
  @apply hidden;
}

.SearchResult-board-fields {
  @apply ms-1 flex gap-2 self-center;
}

.SearchResult-board-fields .SearchResult-sorts {
  @apply m-0;
}

.SearchResult-board-fields .SearchResult-fields {
  @apply order-last mx-0;
}

/* TODO: Once Message CSS is complete, revisit this style. Hopefully we can remove it;  */
.SearchResult-board-errors {
  @apply fixed bottom-0 right-0 z-[100] max-h-[50%] max-w-[--BoardColumn-minWidth] overflow-auto;
}

/* TODO: Once Message CSS is complete, revisit this style. Hopefully we can remove it;  */
.SearchResult-board-errors-close {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs absolute right-2 top-2 z-[100] bg-transparent before:btu-icon before:btu-icon-x touch-device:btu-button-sm;
}
