@use "@fox/styles/abstracts" as fox;
@use "@fox/styles/form-field" as field;

// 모달 contents가 `align-items: flex-start`라 폭을 주지 않으면 폼이 내용만큼 넓어져 넘친다.
.formList {
  display: flex;
  flex-direction: column;
  gap: fox.gap(8);
  inline-size: 100%;
  min-inline-size: 0;
}

.fieldWithAction {
  display: flex;
  flex-direction: column;
  gap: fox.gap(3);
}

.emailRow {
  display: flex;
  align-items: center;
  gap: fox.gap(2);
  inline-size: 100%;
}

.emailPart {
  flex: 1 1 0;
  min-inline-size: 0;
}

.field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: fox.gap(3);
  inline-size: 100%;
}

.fieldError {
  @include field.message;

  color: fox.color(font-system-danger);
}