/* Global search popup styles */
.Popup.is-noGap:has(.SearchWidget.is-global) {
  @apply h-[100cqh];

  .Popup-close {
    @apply fixed right-4 top-4 z-[11] max-md:shadow-lg;
  }
}

/* Styles of Search popup frame as soon as it hits the DOM. */
.Popup.is-noGap[name='miscSearch'] {
  > .Popup-content > h1 {
    @apply !hidden;
  }

  /* Keep the close button hidden in parity with the other controls */
  &:has(.SearchResult-sorts) {
    .Popup-close {
      @apply opacity-0;
    }

    &:has(.SearchResult-sorts .ComboInput-selected) {
      .Popup-close {
        @apply opacity-100;
      }
    }
  }
}

/* Hide the close button while global search is opening */
.Page.is-searchOpening .Popup[name='miscSearch'] .Popup-close {
  @apply hidden;
}

/* "Fullscreen" search */
.SearchWidget:not(.frame) .SearchWidget-title {
  @apply btu-heading-4 border-b border-b-gray-200 bg-white px-4 py-[18px] text-gray-900 [grid-area:title];
}

/*
  SearchWidget handles overall layout of search widget, including all search filters & widgets
  (e.g. Recent Searches, Saved Searches). Also styles the Create section, search title, and
  search query input, when available.
*/
.SearchWidget {
  --filters-w: 264px;
  --popup-close-w: 0px;

  @apply relative grid h-full w-full cursor-default grid-cols-[var(--filters-w)_minmax(0px,1fr)] grid-rows-[auto_auto_auto_minmax(0px,1fr)_auto_auto] bg-gray-50 transition-all duration-[theme(animationDuration.quick)] [grid-template-areas:'title_title''filters_newTitle''filters_newResults''filters_results''history_results''create_results'] [transition-timing-function:theme(transitionTimingFunction[spring-stiff])];

  &.is-global {
    --popup-close-w: 56px;

    .SearchWidget-title,
    .SearchWidget-query {
      @apply hidden;
    }
  }

  &.filters-collapsed--v5 {
    --filters-w: 0px;
    @apply overflow-clip;

    .SearchWidget-controls,
    .SearchWidget-history,
    .SearchWidget-create {
      @apply opacity-0;
    }
  }
}

/* Search filters */
.SearchWidget-controls {
  @apply grid auto-rows-min grid-cols-[minmax(0px,1fr)_auto_auto] items-start gap-2 overflow-y-auto overflow-x-clip border-e border-e-gray-200 bg-white px-4 py-2 transition-opacity duration-100 ease-in [grid-area:filters];

  /* Gear icon next to "Global filters" and content-specific filters */
  a.SearchWidget-actionsToggle {
    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray col-start-3 row-start-1 before:btu-icon before:btu-icon-settings;
  }

  form {
    @apply contents;
  }

  .SearchWidget-filter,
  .SearchWidget-type {
    .ComboInput {
      @apply col-span-full w-full truncate;
    }
  }

  /* "Global Filters" heading */
  .globalHeading {
    @apply -order-1 col-start-1 row-start-1 inline-block py-2 text-sm font-semibold text-gray-900;
  }

  .SearchWidget-reset {
    @apply btu-button btu-button-fill-none btu-button-error col-start-2 row-start-1;
  }

  .ExternalItemAuthLink {
    @apply col-span-full text-sm;
  }
}

/*
  The input field that appears above filters in certain search views (Fullscreen search,
  ContentSelector search, for example).
*/
.SearchWidget-query {
  @apply relative col-span-full row-start-2 mb-2 after:absolute after:-left-4 after:-right-4 after:top-[46px] after:h-px after:bg-gray-200;
}

.typeSpecificHeading,
.miscHeading {
  @apply inline-block py-2 text-sm font-semibold text-gray-900;
}

.typeSpecificHeading {
  @apply col-span-2;
}

.SearchWidget-moreFilters + .miscHeading {
  @apply relative col-span-full pt-4 before:absolute before:-left-4 before:-right-4 before:top-0 before:h-px before:bg-gray-200;
}

.SearchWidget-filter {
  @apply col-span-full w-full;

  &.is-advanced {
    @apply relative order-1;

    textarea {
      @apply pe-[calc(var(--icon-size)_+_1rem)] [field-sizing:content];
    }

    a {
      @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray absolute right-2 top-px text-gray-700 btu-button-container-none before:btu-icon before:btu-icon-pen;
    }
  }

  &.is-date {
    @apply flex flex-col;

    .SearchWidget-dateRange {
      @apply flex flex-col gap-2 ps-4 [&:not(:empty)]:mt-2;
    }

    .SearchWidget-dateRanges,
    .SearchWidget-customDate {
      @apply contents;
    }

    .DateTimeInput {
      @apply w-full justify-between;
    }
  }

  &.is-multiple {
    @apply relative flex flex-col gap-2 before:absolute before:bottom-0 before:left-0 before:top-12 before:w-[2px] before:bg-gray-300;

    .SearchWidget-filterItem {
      @apply w-full;

      &:not(:last-of-type) {
        @apply order-1 ms-4 w-auto;

        .ComboInput {
          @apply pointer-events-none;
        }

        .ContentSelector-clear {
          @apply before:btu-icon-x after:hidden;
        }

        .ComboInput-icon,
        .ContentSummary-info,
        input[data-previewable='false'] + .ContentSelector-search {
          @apply hidden;
        }
      }
    }

    &.is-missing .SearchWidget-filterItem:not(:last-of-type) {
      @apply pointer-events-none opacity-60;
    }
  }

  > .Checkbox {
    @apply hidden;
  }
}

.SearchWidget-filterItem {
  @apply flex items-center gap-2;

  &:has(.ContentSelector-search) {
    @apply gap-0 rounded-lg border border-gray-300;
  }

  &.toolEntityDropdown-container {
    @apply rounded-none border-0;
  }

  input[data-previewable='false'] + .ContentSelector-search,
  .ContentSelector-clear {
    @apply shrink-0;
  }
}

/* Content-specific filters */
.searchFiltersLocal {
  @apply relative order-1 col-span-full grid auto-rows-min grid-cols-subgrid gap-2 pt-2;

  &:not(:empty) {
    @apply before:absolute before:-left-4 before:-right-4 before:top-0 before:h-px before:bg-gray-200;

    .SearchWidget-actionsToggle {
      @apply row-start-1;
    }
  }
}

btu-widget.SearchWidget-moreFilters {
  @apply col-span-full;

  /* Override styles in Widget.css to prevent focus ring from being cut off */
  &.is-collapsed {
    @apply overflow-x-visible;
  }

  .Widget-title {
    @apply contents;

    .Widget-expand {
      @apply btu-button btu-button-fill-none btu-button-primary order-1 my-2 justify-between overflow-x-clip border border-primary-600/0 !py-2 px-4 btu-button-container-none [grid-column:fullbleed-start/fullbleed-end] focus:ring-offset-0 focus-visible:ring-offset-4 after:btu-icon after:btu-icon-chevron-up after:transition-transform after:duration-250 after:ease-linear focus:ring-0 focus-visible:border-primary-600/100 focus-visible:border-opacity-100 focus-visible:ring-offset-primary-100;

      .Widget-controls {
        @apply hidden;

        .Widget-collapse {
          @apply contents before:text-inherit;
        }
      }
    }
  }

  &.is-collapsed {
    .Widget-title {
      .Widget-expand {
        @apply after:rotate-180;
      }
    }
  }

  div:not([class]) {
    @apply mb-2 flex flex-col gap-2;
  }
}

.SearchWidget-history {
  @apply border-e border-e-gray-200 transition-opacity duration-100 ease-in [grid-area:history];
}

btu-widget.SearchWidget-recent,
btu-widget.SearchWidget-saved,
btu-widget.SearchWidget-create {
  .Widget-title {
    @apply border-b-0 border-t border-t-gray-200;
  }

  .Widget-expand {
    @apply btu-heading-6 text-gray-900;

    .Widget-controls {
      @apply bg-transparent p-0;
    }

    .Widget-collapse {
      @apply bg-transparent;
    }
  }

  > .frame > .Message {
    @apply mb-4 mt-2 rounded-lg border-b-0;
  }

  ul.LinkTable {
    @apply pb-4 pt-2;

    > li:has(> .SavedSearches-links) {
      @apply gap-2 px-2;
    }

    > li:has(> .SavedSearches-links > a:focus-visible) {
      @apply ring-primary-100 ring-offset-1 z-[1] ring-4 ring-offset-primary-600 [&_a]:ring-offset-0 [&_a]:ring-0;
    }
  }
}

.SavedSearches-links {
  @apply contents;

  > a {
    @apply my-2 grow text-sm font-medium text-gray-900 no-underline;
  }
}

.SavedSearches-more {
  @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-ellipsis-vertical touch-device:btu-button-sm;

  &.is-active {
    @apply btu-button-pressed btu-button-primary before:btu-icon-x;
  }
}

.SavedSearches-more-dropdown {
  @apply Dropdown;

  .SavedSearches-more-dropdown-copy {
    &.is-copied {
      @apply pointer-events-none italic opacity-50;
    }

    & + textarea {
      @apply hidden;
    }
  }

  &.is-open {
    @apply Dropdown-is-open;
  }

  [role='menuitem'] {
    @apply Dropdown-item inline-flex;

    &.SavedSearches-more-dropdown-delete {
      @apply text-error-700;
    }
  }
}

/* Create button, which can appear with our without ComboInput */
.SearchWidget-create {
  @apply border-e transition-opacity duration-100 ease-in [grid-area:create];

  form {
    @apply flex gap-2 pb-4 pt-2;
  }

  .ComboInput {
    @apply overflow-hidden;
  }

  .action-create {
    @apply btu-button btu-button-outline btu-button-gray !w-full bg-white before:btu-icon before:btu-icon-plus hover:border-gray-500 hover:bg-gray-100;
  }

  .ComboInput + .action-create {
    @apply btu-button-text-hidden !w-auto shrink-0;
  }
}

.SavedSearches-pagination {
  @apply flex justify-end py-2 [&:has(.previous:empty)]:[&:has(.next:empty)]:hidden;
}

.SearchWidget-result {
  :not(.Widget.is-associatedContentWidget, .QueryField-searchForm) > & {
    @apply contents;
  }

  /* Display a loading spinner while waiting for SearchResult frame to load */
  &.loading {
    &::after {
      @apply btu-loader visible absolute left-1/2 top-1/2 z-[1] blokk size-[--loader-size] [grid-area:results];
    }
  }

  /* "New" heading and table that appear in contextual search after creating a new item */
  > h2 {
    @apply m-4 text-sm font-semibold text-gray-900 [grid-area:newTitle];
  }

  > .LinkList-wrapper {
    @apply [grid-area:newResults] before:[grid-area:newResults] after:[grid-area:newResults];
  }

  > .objectIdResult,
  > .LinkList-wrapper + div {
    @apply hidden;
  }

  > .DariError {
    @apply mt-[68px] overflow-auto [grid-area:results];
  }

  > .ExternalItemAuthLink {
    @apply [grid-area:results];
  }
}

.DashboardWidget-filters {
  .SearchWidget-filter {
    &:has(.ContentSelector-search) {
      @apply flex items-center rounded-lg border border-gray-300;
    }

    .ContentSelector-select + .ComboInput {
      @apply w-auto max-w-full;
    }
  }
}

/* Conditionally appears for fields such as "Publish User: Select" */
.toolEntityDropdown-container {
  @apply w-full ps-4 [&:not(:empty)]:mt-2;
}

.SearchWidget-toolEntityDropdown {
  @apply contents;
}

/* Search views without Saved Searches support */
.AssignmentDeskDashboard,
.Popup.is-fromRight[data-popup-source-class~='ContentSelector-search'],
.SearchWidget.DashboardWidget {
  .SearchWidget-saved {
    @apply hidden;
  }
}

/* Legacy. */
.searchForm,
.searchControls {
  @apply contents;
}

.searchMissing {
  @apply hidden;
}
