.SharePreview,
.ViewMirror {
  @apply grid h-[100dvh] w-[100vw] bg-gray-50 [grid-template:"title_title"_auto_"type_controls"_auto_"content_content"_1fr_/_auto_1fr];
}

.SharePreview-title,
.ViewMirror-title {
  @apply flex items-center justify-between border-b border-gray-200 bg-gray-50 px-6 py-[0.38rem] text-sm font-medium [grid-area:title];
  a {
    @apply text-black;
  }
}

.SharePreview-info {
  @apply grow truncate;
}

.SharePreview-content,
.ViewMirror-content {
  @apply contents;
}

.SharePreviewExpiration {
  @apply flex items-center gap-2;
}

@scope (.SharePreview, .ViewMirror) {
  & .PreviewFrame,
  .PreviewFrame-typeFrame,
  .PreviewFrame-typeControlsContainer,
  .PreviewFrame-typeControlsContainer > form {
    @apply contents;
  }

  & .PreviewFrame-types {
    @apply border-b bg-white py-4 pe-2 ps-6 [grid-area:type];
  }

  /* When there's no preview type options, have the other controls span both columns */
  &
    .PreviewFrame-types[style*='display: none']
    + .PreviewFrame-typeFrame
    .PreviewFrame-iFrameControlsForm {
    @apply col-span-full ps-6;
  }

  & .PreviewFrame-typeDisplay {
    @apply relative m-4 mt-2 grid [grid-area:content] [grid:subgrid/subgrid];

    iframe {
      @apply col-span-full;
    }
  }

  & .PreviewFrame-iFrameControlsForm {
    @apply flex flex-wrap gap-2 border-b border-b-gray-200 bg-white py-4 pe-6 [grid-area:controls];
  }

  & .PreviewFrame-typeControls,
  & .PreviewFrame-moreActions {
    @apply hidden;
  }

  & .PreviewFrame-typeControls:has(select) {
    @apply flex items-center gap-2;
  }

  & .ComboInput {
    @apply max-w-[25dvw];
  }
}
