.irannet-sp-brand-trail {
	--irannet-sp-brand-trail-gap: 10px;
	--irannet-sp-brand-trail-accent-width: 22%;
	--irannet-sp-brand-trail-accent-height: 3px;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	color: var(--e-global-color-text, currentColor);
	font-family: var(--e-global-typography-text-font-family, inherit);
	font-size: var(--e-global-typography-text-font-size, inherit);
	font-weight: var(--e-global-typography-text-font-weight, inherit);
	line-height: var(--e-global-typography-text-line-height, normal);
	background: transparent;
}

.irannet-sp-brand-trail *,
.irannet-sp-brand-trail *::before,
.irannet-sp-brand-trail *::after {
	box-sizing: border-box;
}

.irannet-sp-brand-trail--bordered {
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.irannet-sp-brand-trail--soft {
	background: color-mix(in srgb, var(--e-global-color-secondary, currentColor) 7%, transparent);
}

.irannet-sp-brand-trail--accent-line,
.irannet-sp-brand-trail--has-accent {
	padding-bottom: calc(12px + var(--irannet-sp-brand-trail-accent-height));
}

.irannet-sp-brand-trail--accent-line::after,
.irannet-sp-brand-trail--has-accent::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: var(--irannet-sp-brand-trail-accent-width);
	height: var(--irannet-sp-brand-trail-accent-height);
	border-radius: 999px;
	background: var(--e-global-color-accent, currentColor);
}

.irannet-sp-brand-trail__list {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--irannet-sp-brand-trail-gap);
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.irannet-sp-brand-trail--scroll .irannet-sp-brand-trail__list {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}

.irannet-sp-brand-trail--wrap .irannet-sp-brand-trail__list {
	flex-wrap: wrap;
	overflow: visible;
}

.irannet-sp-brand-trail__list::-webkit-scrollbar {
	height: 4px;
}

.irannet-sp-brand-trail__item,
.irannet-sp-brand-trail__prefix,
.irannet-sp-brand-trail__separator {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.irannet-sp-brand-trail__prefix,
.irannet-sp-brand-trail__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-width: 0;
}

.irannet-sp-brand-trail__prefix {
	color: var(--e-global-color-secondary, currentColor);
}

.irannet-sp-brand-trail__prefix-icon,
.irannet-sp-brand-trail__separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.irannet-sp-brand-trail__prefix-icon svg,
.irannet-sp-brand-trail__separator svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.irannet-sp-brand-trail__link {
	color: var(--e-global-color-text, currentColor);
	text-decoration: none;
	transition: color 180ms ease, opacity 180ms ease;
}

.irannet-sp-brand-trail__item.is-last .irannet-sp-brand-trail__link {
	color: var(--e-global-color-secondary, currentColor);
}

.irannet-sp-brand-trail__link:hover,
.irannet-sp-brand-trail__link:focus-visible {
	color: var(--e-global-color-primary, currentColor);
}

.irannet-sp-brand-trail__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 3px;
}

.irannet-sp-brand-trail__separator {
	color: var(--e-global-color-secondary, currentColor);
	user-select: none;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.irannet-sp-brand-trail__link {
		transition: none;
	}
}