.Widget.is-associatedContentWidget {
  @apply m-4 overflow-clip rounded-lg border border-gray-200 shadow-md;
}

.AssociatedContent {
  @apply @container/associated-content;
}

.AssociatedContent-carousel {
  @apply mb-2 mt-6;

  .LinkCarousel {
    @apply pb-4;
  }
}

/* When the carousel is present, the controls should display a divider line between and gap accordingly.  */
.AssociatedContent-carousel + .AssociatedContent-controls {
  @apply relative mt-2 pt-6 before:absolute before:left-[calc(theme(spacing.6)_*_-1)] before:top-0 before:h-[1px] before:w-[calc(2_*_theme(spacing.6)_+_100%)] before:bg-gray-200;
}

.AssociatedContent-controls {
  /* At large enough breakpoints search, sorts, and refresh appear in the same row */
  @apply mb-2 mt-6 grid grid-cols-[1fr_auto] items-center [grid-column-gap:theme(spacing.2)] [grid-row-gap:theme(spacing.4)] @[570px]:grid-cols-[1fr_auto_auto];
}

.AssociatedContent-controls .SearchInput {
  @apply min-w-[25%] @[570px]:max-w-[30cqi];
}

.AssociatedContent-sorts {
  @apply col-span-full @[570px]:[grid-column:2];
}

.AssociatedContent-filters,
.AssociatedContent-sorts {
  @apply flex items-center;
}

.AssociatedContent-filters {
  @apply gap-2 overflow-auto overflow-y-hidden pb-4 [grid-column:1/-1] [grid-row:3] @[570px]:[grid-row:2];
}

.AssociatedContent-refresh {
  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray btu-button-sm [grid-column:2] [grid-row:1] before:btu-icon before:btu-icon-refresh-cw @[570px]:[grid-column:3];
}

/* Don't show these elements in this context. */
.AssociatedContent-results {
  :is(
      .SearchWidget-controlsToggle,
      .SearchResult-fields,
      .SearchResult-limit,
      .SearchResult-sorts,
      .SearchResult-actions-wrapper
    ) {
    @apply hidden;
  }

  .SearchResult-views {
    --controls-opacity: 1;
  }
}

/* SearchWidget's CSS grid shouldn't be used in this context */
.Widget.is-associatedContentWidget .SearchWidget-result {
  @apply [grid-area:unset] [grid-column:content-start/content-end];
}
