/*
 * 一覧のフィルター行（発注一覧・納品一覧）。行の要素に list-filter を付けて使う。
 * 共通の partial は無く、各一覧の _filter.html.erb が行を組む。欄幅は一覧ごとに違うので、ここには置かない。
 */

/* コンボボックスで選んだ値は、欄の幅を超えても折り返さず 1 行のまま、はみ出した分をクリアボタンの下に隠す。
   コンポーネント既定は選択後に折り返して欄の高さが伸びるが、フィルター行では他の欄と高さを揃える。
   発注フォームの明細などは折り返す前提なので、コンポーネント側は変えない。 */
.list-filter .ui-combo-box__input {
  @apply whitespace-nowrap;
}

/* クリアボタンは入力欄の右端に重ね、白い背景で後ろの文字を隠す。right-3 は size: :sm の枠の px-3 と同じ位置。
   mt-0 はコンポーネント既定の mt-0.75（先頭行に揃える余白）を打ち消し、縦は中央に置く。 */
.list-filter .ui-combo-box__control {
  @apply relative;
}

.list-filter .ui-combo-box__clear {
  @apply absolute top-1/2 right-3 mt-0 -translate-y-1/2 bg-white;
}

/* アイテム候補のメニュー。候補は品名に ID・型番・カラー・サイズを繋げて出すので、欄の幅に揃えると
   1 件が何行にも折り返す。内容の幅まで広げ、320px で折り返す。欄が 320px より広いときはメニューも欄の幅に揃える。
   165px はコンポーネント既定の最小幅（.ui-combo-box__menu の min-width）。
   menu_class に w-max などのユーティリティを渡さないのは、component の css が Tailwind の layer 外にあり、
   .ui-combo-box__menu の w-full を上書きできないため。 */
.list-filter .list-filter__product-menu {
  @apply w-max max-w-80;
  min-width: max(165px, 100%);
}