/* ============================================================
	toggle-switch.css
	Hyomin Design System v1.0 — Toggle Switch Component

	컴포넌트:
	- .toggle-switch        — 래퍼 (포커스 트랩)
	- .toggle-switch__input — 숨김 checkbox
	- .toggle-switch__label — 텍스트 + 트랙 묶음
	- .toggle-switch__text  — 라벨 텍스트 영역
	- .toggle-switch__required — 필수 별표
	- .toggle-switch__track — pill 형태 배경 트랙 (44×24px)
	- .toggle-switch__thumb — 원형 핸들 (18×18px)

	사용법:
	<div class="toggle-switch">
		<input class="toggle-switch__input" type="checkbox" id="ts-1" />
		<label class="toggle-switch__label" for="ts-1">
			<span class="toggle-switch__text">Label <span class="toggle-switch__required">*</span></span>
			<span class="toggle-switch__track">
				<span class="toggle-switch__thumb"></span>
			</span>
		</label>
	</div>
	============================================================ */

/* ─────────────────────────────────────────
	Wrapper
	───────────────────────────────────────── */

.toggle-switch {
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-sm);
}

/* 포커스 시 전체 div에 빨간 테두리 */
.toggle-switch:focus-within {
	outline: 3px solid var(--color-accent-main);
	outline-offset: -3px;
}

/* ─────────────────────────────────────────
	Hidden Input
	───────────────────────────────────────── */

.toggle-switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─────────────────────────────────────────
	Label
	───────────────────────────────────────── */

.toggle-switch__label {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-base); /* 18px — Figma: Body base */
	font-weight: var(--font-weight-regular);
	color: var(--gray-900);
	line-height: 27px;
	cursor: pointer;
	user-select: none;
}

.toggle-switch__required {
	color: var(--color-accent-main); /* accent/main = #dc2626 */
}

/* ─────────────────────────────────────────
	Track (배경 pill)
	───────────────────────────────────────── */

.toggle-switch__track {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
	border-radius: var(--radius-full);
	background-color: var(--gray-300);
	transition: background-color var(--duration-fast) var(--easing-default);
}

/* Hover */
.toggle-switch__label:hover .toggle-switch__track {
	background-color: var(--gray-400);
}

/* ─────────────────────────────────────────
	Thumb (원형 핸들)
	───────────────────────────────────────── */

.toggle-switch__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #ffffff;
	box-shadow: var(--shadow-sm);
	transition: transform var(--duration-fast) var(--easing-default);
}

/* ─────────────────────────────────────────
	Checked (On)
	───────────────────────────────────────── */

.toggle-switch__input:checked + .toggle-switch__label .toggle-switch__track {
	background-color: var(--color-primary-main); /* green-500 */
}

.toggle-switch__input:checked + .toggle-switch__label .toggle-switch__thumb {
	transform: translateX(20px); /* 44 - 18 - 3(left) - 3(right) = 20 */
}

.toggle-switch__input:checked + .toggle-switch__label:hover .toggle-switch__track {
	background-color: var(--color-primary-hover);
}

/* ─────────────────────────────────────────
	Disabled
	───────────────────────────────────────── */

.toggle-switch__input:disabled + .toggle-switch__label {
	cursor: not-allowed;
}

.toggle-switch__input:disabled + .toggle-switch__label .toggle-switch__text {
	color: var(--gray-400);
}

.toggle-switch__input:disabled + .toggle-switch__label .toggle-switch__track {
	background-color: var(--gray-200);
}

/* Disabled + Checked */
.toggle-switch__input:disabled:checked + .toggle-switch__label .toggle-switch__track {
	background-color: var(--color-primary-disabled); /* green-300 */
}

/* ─────────────────────────────────────────
	Dark Mode
	───────────────────────────────────────── */

[data-theme="dark"] .toggle-switch__label {
	color: var(--gray-100);
}

[data-theme="dark"] .toggle-switch__track {
	background-color: var(--gray-600);
}

[data-theme="dark"] .toggle-switch__label:hover .toggle-switch__track {
	background-color: var(--gray-500);
}

[data-theme="dark"] .toggle-switch__input:checked + .toggle-switch__label .toggle-switch__track {
	background-color: var(--color-primary-main);
}

[data-theme="dark"] .toggle-switch__input:disabled + .toggle-switch__label .toggle-switch__text {
	color: var(--gray-600);
}

[data-theme="dark"] .toggle-switch__input:disabled + .toggle-switch__label .toggle-switch__track {
	background-color: var(--gray-700);
}

[data-theme="dark"] .toggle-switch__input:disabled:checked + .toggle-switch__label .toggle-switch__track {
	background-color: var(--color-primary-disabled);
}