/* ============================================================
	search-bar.css
	Hyomin Design System v1.0 — SearchBar Component

	컴포넌트:
	- .search-bar             — 래퍼 (flex row)
	- .search-bar__input-wrap — 입력 필드 테두리 박스
	- .search-bar__input      — 실제 input 요소
	- .search-bar__btn        — 검색 버튼 (돋보기 아이콘)

	States:
	- Default   — border gray-300
	- Focus     — :focus-within border red-600
	- Disabled  — .search-bar--disabled / bg gray-100, text gray-400
	- Filled    — 값 입력된 상태 (별도 JS 없이 :not(:placeholder-shown) 활용)
	============================================================ */

/* ─────────────────────────────────────────
	SearchBar — 래퍼
	───────────────────────────────────────── */

.search-bar {
	display: flex;
	align-items: center;
	height: 40px;
	width: 100%;
}

/* ─────────────────────────────────────────
	Input Wrap — 테두리 박스
	───────────────────────────────────────── */

.search-bar__input-wrap {
	display: flex;
	align-items: center;
	flex: 1;
	height: 40px;
	min-width: 200px;
	padding: 0 15px;
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-md); /* 8px */
	background-color: #ffffff;
	transition: border-color var(--duration-fast) var(--easing-default);
}

.search-bar__input-wrap:focus-within {
	border-color: var(--red-600);
}

/* ─────────────────────────────────────────
	Input — 텍스트 필드
	───────────────────────────────────────── */

.search-bar__input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background-color: transparent;
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-sm); /* 16px */
	font-weight: var(--font-weight-regular);
	color: var(--gray-900);
	line-height: 24px;
}

.search-bar__input::placeholder {
	color: var(--gray-300);
}

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

.search-bar--disabled .search-bar__input-wrap {
	background-color: var(--gray-100);
	border-color: var(--gray-300);
	cursor: not-allowed;
}

.search-bar--disabled .search-bar__input-wrap:focus-within {
	border-color: var(--gray-300);
}

.search-bar--disabled .search-bar__input {
	color: var(--gray-400);
	cursor: not-allowed;
}

.search-bar--disabled .search-bar__input::placeholder {
	color: var(--gray-400);
}

/* ─────────────────────────────────────────
	Search Button
	───────────────────────────────────────── */

.search-bar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: var(--radius-md); /* 8px */
	background-color: var(--color-primary-main);
	transition: background-color var(--duration-fast) var(--easing-default);
}

.search-bar__btn:hover {
	background-color: var(--color-primary-hover);
}

.search-bar__btn:focus-visible {
	outline: 3px solid var(--red-600);
	outline-offset: -3px;
}

.search-bar--disabled .search-bar__btn {
	background-color: var(--gray-300);
	cursor: not-allowed;
	pointer-events: none;
}

.search-bar__btn svg {
	width: 18px;
	height: 18px;
	stroke: #ffffff;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}


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

[data-theme="dark"] .search-bar__input-wrap {
	background-color: var(--gray-800);
	border-color: var(--gray-600);
}

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

[data-theme="dark"] .search-bar__input::placeholder {
	color: var(--gray-500);
}

[data-theme="dark"] .search-bar--disabled .search-bar__input-wrap {
	background-color: var(--gray-700);
	border-color: var(--gray-600);
}

[data-theme="dark"] .search-bar--disabled .search-bar__input {
	color: var(--gray-500);
}