/* biome-ignore-all lint/suspicious/noUnknownAtRules: Tailwind CSS @apply directive */
/* Action Text (Lexxy Editor) スタイルシート */
/* Action Text の見た目に関する指定はここで行う */
/* ベーススタイルは lexxy gem の lexxy.css が提供し、ここではテーマの上書きのみ行う */

/* エディタ本体: 白い紙 + 枠線。フォーカス時は枠線を少し濃くするだけに留める */
lexxy-editor {
  /* lexxy のアクセント色(選択状態)をブランドオレンジに寄せる */
  --lexxy-color-selected: var(--color-orange-100);
  --lexxy-color-selected-hover: var(--color-orange-200);
  /* キーボードフォーカスや選択ノードの輪郭はニュートラルな色で控えめに */
  --lexxy-focus-ring-color: var(--color-stone-400);
  --lexxy-radius: 0.5rem;
  --lexxy-editor-rows: 18rem;
  --lexxy-editor-padding: 0.875rem 1rem;

  @apply block w-full bg-white border border-stone-300 rounded-xl;
  transition: border-color 150ms;

  &:focus-within {
    @apply border-stone-400;
  }
}

/* ツールバー: 薄いグレーの帯 + 透明ボタン */
lexxy-editor lexxy-toolbar {
  /* text-lg 等の本文サイズ指定でボタンが肥大しないよう固定値にする */
  font-size: 1rem;
  --lexxy-toolbar-button-size: 2.25rem;
  --lexxy-toolbar-icon-size: 1.125rem;

  @apply bg-stone-50 border-b border-stone-200 px-1.5 py-1 gap-0.5;
  border-start-start-radius: calc(0.75rem - 1px);
  border-start-end-radius: calc(0.75rem - 1px);

  .lexxy-editor__toolbar-button {
    @apply bg-transparent text-stone-500;

    @media (any-hover: hover) {
      &:hover:not([aria-disabled="true"]):not([aria-pressed="true"]) {
        @apply bg-stone-200 text-stone-800;
      }
    }

    &[aria-pressed="true"],
    &:active:not([aria-disabled="true"]) {
      @apply text-orange-700;
      background-color: var(--lexxy-color-selected);
    }
  }
}

/* コンテンツ共通スタイル */
/* エディタ要素にも .lexxy-content が付与されるため、編集時と閲覧時で同じ見た目になる */
/* 段落間隔・リスト・コードブロック等の基本は lexxy-content.css に任せ、アプリのトーンだけ上書きする */
.lexxy-content {
  @apply leading-relaxed;
  overflow-wrap: break-word;
  word-break: break-word;

  a:not([class]) {
    @apply underline text-blue-600 hover:text-blue-800;
  }
  h1 {
    @apply text-2xl leading-snug mt-6 mb-2 first:mt-0;
  }
  h2 {
    @apply text-xl leading-snug mt-6 mb-2 first:mt-0;
  }
  h3 {
    @apply text-lg leading-snug mt-5 mb-2 first:mt-0;
  }
  h4 {
    @apply text-base leading-snug mt-4 mb-2 first:mt-0;
  }
  blockquote {
    @apply border-l-3 border-stone-300 pl-3 text-stone-500;
    &[dir="rtl"],
    [dir="rtl"] & {
      @apply border-l-0 border-r-3 pr-3 pl-0;
    }
  }
  img {
    @apply max-w-full h-auto;
  }
  figcaption {
    @apply text-stone-500 text-sm;
  }
}

/* コメント用のエディタサイズ調整 */
lexxy-editor.comment-editor {
  --lexxy-editor-rows: 4.5rem;
  --lexxy-editor-padding: 0.625rem 0.875rem;

  .lexxy-editor__content {
    max-height: 20rem;
    @apply overflow-y-auto;
  }
}