/* ============================================================
	breadcrumb.css
	Hyomin Design System v1.0 — Breadcrumb Component

	컴포넌트:
	- .breadcrumb          — 네비게이션 래퍼
	- .breadcrumb__item    — 경로 링크
	- .breadcrumb__separator — 구분자 (chevron)
	- Modifier: .breadcrumb__item--current — 현재 페이지
	============================================================ */


/* ─────────────────────────────────────────
	Breadcrumb — 래퍼
	───────────────────────────────────────── */

.breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--spacing-2); /* 8px */
}


/* ─────────────────────────────────────────
	Item — 경로 링크
	───────────────────────────────────────── */

.breadcrumb__item {
	font-family: var(--font-secondary);
	font-size: var(--font-size-body-base); /* 18px */
	font-weight: var(--font-weight-regular);
	color: var(--gray-800);
	line-height: 27px;
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--duration-fast) var(--easing-default);
}

.breadcrumb__item:hover {
	color: var(--gray-900);
	text-decoration: underline;
}

/* 현재 페이지 — 초록, 클릭 불가 */
.breadcrumb__item--current {
	color: var(--color-primary-main);
	pointer-events: none;
	cursor: default;
}

.breadcrumb__item--current:hover {
	text-decoration: none;
}


/* ─────────────────────────────────────────
	Separator — chevron right
	───────────────────────────────────────── */

.breadcrumb__separator {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid var(--gray-400);
	border-bottom: 1.5px solid var(--gray-400);
	transform: rotate(-45deg);
	flex-shrink: 0;
}


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

[data-theme="dark"] .breadcrumb__item {
	color: var(--gray-300);
}

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

[data-theme="dark"] .breadcrumb__separator {
	border-right-color: var(--gray-600);
	border-bottom-color: var(--gray-600);
}