// =============================================================================
// Image Styles
// =============================================================================.

.dm-editor .ProseMirror {
  img {
    // Floated images shouldn't exceed 60% width
    &[style*="float: left"],
    &[style*="float: right"] {
      max-width: 60%;
    }
  }
}

// Resizable image wrapper (NodeView)
.dm-editor .ProseMirror {
  .dm-image-resizable {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 0.75em 0;
    line-height: 0;

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    // Float variants via data attribute
    &[data-float="left"]  { float: left; margin: 0 1em 1em 0; }
    &[data-float="right"] { float: right; margin: 0 0 1em 1em; }
    &[data-float="center"] {
      display: block;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
    }
    &[data-float="left"],
    &[data-float="right"] {
      max-width: 60%;
      z-index: 1; // above inline text so clicks always hit the image, not the paragraph behind
    }

    // Align variants: the picture moves within the measure and the text stays
    // BELOW it, which is the Notion behaviour and the one that survives a page
    // format unchanged. No `float`, so no 60% cap either: nothing has to fit
    // beside it.
    &[data-align] {
      display: block;
      width: fit-content;
    }
    &[data-align="left"] { margin-right: auto; }
    &[data-align="center"] {
      margin-left: auto;
      margin-right: auto;
    }
    &[data-align="right"] { margin-left: auto; }

    // Selected state - accent outline + visible handles
    &.ProseMirror-selectednode {
      outline: 2px solid var(--dm-accent, #2563eb);

      .dm-image-handle {
        display: block;
      }
    }
  }

  // Resize handles - hidden by default, shown on selection
  .dm-image-handle {
    display: none;
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--dm-accent, #2563eb);
    border: 1px solid #fff;
    border-radius: 1px;
    z-index: 5;

    &-nw { top: -4px; left: -4px; cursor: nw-resize; }
    &-ne { top: -4px; right: -4px; cursor: ne-resize; }
    &-sw { bottom: -4px; left: -4px; cursor: sw-resize; }
    &-se { bottom: -4px; right: -4px; cursor: se-resize; }
  }
}

// Notion mode never wraps text beside a picture: the controls on offer there
// are the align set, so a float left over from a classic document renders as
// its aligned equivalent instead of a layout the author can no longer reach.
.dm-editor.dm-notion-mode .ProseMirror .dm-image-resizable {
  &[data-float="left"],
  &[data-float="right"] {
    float: none;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0.75em 0;
  }
  &[data-float="right"] { margin-left: auto; }
}

// Popover mounts to `document.body`, outside the `.dm-editor` cascade where
// `--dm-*` tokens live. Each var() carries a literal fallback so descendants
// render correctly without depending on token cascade.
$bg: var(--dm-bg, #ffffff);
$text: var(--dm-text, #1a1a1a);
$border: var(--dm-border-color, rgba(0, 0, 0, 0.18));
$hover: var(--dm-hover, rgba(0, 0, 0, 0.04));
$accent: var(--dm-accent, #2563eb);
$shadow: var(--dm-popover-shadow, 0 12px 28px -8px rgba(0, 0, 0, 0.22), 0 4px 10px -2px rgba(0, 0, 0, 0.12));

.dm-image-popover {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background: $bg;
  border: 1px solid $border;
  border-radius: 0.375rem;
  box-shadow: $shadow;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s;
  z-index: 60;

  &[data-show] {
    visibility: visible;
    opacity: 1;
  }
}

.dm-image-popover-fields {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dm-image-popover-input,
.dm-image-popover-alt-input {
  min-width: 14rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid $border;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  outline: none;
  background: $bg;
  color: $text;

  &:focus {
    border-color: $accent;
  }
}

.dm-image-popover-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: $text;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;

  &:hover {
    background: $hover;
  }

  &:focus-visible {
    outline: 2px solid $accent;
    outline-offset: 1px;
  }

  svg {
    width: 0.875rem;
    height: 0.875rem;
  }
}

.dm-image-popover-apply:hover,
.dm-image-popover-browse:hover {
  color: $accent;
}

// Drag-and-drop overlay - shown when dragging image files over the editor
.dm-editor.dm-dragover {
  outline: 2px dashed var(--dm-accent);
  outline-offset: -2px;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--dm-accent);
    opacity: 0.05;
    pointer-events: none;
    z-index: 10;
  }
}

// Read-only allows no resize: handles stay hidden even on a selected image.
.ProseMirror[contenteditable='false'] .dm-image-handle {
  display: none !important;
}