/*
  SearchResult handles the search results themselves, along with controls
  such as pagination, sorting, and image size controls.
*/
.SearchResult {
  --search-controls-h: 68px;
  --pagination-h: 80px;
  --actions-button-w: 0px;

  @apply relative grid h-full w-full grid-cols-[auto_auto_auto_auto_minmax(0px,1fr)_auto_auto_var(--actions-button-w)_12px] grid-rows-[var(--search-controls-h)_minmax(0px,1fr)_var(--pagination-h)] items-center overflow-hidden bg-gray-50 [grid-area:results] [grid-template-areas:'toggle_sorts_fields_watching_._size-toggle_views_actions_.''results_results_results_results_results_results_results_results_results''limit_limit_limit_limit_pagination_pagination_pagination_pagination_pagination'];

  &:has(.SearchResult-pagination) {
    @apply after:absolute after:z-0 after:col-span-full after:row-[3/4] after:h-full after:w-full after:bg-white;
  }

  &:has(.SearchResult-actions-toggle) {
    --actions-button-w: calc(36px + (2 * 4px));
  }

  /*
    Keeps the controls buttons from jumping around while the ComboInput
    renders.
  */
  &:has(.SearchResult-sorts) {
    --controls-opacity: 0;

    &:has(.SearchResult-sorts .ComboInput-selected) {
      --controls-opacity: 1;
    }
  }

  .SearchWidget-controlsToggle {
    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-gray me-1 ms-4 bg-white opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:toggle] before:btu-icon before:btu-icon-list-filter hover:bg-gray-200 hover:outline-gray-500;

    &[aria-expanded='true'] {
      @apply btu-button-pressed bg-primary-50 outline-primary-600 hover:bg-gray-200 hover:text-gray-700 hover:outline-gray-500;
    }
  }
}

/* Global search has a few extra buttons to account for */
.SearchWidget.is-global {
  .SearchResult {
    --fullscreen-button-w: calc(36px + 4px + 12px);

    @apply grid-cols-[auto_auto_auto_minmax(0px,1fr)_auto_auto_var(--actions-button-w)_var(--fullscreen-button-w)_var(--popup-close-w)] [grid-template-areas:'toggle_sorts_fields_._size-toggle_views_actions_fullscreen_close''results_results_results_results_results_results_results_results_results''limit_limit_limit_pagination_pagination_pagination_pagination_pagination_pagination'];
  }
}

.SearchResult-items {
  @apply contents;
}

/* Ellipsis menu at top right of search widget */
.SearchResult-actions {
  .SearchResult-selection {
    @apply relative mb-1 inline-flex w-full items-center justify-between gap-2 px-4 pb-4 pt-2 text-sm font-semibold text-gray-900 after:absolute after:-left-4 after:-right-4 after:top-[60px] after:h-px after:bg-gray-200;
  }

  & > .SearchResult-selectionCount {
    @apply relative mb-1 px-4 pb-6 pt-[14px] text-sm font-semibold text-gray-900 after:absolute after:left-0 after:right-0 after:top-[60px] after:h-px after:bg-gray-200;
  }

  & > .SearchResult-action {
    @apply absolute right-4 top-4 z-10;
  }
}

.SearchResult-selectionReset {
  @apply btu-button btu-button-fill-none btu-button-error;
}

.SearchResult-actions-body {
  .SearchResult-action-link {
    @apply Dropdown-item;

    &[href*='/searchAdvancedFull'] {
      @apply hidden;
    }
  }

  > h2 {
    @apply ComboInput-heading;
  }
}

.SearchResult-actions-toggle + .frame {
  @apply Dropdown;
}

.SearchResult-actions-toggle[aria-expanded='true'] + .frame {
  @apply Dropdown-is-open;
}

.SearchResult-view {
  @apply contents;

  > .Message {
    @apply mx-4 self-start [grid-area:results];
  }
}

.SearchResult-views {
  @apply mx-1 opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:views];
}

.SearchResult-views > ul {
  @apply inline-flex items-stretch rounded-lg border border-gray-300 bg-white;

  > li {
    @apply [&:not(:first-child)]:border-s [&:not(:first-child)]:border-solid [&:not(:first-child)]:border-s-gray-300 [&:not(:first-child)_>_a]:rounded-s-none [&:not(:last-child)_>_a]:rounded-e-none;

    > a {
      @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray bg-white before:btu-icon before:btu-icon-circle-dashed hover:bg-gray-200 focus:z-[1];

      &[data-label='list'] {
        @apply before:btu-icon-list;
      }

      &[data-label='mixed'] {
        @apply before:btu-icon-layout-list;
      }

      &[data-label='grid'] {
        @apply before:btu-icon-layout-grid;
      }

      &[data-label='board'] {
        @apply before:btu-icon-kanban;
      }

      &[data-label='taxonomy'],
      &[data-label='hierarchy'] {
        @apply before:btu-icon-network;
      }
    }
  }

  > li.selected > a {
    @apply btu-button-pressed bg-primary-50;
  }
}

.SearchResult-pagination {
  @apply z-[1] me-6 ms-4 justify-self-end [grid-area:pagination];

  /* Hide page result count on smaller viewports */
  ul.pagination {
    /* Prevents border from appearing around empty element
      Cases:
        1. results fit on single page on a small viewport
        2. 0 results on any viewport */
    @apply hidden [&:has(.next,.previous)]:inline-flex;

    li {
      @apply first:hidden first:truncate [&:nth-child(2)]:border-s-0;
    }

    /* Hides extraneous button border when only next and last buttons are displayed */
    li.next {
      @apply border-s-0;
    }

    li.previous ~ li.next {
      @apply border-s;
    }
  }
}

/* Buttons to select specific result page. Hidden on small/medium viewports. */
.SearchResult-pages {
  @apply hidden xl:contents;

  > ol {
    @apply h-full xl:flex [&_>li>a]:flex [&_>li>a]:h-full [&_>li>a]:items-center [&_>li>a]:justify-center;
  }

  /* Normally the surrounding pagination controls, like previous and next, create nice round corners on either side.
    But when the controls aren't needed, at the ends of the list, the rounded corners need to
    be applied to the container of the page buttons. */
  &:last-child:has(> ol > li a.is-active:last-child) > ol {
    @apply rounded-ee-lg rounded-se-lg [clip-path:border-box];

    /* Prevents extraneous border when on final results page */
    li:last-child > a {
      @apply border-e-0;
    }
  }

  /* Active page buttons get left borders. Surrounding buttons usually provide the other borders. */
  li a.is-active {
    @apply border border-b-0 border-t-0 border-solid border-s-gray-300 bg-gray-100;
  }

  /* Applies border between previous and page 1 buttons */
  li:first-child:has(a:not(.is-active)) {
    @apply border-s border-s-gray-300;
  }

  /* When an active page button is somewhere at the start, or middle of the pagination,
    it only needs a right border */
  li:not(:last-child) a.is-active {
    @apply border-e-gray-300;
  }
}

.SearchResult-page {
  @apply btu-button btu-button-fill-none [--button-border-radius:0];
}

.SearchResult-sorts {
  @apply mx-1 min-w-[100px] max-w-max opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:sorts];
}

/* Special button style for collapsed sorts */
.__sorts-collapsed {
  @apply w-[36px] min-w-[unset];

  .ComboInput {
    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-gray border-none bg-white hover:bg-gray-200 hover:outline-gray-500;

    .ComboInput-icon {
      @apply before:btu-icon-arrow-down-a-z;
    }

    &[aria-expanded='true'] {
      .ComboInput-icon {
        @apply before:btu-icon-x;
      }
    }
  }
}

/* "Select Fields" button at top left of SearchResult */
.SearchResult-fields {
  /* Disappears on small viewports (per Product discussion) - see responsive styles below */
  @apply mx-1 opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:fields];

  a {
    @apply btu-button btu-button-gray text-nowrap text-sm font-semibold text-gray-700 no-underline;
  }
}

.SearchResult-limit {
  /* Needs to stretch a little farther than grid area 'limit' to avoid awkward stretching */
  @apply z-[1] me-4 ms-6 w-fit [grid-area:limit] [grid-column:1/5];
}

/* Contains actual search result items */
.SearchResult-list {
  @apply __table-wrapper relative h-full w-full border-b border-b-gray-200 [grid-area:results] empty:hidden;

  &.is-processing {
    @apply pointer-events-none opacity-30;
  }

  tbody > tr {
    @apply last:border-b-0;
  }

  > .Message {
    @apply mx-4;
  }
}

/* Appears when the user selects "Print Search" from the more actions menu */
.searchResult-print {
  > h1 {
    @apply p-4 text-sm font-medium text-gray-900;
  }
}

.SearchResult-images figure {
  @apply relative h-[238px] w-auto min-w-[200px] overflow-clip rounded-lg border border-gray-300 bg-gray-50 shadow-sm;

  &:has(input[type='checkbox']:checked) {
    @apply border-primary-500;
  }

  > input[type='checkbox'] {
    @apply absolute right-4 top-4 z-10 box-content rounded-lg border-[6px] border-white bg-gray-300 before:absolute before:inset-[1px] before:blokk before:rounded-[1px] before:bg-white after:inset-1.5 checked:border-primary-50 checked:bg-primary-800 checked:before:hidden hover:border-gray-100 hover:bg-primary-800 hover:before:bg-primary-50;

    ~ a {
      @apply absolute inset-0 flex items-end justify-between gap-2 bg-transparent;
    }
  }

  a {
    @apply no-underline;

    &:hover figcaption {
      @apply bg-gray-100;
    }
  }

  /* Images do not occupy full height of figure to make room for caption */
  img {
    @apply h-[168px] w-full object-contain;
  }

  &.is-missing {
    @apply after:btu-icon after:btu-icon-image-off before:absolute before:left-0 before:top-0 before:flex before:h-[168px] before:w-full before:items-center before:justify-center before:bg-gray-50 after:absolute after:left-1/2 after:top-[84px] after:-translate-x-1/2 after:-translate-y-1/2 after:text-gray-400 after:btu-icon-xl;

    > img {
      @apply hidden;
    }
  }

  figcaption {
    @apply flex h-[71px] w-full flex-col items-start justify-center overflow-hidden border-t border-t-gray-200 bg-white py-4 pe-10 ps-4 text-sm;

    .contentTitle--v5 {
      @apply w-full truncate text-sm font-medium text-gray-900;
    }

    .contentType--v5 {
      @apply w-full truncate text-xs text-gray-500;
    }

    .contentStatus--v5 {
      @apply absolute left-4 top-4 shadow-sm;
    }
  }

  .ContentSummary-info {
    @apply btu-button-gray btu-button-xs absolute bottom-5 right-2 m-0 shrink-0 touch-device:btu-button-sm;
  }
}

/* Image height controls. Hidden on small viewports. Images instead default to 12dvh + 50px */
.SearchResult-imageHeightContainer {
  @apply relative opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:size-toggle];
}

.SearchResult-imageHeightToggle {
  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-gray mx-1 shrink-0 bg-white before:btu-icon before:btu-icon-zoom-in hover:bg-gray-200 hover:outline-gray-500;

  &[aria-expanded='true'] {
    @apply btu-button-pressed bg-primary-50 outline-primary-600 before:btu-icon-x;
  }
}

.SearchResult-imageHeightInput {
  @apply hidden;

  &.is-open {
    @apply absolute -top-px right-12 mb-4 inline-flex w-[240px] items-center justify-center gap-2 justify-self-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-700 before:btu-icon before:btu-icon-minus after:btu-icon after:btu-icon-plus;
  }

  > input[type] {
    @apply w-full;
  }
}

/* "Watching?" checkbox appears on some Search Widgets */
.SearchResult-query {
  @apply mx-1 opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:watching];
}

/* Allows image height controls */
.SearchResult-images {
  &[data-height] {
    --image-height-adjusted: calc(var(--image-height) * 0.25);
    --figure-height: calc(var(--image-height-adjusted) + 125px);

    figure {
      @apply @md/searchResult:h-[var(--figure-height)];

      img {
        @apply @md/searchResult:h-[calc(var(--image-height-adjusted)+55px)];
      }

      &.is-missing {
        @apply @md/searchResult:before:h-[calc(var(--image-height-adjusted)+55px)] @md/searchResult:after:top-[calc((var(--image-height-adjusted)+55px)/2)];
      }
    }
  }
}

.SearchResult-list,
.SearchResult-mixed,
.SearchWidget-result {
  > .LinkList-wrapper {
    @apply mx-4 mb-4 rounded-lg shadow-md;
  }

  > .LinkList-wrapper,
  > .SearchResult-mixed .SearchResult-images {
    @apply btu-scrollshadow-50 before:absolute before:left-4 before:content-[--whitespace] after:absolute after:right-4 after:content-[--whitespace];
  }
}

/* Grid view -> available on Images or Videos content type, among others */
.SearchResult-list {
  > .SearchResult-images {
    --min-figure-width: max(200px, calc(var(--figure-height) * 248 / 238));
    @apply grid gap-4 px-4 pb-4 [grid-template-columns:1fr_1fr] @md/searchResult:grid-cols-[repeat(auto-fill,minmax(var(--min-figure-width),1fr))];

    figure {
      @apply w-full max-md:min-w-0;
    }
  }
}

.SearchResult-mixed {
  @apply relative grid w-full overflow-x-auto [grid-area:results];

  > .LinkList-wrapper {
    @apply before:row-[2/2] after:row-[2/2];
  }

  /* Row of images that appear at top of mixed view */
  > .SearchResult-images {
    /* Differentiates padding & margin to keep drop shadow visible */
    @apply mx-4 mb-4 flex gap-4 pb-2 before:row-[1/1] after:row-[1/1];

    figure {
      @apply aspect-[248/238] w-fit shrink-0;
    }
  }
}

.SearchResult-actions-wrapper {
  @apply contents;

  .SearchResult-actions-toggle {
    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-gray mx-1 bg-white opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:actions] before:btu-icon before:btu-icon-ellipsis hover:bg-gray-200 hover:outline-gray-500;

    &[aria-expanded='true'] {
      @apply btu-button-pressed bg-primary-50 outline-primary-600 before:btu-icon-x;
    }
  }

  .SearchResult-fullscreen {
    @apply btu-button btu-button-text-hidden btu-button-gray me-1 ms-3 overflow-visible bg-white opacity-[var(--controls-opacity,_1)] transition-opacity [grid-area:fullscreen] before:btu-icon before:btu-icon-maximize after:absolute after:right-[43px] after:h-full after:w-px after:bg-gray-200 hover:bg-gray-100;
  }
}

/* Shown when user toggles Summary fiels in "Select Fields" menu */
.SearchResult-summaryField {
  @apply inline text-xs text-gray-500;

  &:not(:first-child) {
    @apply before:mx-2 before:my-1 before:inline-block before:h-[2px] before:w-[2px] before:rounded-full before:bg-gray-500;
  }
}

/* * * * * * * * * * * * * */
/* * RESPONSIVE STYLES * * */
/* * * * * * * * * * * * * */

/* We use container queries to dynamically resize/hide certain search controls. */
.Popup .SearchResult,
.Page-main .SearchResult {
  @apply @container/searchResult;

  @container searchResult (max-width: 610px) {
    .SearchResult-sorts {
      @apply __sorts-collapsed;
    }
  }

  @container searchResult (max-width: 540px) {
    .SearchResult-fields {
      @apply hidden;
    }

    .SearchResult-imageHeightContainer {
      @apply hidden;
    }

    .SearchResult-images[data-height] figure {
      @apply h-[calc(12dvh+50px)];

      img {
        @apply h-[calc(12dvh)];
      }

      &.is-missing {
        @apply before:h-[calc(12dvh)] after:top-[calc(6dvh)];
      }
    }
  }

  @container searchResult (min-width: 550px) {
    .SearchResult-pagination ul.pagination {
      /* Displays pagination if there's at least 1 page of results */
      @apply [&:has(>li>ol>li)]:inline-flex;

      li {
        @apply first:list-item;
      }

      > li {
        @apply [&:nth-child(2)]:border-s;
      }

      li.next {
        @apply border-s;
      }
    }
  }
}

/* SlackAuth Search Result View styling */
.SearchResult:has(.SlackAuthContainer) {
  .SlackAuthContainer {
    @apply ms-1;
  }
}

.SearchResult-items a.icon-null[data-label^='slack'] {
  @apply before:btu-icon-slack;
}

/* Loader overlay for search results (covers the page, dimmed background, centered spinner) */
.searchResult-loader-overlay {
  @apply pointer-events-none fixed inset-0 flex items-center justify-center !bg-gray-900 bg-opacity-30 text-gray-800;
}

.searchResult-loader-spinner {
  @apply btu-loader size-20;
}
