.htmlEmbedNodeView {
  position: relative;
}

/* The container the raw source is injected into. */
.htmlEmbedContent {
  width: 100%;
}

/* Edit affordance overlay, only shown while editing the document. */
.htmlEmbedToolbar {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.htmlEmbedNodeView:hover .htmlEmbedToolbar {
  opacity: 1;
}

/* Placeholder card shown when the source is empty (edit mode only). */
.htmlEmbedPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px dashed var(--mantine-color-gray-4);
  border-radius: 8px;
  color: var(--mantine-color-dimmed);

  @mixin dark {
    border-color: var(--mantine-color-dark-3);
  }
}

.htmlEmbedSelected {
  outline: 2px solid var(--mantine-color-blue-5);
  border-radius: 8px;
}