/* Block media embeds (YouTube, Vimeo, etc.).
 *
 * Each provider's partial emits a figure with the shared `.attachment--embed`
 * class plus a provider-specific class (e.g. `.attachment--youtube`). All
 * styling here keys off the shared class; provider-specific tweaks would
 * live in a sibling file (`vimeo.css`, etc.) keyed off the provider class.
 *
 * Rendered in two surfaces, both of which have a `.lexxy-content` ancestor:
 *   - Public posts: Action Text wraps rendered rich text in `.lexxy-content`
 *     (see app/views/layouts/action_text/contents/_content.html.erb).
 *   - The Lexxy editor: Lexxy::TagHelper#lexxy_rich_textarea_tag sets
 *     class="lexxy-content" on the <lexxy-editor> element itself.
 *
 * Shared rules sit at the top; editor-only adjustments (chrome we don't
 * want bleeding into rendered posts) are scoped under `lexxy-editor`. */


/* ─── Shared (editor + public) ──────────────────────────────────────── */

.lexxy-content .attachment--embed {
  position: relative;
  /* No explicit bottom margin: the figure is a block sibling of the
   * surrounding paragraphs, so the existing paragraph rhythm
   * (`.lexxy-content > * + *` on public, default <p> margins in the
   * editor) provides the gap. Adding margin here would stack on top
   * of the trailing empty paragraph Lexical leaves for the cursor. */
  margin: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
}

.lexxy-content .attachment--embed iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* Lexxy's mention-pill default `p:has(.attachment) { text-align: center }`
 * would still apply if Lexical's transform race leaves the embed briefly
 * wrapped in a paragraph (or for embeds saved before the isInline override
 * existed). Keep adjacent/in-paragraph text left-aligned defensively. */
.lexxy-content p:has(.attachment--embed),
.lexxy-content .attachment--embed {
  text-align: start;
}


/* ─── Editor only ───────────────────────────────────────────────────── */

/* Lexxy's vnd.actiontext rules style custom attachments as inline pills
 * (display: inline-flex). Force block layout for our wide-format embeds
 * and establish a positioning context for the delete button. */
lexxy-editor action-text-attachment[data-lexxy-decorator]:has(.attachment--embed) {
  display: block;
  position: relative;
}

/* Position the delete button inside the top-right of the embed; Lexxy's
 * default sits it at the left, designed for inline pills. */
lexxy-editor action-text-attachment[data-lexxy-decorator]:has(.attachment--embed) lexxy-node-delete-button {
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  inset-inline-start: auto;
}

/* The iframe fills the whole figure, so clicks land on the iframe and
 * never reach the wrapper to set node--selected. Reveal the delete
 * button on hover instead. */
lexxy-editor action-text-attachment[data-lexxy-decorator]:has(.attachment--embed):hover lexxy-node-delete-button {
  opacity: 1;
  pointer-events: auto;
}

/* Lexxy draws a focus-ring outline on any selected node and only removes
 * it for content-type^="application/vnd.actiontext" attachments. That
 * outline can land before our wrapper has been canonicalized to that
 * content-type, so reset it via the stable figure class. */
lexxy-editor action-text-attachment.node--selected:has(.attachment--embed) {
  outline: none;
}