// FoxEmail — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                   Figma form-email (136:3092 · 섹션 392:5820)
//
// [아이디] @ [도메인 드롭다운] [도메인 직접입력] + 선택적 확인 버튼.
// 시안에서 세 칸이 모두 input·select 인스턴스이고 버튼도 btn 인스턴스라, 이 파일은 줄
// 배치와 `@` 구분자만 갖는다 — 상자 모양과 상태는 FoxInput·FoxSelect가 가진 것을 쓴다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-email">
//     <div class="fox-email__row">
//       <div class="fox-email__part">…fox-input…</div>
//       <span class="fox-email__at">@</span>
//       <div class="fox-email__part">…fox-select…</div>
//       <div class="fox-email__part">…fox-input…</div>
//       <button class="fox-button fox-button--primary fox-button--md">확인</button>
//     </div>
//   </div>
//
// 토큰이 아닌 값(사용자 승인):
//   - 칸의 `min-inline-size: 24rem`(240px): 시안이 세 칸을 240px로 고정했는데 토큰
//     스케일에 240이 없다. 고정 대신 최소폭으로 두어 넓은 곳에서는 나눠 갖고 좁아지면
//     줄이 넘어가게 했다.
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.

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

.fox-email {
  @include field.root;

  &__label {
    @include field.label;
  }

  // 좁아지면 칸이 찌그러지는 대신 줄이 넘어간다.
  &__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: fox.gap(2);
    inline-size: 100%;
  }

  &__part {
    flex: 1 1 0;
    min-inline-size: 24rem;
  }

  &__at {
    flex-shrink: 0;
    color: fox.color(font-neutral-default);
    font-family: fox.font-family(body);
    font-size: fox.font-size(body-md);
    font-weight: fox.font-weight(regular);
    line-height: 1.5;
    letter-spacing: -0.025em;
  }

  &__message {
    @include field.message;
  }

  &__message-icon {
    @include field.message-icon;
  }

  &:has([aria-invalid="true"]) .fox-email__message {
    color: fox.color(font-system-danger);
  }
}