/* combobox_common.css */

/* Combobox 全体の幅を揃える */
.hw-combobox,
.hw-combobox__main__wrapper {
  display: block;
  width: 100%;
  max-width: 100%; /* 他のフォーム部品と合わせる */
  margin-top: 4px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Combobox の input フィールド */
.hw-combobox__main__wrapper input {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

/* Combobox のダイアログ入力 */
.hw-combobox__dialog__input {
  display: block;
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

/* フォーカス時のスタイル */
.hw-combobox__main__wrapper input:focus,
.hw-combobox__dialog__input:focus {
  outline: none;
  border-color: #f8d7da;
  box-shadow: 0 0 0 2px rgba(0, 170, 255, 0.2);
}

/* Combobox.js が参照するカスタムプロパティ */
:root {
  --hw-focus-color: #f8d7da;
  --hw-border-width--thick: 1px;
  --hw-combobox-width: 100%;
  --hw-combobox-width--multiple: 100%;
}