.QueryField-frame {
  @apply contents;
}

.QueryField-frame .QueryField-searchForm {
  @apply grid grid-cols-[auto] overflow-auto [grid-template-areas:'controls'_'results'] md:grid-cols-[auto_1fr] md:overflow-hidden md:[grid-template-areas:'controls_results'];
}

.QueryField-frame .QueryField-searchControls {
  @apply flex overflow-visible [grid-area:controls] md:overflow-auto;
}

.QueryField-frame .SearchWidget-controls {
  @apply w-full pb-4;
}

.QueryField-frame .SearchWidget-history {
  @apply hidden;
}

.QueryField-frame .SearchWidget-reset {
  @apply pointer-events-none !text-gray-400;
}

.QueryField-frame .SearchWidget-result {
  @apply grid bg-gray-50 [contain:unset] [grid-area:results] [grid-template-areas:'sorts'_'results'_'pagination'] [grid-template-rows:auto_1fr_auto] after:z-0 after:h-full after:w-full after:border-t after:border-gray-200 after:bg-gray-50 after:[grid-area:pagination] md:[contain:size] md:[grid-column:2];
}

.QueryField-frame .SearchWidget-result > h2 {
  @apply hidden;
}

.QueryField-frame .SearchResult-sorts {
  @apply m-0 px-6 pt-6;
}

.QueryField-frame .SearchResult-pagination {
  @apply mx-6 my-[1.375rem];
}

.QueryField-frame .SearchResult-items {
  @apply m-6 mb-0 blokk max-h-fit overflow-auto rounded-t-lg shadow-sm;
}

/* Has a "No Matching Items" message */
.QueryField-frame .SearchResult-items:has(> .Message) {
  @apply shadow-none;
}

.QueryField-frame .SearchResult-images {
  @apply flex gap-4 overflow-x-auto border-b border-gray-200 bg-white px-6 py-4;
}

.QueryField-frame .SearchResult-images > figure {
  @apply flex-none;
}

.QueryField-queryString {
  @apply hidden;
}

.QueryField-toggle {
  @apply flex w-fit items-start rounded-lg bg-gray-100 focus:ring-primary-100 hover:cursor-pointer focus:border focus:border-primary-600;
}

.QueryField-toggle .QueryField-label {
  @apply me-auto py-[0.625rem] ps-4 text-sm text-gray-500;
}

.QueryField-toggle .QueryField-icon {
  @apply btu-button px-4 py-[0.625rem] before:btu-icon before:btu-icon-pencil;
}

/* Query field Popup is hidden by default */
.QueryField-frame > .Popup:not(.is-visible) {
  @apply hidden;
}
