// FoxSpinner — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) img-loading (5384:9710)
//
// 마크업 계약 (React 밖 소비자용):
//   <span class="fox-spinner" role="status" aria-label="불러오는 중">
//     <span class="fox-spinner__arc"></span>
//     <span class="fox-spinner__head"></span>
//   </span>
//
// 시안은 80px 그림 한 장으로 왔지만 래스터를 그대로 쓰지 않는다 — 크기를 바꾸면 뭉개지고
// 색도 토큰을 못 쓴다. 픽셀을 재서 같은 도형을 CSS로 다시 그렸다.
//   - 고리: 바깥 반지름 40 · 안쪽 28 → 굵기 12px (지름의 15%)
//   - 색: 6시에서 시작해 시계방향으로 60°까지 진하고, 나머지 300°에 걸쳐 투명해진다
//   - 앞머리: 지름 12px 원이 6시 자리 고리 중심선 위에 얹힌다 (고리 끝을 둥글게 맺는다)
// 원본 그림의 알파를 5°마다 재서 확인한 값이다(185~240° = 1.00, 이후 180°까지 선형 감소).
//
// 크기는 지름 하나로 정해진다. 굵기·앞머리를 퍼센트로 잡아 어떤 지름에서도 비율이 같다.
//
// 색은 기본이 테마 기본색이다(시안). 버튼처럼 글자색을 따라야 하는 자리는 감싼 쪽에서
// `color: inherit`으로 되돌린다 — 요소에 색을 직접 주는 편이 상속보다 강해서, 기본값을
// 두는 한 감싸기만으로는 바뀌지 않는다.
//
// 토큰이 아닌 값:
//   - 지름 8rem, 굵기·앞머리 15%, 마스크 정지점 70%, 그라디언트 60°: 시안에서 잰 값이나
//     Figma가 변수로 export하지 않는다(사용자 승인).
//   - 한 바퀴 도는 시간 1초: 시안이 정지 그림이라 정보가 없다. 흔한 기본값을 쓴다.
//   - transform / mask / animation: 구조·움직임 규칙.

@use "abstracts" as fox;

@keyframes fox-spinner-turn {
  to {
    transform: rotate(1turn);
  }
}

.fox-spinner {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  // 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
  inline-size: 8rem;
  font-size: 8rem;
  block-size: 8rem;
  color: fox.color(element-theme-primary);
  animation: fox-spinner-turn 1s linear infinite;

  // 버튼 안에서는 계열별 글자색을 따라간다.
  .fox-button__spinner > & {
    color: inherit;
  }

  // 고리. 원뿔 그라디언트를 그린 뒤 가운데를 도려내 굵기를 만든다.
  &__arc {
    position: absolute;
    inset: 0;
    border-radius: fox.radius(max);
    background: conic-gradient(
      from 180deg,
      currentColor 0deg,
      currentColor 60deg,
      transparent 360deg
    );
    // 안쪽 70%를 지운다 — 반지름의 30%가 곧 지름의 15%다.
    mask: radial-gradient(farthest-side, transparent 70%, #000 70%);
  }

  // 고리 앞머리. 끝을 둥글게 맺어 준다.
  &__head {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    inline-size: 15%;
    font-size: 15%;
    block-size: 15%;
    transform: translateX(-50%);
    border-radius: fox.radius(max);
    background: currentColor;
  }

  // 움직임을 줄이려는 사용자에게는 천천히 돈다 — 멈추면 무엇을 기다리는지 알 수 없다.
  @media (prefers-reduced-motion: reduce) {
    animation-duration: 3s;
  }
}