// FoxListSearch — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) list-toolbar의 search (5111:4099)
//
// 마크업 계약 (React 밖 소비자용):
//   <form class="fox-list-search" role="search">
//     <div class="fox-list-search__box">
//       <span class="fox-list-search__field">…select-txt…</span>   <!-- 선택 -->
//       <input class="fox-list-search__input">
//       <button class="fox-list-search__submit">…svg…</button>
//     </div>
//   </form>
//
// 상자 규격은 FoxInput md와 같지만(높이 40 · radius 8 · 테두리 input-border) 좌우 여백만
// `form/padding/sm`으로 좁다 — 안에 셀렉트와 버튼이 들어가기 때문이다.
//
// 토큰이 아닌 값:
//   - 폭 320, 제출 버튼 32: 시안 값이나 Figma가 변수로 export하지 않는다.

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

.fox-list-search {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: fox.gap(3);
  // 시안 값이나 변수로 export되지 않는다.
  inline-size: 32rem;

  &__box {
    display: flex;
    inline-size: 100%;
    align-items: center;
    gap: fox.gap(2);
    block-size: fox.form(height-md);
    padding-inline: fox.form(padding-sm);
    border: fox.border(1) solid fox.color(input-border);
    border-radius: fox.form(radius-md);
    background: fox.color(input-surface);
  }

  &__field {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
  }

  &__input {
    @include field.field(label-md);

    // 네이티브 `search`가 붙이는 기본 장식을 지운다 — 지우기 X는 제출 버튼과 겹친다.
    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration {
      appearance: none;
    }
  }

  &__submit {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    // 시안 값이나 변수로 export되지 않는다.
    inline-size: 3.2rem;
    block-size: 3.2rem;
    padding: 0;
    border: none;
    // 시안은 secondary 계열 버튼이다 — 옆의 "엑셀 다운로드"와 같은 색을 쓴다.
    border-radius: fox.form(radius-md);
    background: fox.color(button-secondary-surface);
    color: fox.color(button-secondary-font);
    cursor: pointer;

    &:hover:not(:disabled) {
      background: fox.color(button-secondary-surface-hover);
    }

    &:active:not(:disabled) {
      background: fox.color(button-secondary-surface-pressed);
    }

    &:disabled {
      background: fox.color(button-disabled-surface);
      color: fox.color(font-neutral-disabled-strong);
      cursor: default;
    }
  }

  &__submit > svg {
    inline-size: fox.form(icon-md);
    block-size: fox.form(icon-md);
  }
}