/**
 * No.27 パンくず（nav__breadcrumb）。
 * hover: text=change / text-move=through-up。
 */

.breadcrumb {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--base-black);
	font-family: var(--wp--preset--font-family--jp-sans);
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: var(--wp--custom--line-height--narrow, 1.25);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--custom--atom--rg, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--atom--rg, 0.5rem);
	margin: 0;
	padding: 0;
}

.breadcrumb__link {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.breadcrumb__link:focus {
	outline: none;
}

.breadcrumb__link:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.breadcrumb__link .breadcrumb__label {
	display: inline-block;
}

.breadcrumb__item > .icon-separator,
.breadcrumb__item > .icon-separator .icon {
	inline-size: 1rem;
	block-size: 1rem;
	flex-shrink: 0;
}

.breadcrumb__current {
	color: color-mix(in srgb, var(--wp--preset--color--base-black) 50%, transparent);
}