/**
 * Sanaa breadcrumb — base + structural variants (compact, overlay).
 *
 * Component-level stylesheet: loads whenever the breadcrumb component
 * resolves, any design system. All values consume tokens.
 */

.sanaa-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 0.6em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--sanaa-text-sm, 0.85rem);
	color: var(--sanaa-text-muted);
}

.sanaa-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

/* Step separator — a chevron in the reading direction (logical
   properties flip it automatically in RTL). */
.sanaa-breadcrumb__item + .sanaa-breadcrumb__item::before {
	content: '';
	width: 0.42em;
	height: 0.42em;
	border-inline-end: 0.12em solid var(--sanaa-border);
	border-bottom: 0.12em solid var(--sanaa-border);
	transform: rotate(-45deg);
}

.sanaa-breadcrumb__link {
	color: var(--sanaa-text-muted);
	text-decoration: none;
	transition: color var(--sanaa-motion-duration, 200ms) var(--sanaa-motion-easing, ease);
}

.sanaa-breadcrumb__link:hover,
.sanaa-breadcrumb__link:focus-visible {
	color: var(--sanaa-primary);
}

.sanaa-breadcrumb__current {
	color: var(--sanaa-text);
	font-weight: 500;
}

/* Compact — tighter trail for dense headers. */

.sanaa-breadcrumb--compact .sanaa-breadcrumb__list,
.sanaa-c-breadcrumb--compact .sanaa-breadcrumb__list {
	font-size: calc(var(--sanaa-text-sm, 0.85rem) * 0.92);
	gap: 0.3em 0.45em;
}

.sanaa-breadcrumb--compact .sanaa-breadcrumb__item,
.sanaa-c-breadcrumb--compact .sanaa-breadcrumb__item {
	gap: 0.45em;
}

/* Overlay — legible over hero imagery. */

.sanaa-breadcrumb--overlay .sanaa-breadcrumb__list,
.sanaa-c-breadcrumb--overlay .sanaa-breadcrumb__list {
	color: var(--sanaa-text-inverse);
}

.sanaa-breadcrumb--overlay .sanaa-breadcrumb__link,
.sanaa-c-breadcrumb--overlay .sanaa-breadcrumb__link {
	color: var(--sanaa-text-inverse);
	opacity: 0.85;
}

.sanaa-breadcrumb--overlay .sanaa-breadcrumb__link:hover,
.sanaa-breadcrumb--overlay .sanaa-breadcrumb__link:focus-visible,
.sanaa-c-breadcrumb--overlay .sanaa-breadcrumb__link:hover,
.sanaa-c-breadcrumb--overlay .sanaa-breadcrumb__link:focus-visible {
	color: var(--sanaa-text-inverse);
	opacity: 1;
}

.sanaa-breadcrumb--overlay .sanaa-breadcrumb__item + .sanaa-breadcrumb__item::before,
.sanaa-c-breadcrumb--overlay .sanaa-breadcrumb__item + .sanaa-breadcrumb__item::before {
	border-color: currentcolor;
	opacity: 0.5;
}

.sanaa-breadcrumb--overlay .sanaa-breadcrumb__current,
.sanaa-c-breadcrumb--overlay .sanaa-breadcrumb__current {
	color: var(--sanaa-text-inverse);
}