// label / control / description / error をまとめる Field コンポーネント専用のレイアウト。
// 子要素（label はインライン、input/select/textarea はインラインブロック）の display 種別に関わらず
// 縦積みを強制するため flex-direction: column にする（display だけでは改行を保証できない）。
//
// 余白は Bootstrap の forms 実装（scss/forms/_labels.scss の .form-label、
// scss/forms/_form-text.scss の .form-text、mixins/_forms.scss の .{state}-feedback）にならい、
// コンテナ側ではなく各要素自身の margin だけで組み立てる。flex は兄弟要素の margin を相殺しない
// （通常のブロックフローと違う）ため、コンテナ側に別途 gap 用の margin を足すと二重マージンになる。
// .acms-form-label は既に margin-bottom: 0.5rem を持ち（Bootstrap の $form-label-margin-bottom も
// 同じ .5rem）、input/select/textarea は margin: 0 なので、ここでは何もしなくて良い。
.acms-form-field {
  display: flex;
  flex-direction: column;

  // <p> のブラウザ既定マージンは normalize.css ではリセットされない（reset.css と異なり
  // 素の余白を尊重する仕様）ため明示的に消し、Bootstrap の .form-text / .{state}-feedback と
  // 同じ margin-top: .25rem ($form-text-margin-top / $form-feedback-margin-top) だけを与える。
  // グローバルな .acms-text-helper / .acms-text-error 自体は変更せず、Field 内でのみ上書きする。
  .acms-text-helper,
  .acms-text-error {
    margin: 0;
    margin-top: 0.25rem;
  }
}

// FieldError の messages（1フィールドに対する複数バリデータの失敗メッセージ）。
// レガシー markup（div[role=alert] > div（バリデータごと） > p）と同じ入れ子を踏襲する。
// 外側の div（role=alert）は子が div（ブロック要素）なので、それ自体に display: flex は不要
// （素のブロックフローで縦に並ぶ）。バリデータ行同士の間隔だけ、直下の div に対して持たせる
.acms-field-error-group > div + div {
  margin-top: 0.25rem;
}

// アイコンとメッセージ本文の間隔。.material-symbols-outlined は inline-block + vertical-align: middle
// （_material-symbols.scss）なので、素の p の中でテキストと並べるだけなら flex 化は不要。
// アイコン側に専用クラスを持たせず、.acms-field-error-group 配下の material-symbols を直接対象にする
.acms-field-error-group .material-symbols-outlined {
  margin-right: 4px;
}
