.PreviewFrame {
  @apply grid size-full [grid-template:"title"_auto_"banner"_auto_"controls"_min-content_"content"_1fr];
}

.PreviewFrame-types {
  @apply [grid-area:controls];
}

.PreviewFrame-typeFrame {
  @apply contents;
}

.PreviewFrame-moreActions {
  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray ms-2 before:btu-icon before:btu-icon-sliders-horizontal;
}

.PreviewFrame-moreActions[aria-expanded] {
  @apply btu-button-pressed before:btu-icon-x;
}

.PreviewFrame-typeActions {
  @apply flex items-center gap-2;

  .action-share {
    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray ms-2 before:btu-icon before:btu-icon-external-link;
  }

  .action-refresh {
    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-refresh-cw;
  }
}

.PreviewFrame-typeDisplay {
  @apply relative grid size-full overflow-clip rounded-2xl border border-gray-200 bg-white [grid-area:content] after:btu-loader before:absolute before:inset-0 before:z-[1] before:bg-white before:opacity-100 before:transition-all before:[transition-behavior:allow-discrete] after:absolute after:left-[50%] after:top-[50%] after:z-[2] after:size-[--iconSize-l] after:translate-x-[-50%] after:translate-y-[-50%];
}

.PreviewFrame-typeDisplay > iframe[name*='PreviewFrame'] {
  @apply inset-0 z-10 size-full;
}

.PreviewFrame-previewToEditToggle {
  @apply me-auto mt-4 flex whitespace-nowrap;

  & input {
    @apply Checkbox-toggle;
  }
}

.PreviewFrame:has(.PreviewFrame-previewToEditToggle input:not(:checked))
  .Preview-overlayFrame {
  @apply hidden;
}

/*
  Matches the state of preview iframe when it is loaded and hides the loading indicator/ui
*/
.PreviewFrame-typeDisplay:not(:has(iframe[name='PreviewFrame-preview'])) {
  @apply before:hidden before:opacity-0 before:transition-all before:duration-[2000ms] after:hidden;
}
