/*
  Embed tool — full-width-by-default iframe with Notion-style edge resize
  handles. Mirrors the image tool's handle visuals (shared --blok-handle-*
  tokens) but scoped to [data-blok-tool="embed"].
*/

/* Host-overridable spacing above the embed block (default matches the
   layered `my-2` Tailwind class the tool renders, so default rendering
   is unchanged: 0.5rem = 8px). */
[data-blok-tool="embed"] {
  margin-top: var(--blok-embed-margin-top, 0.5rem);
}

[data-blok-tool="embed"] [data-role="embed-figure"] {
  position: relative;
}

[data-blok-tool="embed"] [data-role="embed-aspect"] {
  overflow: hidden;
  border-radius: var(--blok-radius-md, 8px);
}

[data-blok-tool="embed"] [data-role="embed-aspect"] iframe {
  display: block;
}

/* resize handle visual — Notion-style pill straddling the edge */
[data-blok-tool="embed"] [data-role="resize-handle"] {
  position: absolute;
  top: 50%;
  width: 6px;
  height: clamp(24px, 25%, 50px);
  background: var(--blok-handle-bg-default);
  border: 1px solid var(--blok-handle-fg-default);
  border-radius: var(--blok-radius-pill);
  cursor: ew-resize;
  opacity: 0;
  transform: translateY(-50%) scale(1);
  transform-origin: center;
  transition:
    opacity 120ms ease,
    background-color 120ms ease,
    transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 2;
}
[data-blok-tool="embed"] [data-role="resize-handle"]::before {
  content: '';
  position: absolute;
  inset: -8px -6px;
}
[data-blok-tool="embed"] [data-role="resize-handle"][data-edge="left"]  { left: 8px; }
[data-blok-tool="embed"] [data-role="resize-handle"][data-edge="right"] { right: 8px; }
/* bottom handle (height-resizable document embeds) — same pill, rotated 90° */
[data-blok-tool="embed"] [data-role="resize-handle"][data-edge="bottom"] {
  top: auto;
  bottom: 8px;
  left: 50%;
  width: clamp(24px, 25%, 50px);
  height: 6px;
  cursor: ns-resize;
  transform: translateX(-50%) scale(1);
}
[data-blok-tool="embed"] [data-role="resize-handle"][data-edge="bottom"]:hover,
[data-blok-tool="embed"] [data-role="resize-handle"][data-edge="bottom"]:active {
  transform: translateX(-50%) scale(1.15);
}
[data-blok-tool="embed"] [data-role="embed-figure"]:hover [data-role="resize-handle"],
[data-blok-tool="embed"][data-selected="true"] [data-role="resize-handle"],
[data-blok-tool="embed"][data-settings-open="true"] [data-role="resize-handle"] {
  opacity: 1;
}
[data-blok-tool="embed"] [data-role="resize-handle"]:hover {
  background: var(--blok-handle-bg-hover);
  transform: translateY(-50%) scale(1.15);
}
[data-blok-tool="embed"] [data-role="resize-handle"]:active {
  background: var(--blok-handle-bg-active);
  transform: translateY(-50%) scale(1.15);
  transition-duration: 0s;
}

/* hover toolbar — mirrors the image overlay, scoped to embed */
[data-blok-tool="embed"] .blok-embed-toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  background: var(--blok-overlay-surface);
  border-radius: var(--blok-space-2);
  padding: var(--blok-space-1);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px var(--blok-overlay-ring),
    var(--blok-image-shadow-toolbar);
  z-index: 3;
}
[data-blok-tool="embed"] [data-role="embed-figure"]:hover .blok-embed-toolbar,
[data-blok-tool="embed"][data-selected="true"] .blok-embed-toolbar,
[data-blok-tool="embed"][data-settings-open="true"] .blok-embed-toolbar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
[data-blok-tool="embed"] .blok-embed-toolbar button,
[data-blok-tool="embed"] .blok-embed-toolbar a {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--blok-overlay-fg);
  background: transparent;
  border: 0;
  border-radius: var(--blok-space-1);
  cursor: pointer;
  text-decoration: none;
  transition: background 80ms ease, color 80ms ease;
}
[data-blok-tool="embed"] .blok-embed-toolbar button:hover,
[data-blok-tool="embed"] .blok-embed-toolbar a:hover {
  background: var(--blok-overlay-fg-hover);
  color: var(--blok-overlay-fg-strong);
}
[data-blok-tool="embed"] .blok-embed-toolbar button svg,
[data-blok-tool="embed"] .blok-embed-toolbar a svg {
  width: 14px;
  height: 14px;
}
[data-blok-tool="embed"] .blok-embed-toolbar button[aria-pressed="true"],
[data-blok-tool="embed"] .blok-embed-toolbar button[aria-expanded="true"] {
  background: var(--blok-overlay-fg-pressed);
  color: var(--blok-overlay-fg-strong);
}
[data-blok-tool="embed"] .blok-embed-toolbar__divider {
  width: 1px;
  align-self: stretch;
  margin: var(--blok-space-1) var(--blok-space-0-5);
  background: var(--blok-overlay-divider);
}

/* alignment popover — solid dark surface below the trigger. The "more" button
   opens the shared block-tunes popover, so it needs no bespoke menu styling. */
[data-blok-tool="embed"] .blok-embed-toolbar__align {
  position: relative;
}
[data-blok-tool="embed"] .blok-embed-toolbar__align-popover[hidden] {
  display: none;
}
[data-blok-tool="embed"] .blok-embed-toolbar__align-popover {
  position: absolute;
  top: calc(100% + var(--blok-space-1));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: var(--blok-space-0-5);
  padding: var(--blok-space-1);
  background: var(--blok-overlay-surface);
  border-radius: var(--blok-space-2);
  box-shadow:
    inset 0 0 0 1px var(--blok-overlay-ring),
    var(--blok-image-shadow-toolbar);
  z-index: 4;
}

/* ----- Empty state: hero card with a URL pill ----- */
.blok-embed-empty {
  font-family: var(--blok-font-family, var(--blok-font-sans));
}

.blok-embed-empty__form {
  width: 100%;
  container-type: inline-size;
}

.blok-embed-empty__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--blok-space-2);
  width: 100%;
  padding: var(--blok-space-1) var(--blok-space-1) var(--blok-space-1) var(--blok-space-3);
  background: var(--blok-bg-primary);
  border: 1px solid var(--blok-border-subtle);
  border-radius: var(--blok-space-2-5);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.blok-embed-empty__bar:hover { border-color: var(--blok-border-primary); }
.blok-embed-empty__bar:has(input:focus) {
  border-color: var(--blok-color-accent);
}

.blok-embed-empty__bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blok-text-tertiary);
  transition: color .15s ease;
}
.blok-embed-empty__bar-icon svg { width: 16px; height: 16px; }
.blok-embed-empty__bar:has(input:focus) .blok-embed-empty__bar-icon,
.blok-embed-empty__bar[data-valid="true"] .blok-embed-empty__bar-icon {
  color: var(--blok-color-accent);
}

.blok-embed-empty__input {
  appearance: none;
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  padding: var(--blok-space-1-5) var(--blok-space-0, 0);
  border: 0;
  background: transparent;
  color: var(--blok-text-primary);
  outline: none;
}
.blok-embed-empty__input::placeholder { color: var(--blok-text-tertiary); }

.blok-embed-empty__submit {
  appearance: none;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: var(--blok-space-1-75) var(--blok-space-3);
  color: var(--blok-text-secondary);
  background: transparent;
  border: 1px solid var(--blok-border-subtle);
  border-radius: var(--blok-space-1-75);
  transition: color .15s ease, background .15s ease, border-color .15s ease, filter .15s ease, transform .08s ease;
}
.blok-embed-empty__submit:hover {
  color: var(--blok-text-secondary);
  background: var(--blok-bg-secondary);
  border-color: var(--blok-border-primary);
}
.blok-embed-empty__bar[data-valid="true"] .blok-embed-empty__submit {
  color: var(--blok-image-embed-submit-fg);
  background: var(--blok-color-accent);
  border-color: transparent;
}
.blok-embed-empty__bar[data-valid="true"] .blok-embed-empty__submit:hover { filter: brightness(1.05); }
.blok-embed-empty__submit:active { transform: translateY(1px); }
.blok-embed-empty__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blok-color-accent) 45%, transparent);
}

.blok-embed-empty__submit-label {
  display: inline-flex;
  align-items: center;
  height: 16px;
}
.blok-embed-empty__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  max-width: 0;
  margin-left: 0;
  padding: var(--blok-space-0-25) var(--blok-space-0, 0) var(--blok-space-0, 0);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: currentColor;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--blok-space-1);
  overflow: hidden;
  opacity: 0;
  transform: translateX(-4px);
  transition: max-width .2s ease, margin-left .2s ease, padding .2s ease, opacity .15s ease .05s, transform .2s ease;
}
.blok-embed-empty__bar[data-valid="true"] .blok-embed-empty__kbd {
  max-width: 40px;
  margin-left: var(--blok-space-1-5);
  padding: var(--blok-space-0-25) var(--blok-space-1) var(--blok-space-0, 0);
  opacity: 1;
  transform: translateX(0);
}

/* error line under the pill */
.blok-embed-empty [data-role="embed-url-error"] {
  margin-top: var(--blok-space-2);
  font-size: 12.5px;
  color: var(--blok-color-danger);
}

/* read-only: quiet inline placeholder */
.blok-embed-empty--readonly { display: flex; }
.blok-embed-empty__readonly {
  display: inline-flex;
  align-items: center;
  gap: var(--blok-space-2);
  padding: var(--blok-space-2-5) var(--blok-space-3);
  font-size: 13px;
  /* Same tier correction as .blok-embed-linkcard__url — this is the only text
     a read-only viewer gets for a missing embed. */
  color: var(--blok-text-secondary);
  background: var(--blok-bg-secondary);
  border: 1px solid var(--blok-border-subtle);
  border-radius: var(--blok-radius-md);
}
.blok-embed-empty__readonly-glyph {
  display: inline-flex;
  color: var(--blok-text-tertiary);
}
.blok-embed-empty__readonly-glyph svg { width: 16px; height: 16px; }

@container (max-width: 360px) {
  .blok-embed-empty__submit-label { display: none; }
  .blok-embed-empty__submit { padding: var(--blok-space-1-75) var(--blok-space-2); }
}

/* caption — editable line under the embed */
[data-blok-tool="embed"] [data-role="embed-caption"] {
  margin-top: var(--blok-space-2);
  outline: none;
  text-align: left;
  color: var(--blok-text-secondary, inherit);
  font-size: var(--blok-embed-caption-font-size, 0.875em);
}
[data-blok-tool="embed"] [data-role="embed-caption"]:empty::before {
  content: attr(data-placeholder);
  color: var(--blok-text-tertiary, #9b9a97);
  pointer-events: none;
}

/* Link card — safe fallback for generic embeds the host hasn't allowed to be
   framed. Mirrors the empty-state bar's visual language. */
.blok-embed-linkcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--blok-space-2);
  width: 100%;
  font-family: var(--blok-font-family, var(--blok-font-sans));
  background: var(--blok-bg-primary);
  border: 1px solid var(--blok-border-subtle);
  border-radius: var(--blok-space-2-5);
  transition: border-color .15s ease;
}
.blok-embed-linkcard:hover { border-color: var(--blok-border-primary); }

.blok-embed-linkcard__anchor {
  display: flex;
  align-items: center;
  gap: var(--blok-space-2);
  flex: 1;
  min-width: 0;
  padding: var(--blok-space-2) var(--blok-space-3);
  font-size: 13px;
  line-height: 20px;
  color: var(--blok-text-primary);
  text-decoration: none;
}

.blok-embed-linkcard__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blok-text-tertiary);
}
.blok-embed-linkcard__glyph svg { width: 16px; height: 16px; }

.blok-embed-linkcard__host {
  flex-shrink: 0;
  font-weight: 500;
}

.blok-embed-linkcard__url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Secondary, not tertiary: --blok-text-tertiary measures 2.53:1 light /
     3.29:1 dark and is a decorative tier (glyphs, disabled chrome). This is
     body text. */
  color: var(--blok-text-secondary);
}

.blok-embed-linkcard__open {
  flex-shrink: 0;
  color: var(--blok-text-secondary);
}
.blok-embed-linkcard__anchor:hover .blok-embed-linkcard__open {
  color: var(--blok-color-accent);
}

.blok-embed-linkcard__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--blok-space-0-5);
  padding-right: var(--blok-space-1);
  opacity: 0;
  transition: opacity .15s ease;
}
.blok-embed-linkcard:hover .blok-embed-linkcard__actions,
.blok-embed-linkcard:has(:focus-visible) .blok-embed-linkcard__actions {
  opacity: 1;
}

.blok-embed-linkcard__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--blok-space-1-5);
  background: transparent;
  color: var(--blok-text-tertiary);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.blok-embed-linkcard__action:hover {
  background: var(--blok-bg-secondary);
  color: var(--blok-text-primary);
}
.blok-embed-linkcard__action svg { width: 16px; height: 16px; }