/* 発注書詳細のステータス行: 納品待ち⇔納品済みセレクトの状態色とローディング表示。
   使い回す想定が無いため select コンポーネント側の色バリアント化はせず、この機能限定のスタイルとして閉じる。
   一覧の status セル（バッジ + popover）のスタイルは order_status_cell.css。 */

/* セレクトの自然なサイズに収まる inline 枠。relative はローディングアイコンの中央寄せの基準。 */
.order-status-select-cell {
  @apply relative inline-flex items-center;
}

/* busy 解除（送信完了）後の再表示だけを遅延させる。busy が外れてから turbo_stream の
   差し替えが走るまでの隙間で旧セレクトが一瞬見えるため、その間は opacity-0 を保持し、
   差し替え完了後に表示へ切り替わるようにする。busy 付与時は [busy] 側で即座に隠す。 */
.order-status-select-cell__form {
  transition: opacity 0s 150ms;
}

/* 幅は固定せず表示テキストに合わせて hug させる（Figma の 80px 固定では「納品待ち」が
   3 点リーダーになる）。コンポーネント既定の w-full / max-w-80 に詳細度で勝たせる。 */
.ui-select.order-status-select {
  @apply w-fit;
}

/* メニューはトリガー幅に縛らず、選択肢が折り返さない幅まで広げる（最低はトリガー幅）。 */
.order-status-select .ui-select__menu {
  @apply w-auto min-w-full;
}

.order-status-select .ui-select__option {
  @apply whitespace-nowrap;
}

/* 状態色: 納品待ちは amber、納品済みは teal。バッジ（ui-badge--amber / --teal）と同じ対応で、
   枠線・表示テキスト・chevron をステータス色に揃える（Figma の Select 準拠）。 */
.order-status-select--delivering .ui-select__control {
  @apply border-amber-600;
}

.order-status-select--delivering .ui-select__display-text,
.order-status-select--delivering .ui-select__icon {
  @apply text-amber-600;
}

.order-status-select--delivery_complete .ui-select__control {
  @apply border-teal-600;
}

.order-status-select--delivery_complete .ui-select__display-text,
.order-status-select--delivery_complete .ui-select__icon {
  @apply text-teal-600;
}

/* ローディングをセレクトに重ねて常時置き、表示切り替えは display ではなく opacity で行う
   （display の切り替えだと上の transition の遅延が効かないため）。
   pointer-events-none にして、重なっている下のセレクトの操作を妨げない。 */
.order-status-select-cell__loading {
  @apply pointer-events-none absolute inset-0 flex items-center justify-center opacity-0;
  /* セレクトと対に、busy 解除後の非表示化を遅延させ、差し替えまでローディングを保持する。 */
  transition: opacity 0s 150ms;
}

/* 送信中: turbo-frame[busy] の間だけセレクトを隠してローディングアイコンを出す。
   busy 付与時は遅延なしで即座に切り替える（選択直後にローディングを出す）。 */
.order-status-select-cell[busy] .order-status-select-cell__form {
  @apply opacity-0;
  transition: opacity 0s;
}

.order-status-select-cell[busy] .order-status-select-cell__loading {
  @apply opacity-100;
  transition: opacity 0s;
}

.order-status-select-cell__loading .icon {
  @apply animate-spin;
}