.ContentSummary-popup {
  /* By default Popup should take up the whole viewport. */
  @apply overscroll-contain max-md:!max-h-[calc(100dvh_-_var(--Page-headerBottom)_*2)];

  &.is-preview {
    /* Preview is at least 360px wide */
    @apply [--preview-min-w:calc(360px_+_theme(gap.4))] before:hidden;
    .ContentSummary {
      @apply grid [grid-template:_'header'_auto_'content'_max-content_'preview'_100dvh_/_100%];
    }
  }

  .ContentSummary {
    @apply border-t;
  }

  .Widget-title {
    @apply justify-end;
  }

  .Widget-title span {
    @apply me-auto;
  }

  .ContentSummary-row {
    @apply gap-2;
  }
}

.ContentSummary-edit,
.ContentSummary-share {
  @apply btu-button btu-button-fill-none btu-button-gray gap-0 p-2 [--button-font-size:0];
}

.ContentSummary-edit {
  @apply before:btu-icon before:btu-icon-pen;
}

.ContentSummary-share {
  @apply order-2 before:btu-icon before:btu-icon-external-link;
}

.ContentSummary-popup .Popup-content {
  > .Widget-title {
    @apply overflow-x-visible;

    & > span {
      @apply truncate;
    }
  }
}

.ContentSummary-row {
  @apply mb-4 flex flex-col;

  &:last-child {
    @apply m-0;
  }
}

.ContentSummary-subtitle {
  @apply relative min-w-[7.5rem] max-w-[7.5rem] text-sm font-medium text-gray-500;

  span {
    @apply ml-[--gap-s] before:[--tw-content:'('] after:[--tw-content:')'];
  }
}

.ContentSummary-description {
  @apply relative text-sm text-gray-700;
}

.ContentSummary-richText {
  @apply inline;
}

.ContentSummary.is-open {
  @apply Dropdown-is-open col-span-full p-0;

  &.error-summary {
    @apply min-w-fit;
  }
}

.ContentSummary-content {
  @apply max-h-[70vh] overflow-auto p-6 text-gray-700 [grid-area:content];
}

.ContentSummary-title {
  @apply mb-6;
  a {
    @apply no-underline;
  }
}

.ContentSummary-titleInfo {
  @apply text-gray-500;

  span {
    @apply text-sm;

    &:first-child {
      @apply mr-[--gap-s];
    }
  }
}

.ContentSummary-info {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs opacity-0 before:btu-icon before:btu-icon-info focus:opacity-100 touch-device:opacity-100;
}

.ContentSummary-link {
  @apply relative;
}

.RCS-item,
.RCIG-item,
.Sortable-item,
.LinkCarousel-item:hover,
.LinkCarousel-item:focus-within,
.LinkTable-main:focus-within,
.LinkTable-main:hover,
.LinkList-main:focus-within,
.LinkList-main:hover,
.ContentSummary-content:hover,
.ContentSummary-link:hover,
.AskAi-references li:hover {
  .ContentSummary-info {
    @apply opacity-100;
  }
}

a.is-active + .ContentSummary-info {
  @apply opacity-100;
}

.ContentSummary-preview {
  @apply bg-gray-100 p-1 [grid-area:preview];
}

@scope (.ContentSummary-preview) {
  & .PreviewFrame {
    @apply blokk;
  }

  & .PreviewFrame-typeControlsContainer,
  .PreviewFrame-types {
    @apply hidden;
  }
}

@media (min-width: theme(screens.sm)) {
  .ContentSummary-popup.is-preview .ContentSummary {
    @apply [grid-template:'header_header'_auto_'content_preview'_1fr_/_minmax(270px,.70fr)_minmax(var(--preview-min-w),1fr);];
  }
  .ContentSummary-edit,
  .ContentSummary-share {
    @apply gap-2 px-3.5 py-2 [--button-font-size:theme(fontSize.sm.0)];
  }
}

@media (min-width: theme(screens.md)) {
  .ContentSummary-preview {
    @apply p-4;
  }
}

@media (min-width: theme(screens.lg)) {
  .ContentSummary-popup:not(.is-preview) {
    @apply [--popup-w:40cqw];
  }

  .ContentSummary-row {
    @apply flex-row;
  }
}
