/**
 * Playoffline breadcrumbs (T5.5).
 *
 * Hidden on Home. Woo and WP trails share the same chrome.
 */

.po-breadcrumbs {
	min-width: 0;
	max-width: 100%;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--po-color-border);
	color: var(--po-color-muted);
	font-size: var(--po-font-small-size);
	line-height: var(--po-font-small-leading);
}

.po-breadcrumbs__inner,
.po-breadcrumbs .po-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.55rem;
	min-width: 0;
}

.po-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.55rem;
	margin: 0;
	padding: 0;
	min-width: 0;
	list-style: none;
}

.po-breadcrumbs__item {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.po-breadcrumbs__item:not(.is-current):not(:last-child) {
	max-width: 12rem;
}

.po-breadcrumbs__item:not(.is-current):not(:last-child) a {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.po-breadcrumbs [aria-current="page"],
.po-breadcrumbs__item.is-current,
.po-breadcrumbs__item:last-child {
	max-width: 100%;
	flex: 1 1 auto;
	white-space: normal;
	overflow-wrap: anywhere;
}

.po-breadcrumbs__item:not(:last-child)::after {
	content: "/";
	color: var(--po-color-muted);
	speak: never;
}

.po-breadcrumbs__sep {
	margin-inline: 0.15rem;
	color: var(--po-color-muted);
}

.po-breadcrumbs a {
	color: var(--po-color-cyan);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.po-breadcrumbs a:hover {
	color: var(--po-color-text);
}

.po-breadcrumbs a:focus-visible {
	outline: 3px solid var(--po-color-cyan);
	outline-offset: 3px;
}

.po-breadcrumbs.woocommerce-breadcrumb {
	display: block;
}

.po-breadcrumbs.woocommerce-breadcrumb .po-breadcrumbs__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.55rem;
}

.po-breadcrumbs.woocommerce-breadcrumb .po-breadcrumbs__inner > a {
	display: inline-block;
	max-width: 12rem;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

.po-breadcrumbs [aria-current="page"],
.po-breadcrumbs__item.is-current,
.po-breadcrumbs.woocommerce-breadcrumb .po-breadcrumbs__inner > :last-child {
	color: var(--po-color-text);
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}