/*
 * 発注の会話ドロワー（tenant/orders/_conversation_drawer）。
 *
 * 現状使い回す想定が無いため、汎用のドロワーコンポーネントにはせず、この機能限定のスタイルとして閉じる
 *
 * ドロワー本体の幅、ページ側に空ける右余白、画面に固定するヘッダとフッターの右端は必ず同じ値なので、
 * shell に置いたカスタムプロパティ 1 つから引く（512px は Figma のドロワー幅）。
 *
 * 開閉は Stimulus (tenant--orders--conversation-drawer) が書く open-value 属性を起点に切り替える。
 * 属性が無い状態を閉じた側に寄せ、開いた状態だけをセレクタで拾う。
 */
.order-conversation__shell {
  --order-conversation-drawer-width: 512px;
  --order-conversation-drawer-duration: 200ms;

  transition: margin-right var(--order-conversation-drawer-duration) ease-out;
}

.order-conversation__shell:has([data-tenant--orders--conversation-drawer-open-value="true"]) {
  margin-right: var(--order-conversation-drawer-width);

  /* 画面に固定するヘッダとフッター（tenant/layouts/application.css）の右端も、ドロワーの左端で
     止める。この 2 つは shell の margin を見ないので、変数で伝える。 */
  --tenant-fixed-inset-right: var(--order-conversation-drawer-width);
}

/*
 * ヘッダとフッターの右端は、開閉に合わせてページ余白と同じ速さでスライドさせる。カスタム
 * プロパティ自体は補間されないので、それを読む right 側に transition を置く。
 */
.order-conversation__shell .tenant-header,
.order-conversation__shell .ui-footer--fixed {
  transition: right var(--order-conversation-drawer-duration) ease-out;
}

/*
 * 閉じている間は viewport の右外に退ける。display を切り替えるとスライドを見せられないので、
 * transform で動かし、visibility でフォーカスと読み上げの対象から外す。
 * visibility は「片端が visible なら遷移中は visible」と補間される（CSS Transitions の規定）ので、
 * 同じ duration を並べるだけで、開くときは即座に見え、閉じるときはスライドが終わってから隠れる。
 */
.order-conversation__drawer {
  width: var(--order-conversation-drawer-width);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--order-conversation-drawer-duration) ease-out,
    visibility var(--order-conversation-drawer-duration);
}

[data-tenant--orders--conversation-drawer-open-value="true"] .order-conversation__drawer {
  transform: translateX(0);
  visibility: visible;
}

/*
 * 一覧の行のメールアイコン（ドロワーへ会話を読み込むリンク）のうち、ドロワーに出している
 * 発注のものを border で選択済みに見せる（Figma: border 2px indigo-500）。「リンクの href と
 * frame の src が同じ」はセレクタで書けないので、付け外しは Stimulus が classList で行う。
 */
.order-conversation__load-link--selected {
  @apply border-2 border-indigo-500;
}

/* 新着ドット（ui-icon-btn__attention）の absolute の基準は padding box なので、border の
   2px ぶん内側へズレる。同じ 2px を外へ足し、border の無いときと同じ位置に見せる。 */
.order-conversation__load-link--selected .ui-icon-btn__attention {
  @apply -top-1 -right-1;
}

/* アニメーションを避ける設定では、開閉を瞬時に切り替える。transition はすべてこの変数を
   参照しているので、0s にするだけで足りる。 */
@media (prefers-reduced-motion: reduce) {
  .order-conversation__shell {
    --order-conversation-drawer-duration: 0s;
  }
}

/* メッセージ送信フォームで添付ファイルをアップロードしている間の、送信ボタンの無効表示。
   送信そのものを止めるのは Stimulus の #guardSubmit で、ここは見た目とクリックだけを潰す。
   pointer-events はキーボード操作を通すので、これだけでは封じにならない。 */
.order-conversation__message-form[data-attachment-uploading] .order-conversation__send {
  @apply pointer-events-none cursor-not-allowed bg-gray-200 text-white;
}