/* ============================================================
	spinner.css
	Hyomin Design System v1.0 — Spinner Component

	컴포넌트:
	- .spinner — 로딩 인디케이터 (기본 sm · primary)

	Size:
	- .spinner--sm  — 16px (default)
	- .spinner--md  — 24px
	- .spinner--lg  — 36px
	- .spinner--xl  — 48px

	Color:
	- .spinner--primary — green (default)
	- .spinner--success — green (success-main)
	- .spinner--error   — red (error-main)
	- .spinner--white   — white (다크 배경 전용)
	============================================================ */


/* ─────────────────────────────────────────
	Keyframe
	───────────────────────────────────────── */

@keyframes spinner-rotate {
	to { transform: rotate(360deg); }
}


/* ─────────────────────────────────────────
	Spinner — 기본 (sm · primary)
	───────────────────────────────────────── */

.spinner {
	display: inline-block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border: 2px solid var(--gray-200);
	border-top-color: var(--color-primary-main);
	border-radius: 50%;
	animation: spinner-rotate 0.75s linear infinite;
}


/* ─────────────────────────────────────────
	Size
	───────────────────────────────────────── */

.spinner--sm {
	width: 16px;
	height: 16px;
	border-width: 2px;
}

.spinner--md {
	width: 24px;
	height: 24px;
	border-width: 3px;
}

.spinner--lg {
	width: 36px;
	height: 36px;
	border-width: 4px;
}

.spinner--xl {
	width: 48px;
	height: 48px;
	border-width: 4px;
}


/* ─────────────────────────────────────────
	Color
	───────────────────────────────────────── */

.spinner--primary {
	border-color: var(--gray-200);
	border-top-color: var(--color-primary-main);
}

.spinner--success {
	border-color: var(--gray-200);
	border-top-color: var(--color-success-main);
}

.spinner--error {
	border-color: var(--gray-200);
	border-top-color: var(--color-error-main);
}

/* 다크 배경(gray-700 등)에서 사용 */
.spinner--white {
	border-color: rgba(255, 255, 255, 0.25);
	border-top-color: #ffffff;
}


/* ─────────────────────────────────────────
	Dark Mode — 트랙 색상을 어둡게
	(아크 색상은 semantic token이 자동 변경)
	───────────────────────────────────────── */

[data-theme="dark"] .spinner--primary,
[data-theme="dark"] .spinner--success,
[data-theme="dark"] .spinner--error,
[data-theme="dark"] .spinner {
	border-color: var(--gray-600);
}

[data-theme="dark"] .spinner--primary {
	border-top-color: var(--color-primary-main);
}

[data-theme="dark"] .spinner--success {
	border-top-color: var(--color-success-main);
}

[data-theme="dark"] .spinner--error {
	border-top-color: var(--color-error-main);
}