// FoxConditionalOption — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                               Figma conditional-option
//
// 라디오 한 칸 + 그 칸을 골랐을 때만 의미가 생기는 select를 한 덩어리로 묶는다. 둘이 합쳐
// 하나의 답이다 — "다른 주소로 배송(라디오) → 어느 주소인지(select)"처럼 후속 질문이 딸린
// 선택지에 쓴다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-conditional-option fox-conditional-option--vertical">
//     <label class="fox-radio fox-radio--lg">…</label>
//     <div class="fox-conditional-option__detail">
//       <div class="fox-select fox-select--md">…</div>
//     </div>
//   </div>
//
// select는 라디오가 안 골라져 있어도 조작할 수 있다 — 값을 고르면 라디오가 자동으로 켜지는데,
// 잠가 두면 그 조작 자체가 불가능해진다. 선택 여부는 라디오의 네이티브 input이 소유하므로
// 이 파일은 배치만 맡는다.
//
// ⚠️ 시안의 변형 이름이 실제 동작과 반대다(`fox-radio-group`과 같은 문제). 동작 기준으로
// 다시 이름 붙였다.
//
//   시안 direction=row  →  `--vertical`     (select가 라디오 아래로)
//   시안 direction=col  →  `--horizontal`   (select가 라디오 옆에)
//
// 세로일 때 select는 **라벨 왼쪽 끝**에 맞춘다 — 동그란 표시 폭 + 간격만큼 들여쓴다. 그래야
// 라벨·부가설명과 한 덩어리로 읽힌다.
//
// 토큰이 아닌 값(사용자 승인):
//   - display / flex / align-*: 배치 규칙.

@use "@fox/styles/abstracts" as fox;

.fox-conditional-option {
  display: flex;

  // select가 라디오 옆에 선다. 라벨 한 줄과 높이를 맞춘다.
  &--horizontal {
    flex-direction: row;
    align-items: center;
    gap: fox.gap(5);
  }

  // select가 라디오 아래로 내려간다.
  &--vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: fox.gap(4);
  }
}

// 들여쓰기 폭은 `fox-radio`의 동그란 표시 폭과 그 간격을 그대로 따른다 — 두 값이 바뀌면
// 여기도 같이 바뀌어야 라벨 왼쪽 끝에 계속 맞는다. 가로일 때는 옆에 서므로 들여쓰지 않는다.
.fox-conditional-option--vertical .fox-conditional-option__detail {
  margin-inline-start: calc(#{fox.form(icon-lg)} + #{fox.gap(3)});
}

// 라디오가 md면 동그란 표시도 한 단계 작아지므로 들여쓰기도 따라 줄인다.
.fox-conditional-option--vertical:has(.fox-radio--md) .fox-conditional-option__detail {
  margin-inline-start: calc(#{fox.form(icon-md)} + #{fox.gap(3)});
}