// FoxSortableList — 항목 순서를 끌어서(또는 방향키로) 바꾸는 목록.
//
// 시안에 정렬 목록 컴포넌트가 없어 기획 문구("추가 이미지는 드래그로 순서를 바꾼다",
// BO-MAL-002 ⑤)만으로 만들었다(사용자 확정). 모양은 최소한으로 둔다 — 끌고 있는 항목·놓을
// 자리 표시뿐이고, 항목 본문은 호출부가 그린다. 손잡이 없이 항목 전체를 집는다(사용자 확정).
//
// 마크업 계약 (React 밖 소비자용):
//   <ul class="fox-sortable-list fox-sortable-list--horizontal" aria-label="…">
//     <li class="fox-sortable-list__item [--dragging|--over]" tabindex="0" draggable aria-label="…">
//       <div class="fox-sortable-list__body">…항목 본문…</div>
//     </li>
//   </ul>
//
// 토큰이 아닌 값:
//   - 끌고 있는 항목의 opacity: 상태 표현이라 색 토큰이 없다. 관례값 0.4.
//   - cursor grab/grabbing: 구조 규칙.

@use "abstracts" as fox;

.fox-sortable-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: fox.gap(4);
  padding: 0;
  margin: 0;
  list-style: none;

  &--vertical {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  &__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    border-radius: fox.radius(3);
    // 놓을 자리 테두리가 나타날 때 항목이 밀리지 않도록 투명 테두리를 미리 둔다.
    outline: fox.border(2) solid transparent;
    outline-offset: fox.number(2);
    cursor: grab;

    &:active {
      cursor: grabbing;
    }

    // 키보드로 잡았을 때 — 초점 테두리가 놓을 자리 표시와 같은 자리를 쓴다.
    &:focus-visible {
      outline-color: fox.color(border-theme-primary);
    }

    &--dragging {
      opacity: 0.4;
    }

    &--over {
      outline-color: fox.color(border-theme-primary);
    }
  }

  &__body {
    min-inline-size: 0;
    flex: 1 1 auto;
  }

  &--disabled &__item {
    outline: 0;
    cursor: default;
  }
}