/* ブログ記事投稿エディター専用スタイル */
[data-controller~="user--posts--block-editor"] [data-user--posts--block-editor-target="editor"] {
  cursor: text;
}

[data-controller~="user--posts--block-editor"] .editor-block {
  position: relative;
  margin-bottom: 0.5rem;
  width: 100%;
  overflow-wrap: break-word;
}

[data-controller~="user--posts--block-editor"] .editor-block:hover .add-block-btn,
[data-controller~="user--posts--block-editor"] .editor-block:hover .delete-block-btn {
  opacity: 1;
}

[data-controller~="user--posts--block-editor"] .add-block-btn {
  position: absolute;
  left: -3.5rem;
  top: -0.5rem;
  opacity: 0;
  transition: opacity 0.2s;
}

[data-controller~="user--posts--block-editor"] .delete-block-btn {
  position: absolute;
  right: -3.5rem;
  top: -0.5rem;
  opacity: 0;
  transition: opacity 0.2s;
}

[data-controller~="user--posts--block-editor"] .block-menu {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-controller~="user--posts--block-editor"] .format-menu {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* エディター内のコンテンツスタイル */
[data-controller~="user--posts--block-editor"] .editor-block [contenteditable="true"] {
  outline: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}

[data-controller~="user--posts--block-editor"] .editor-block [contenteditable="true"]:focus {
  outline: none;
}

/* プレースホルダーのスタイル */
[data-controller~="user--posts--block-editor"] .editor-block .text-gray-400 {
  pointer-events: none;
}

/* contenteditable要素のプレースホルダー */
[data-controller~="user--posts--block-editor"] .editor-block [contenteditable="true"].empty:before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
  position: absolute;
}

/* エディター内のリンクスタイル */
[data-controller~="user--posts--block-editor"] .editor-block [contenteditable="true"] a {
  color: #2563eb;
  text-decoration: underline;
  text-decoration-color: #93c5fd;
  text-underline-offset: 3px;
  transition: all 0.2s ease;
  cursor: pointer;
}

[data-controller~="user--posts--block-editor"] .editor-block [contenteditable="true"] a:hover {
  color: #1d4ed8;
  text-decoration-color: #2563eb;
  background-color: #eff6ff;
  padding: 0 2px;
  border-radius: 2px;
}

/* リンクメニューのスタイル */
.link-menu {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}