[data-breadcrumb] {
	--_breadcrumb-gap: var(--breadcrumb-gap-md);
	--_breadcrumb-font-size: var(--breadcrumb-font-size-md);

	color: var(--breadcrumb-color);
	font-family: var(--breadcrumb-font-family);
	font-size: var(--_breadcrumb-font-size);
	line-height: var(--breadcrumb-line-height);
}

[data-breadcrumb][data-size='xs'] {
	--_breadcrumb-gap: var(--breadcrumb-gap-xs);
	--_breadcrumb-font-size: var(--breadcrumb-font-size-xs);
}

[data-breadcrumb][data-size='sm'] {
	--_breadcrumb-gap: var(--breadcrumb-gap-sm);
	--_breadcrumb-font-size: var(--breadcrumb-font-size-sm);
}

[data-breadcrumb][data-size='lg'] {
	--_breadcrumb-gap: var(--breadcrumb-gap-lg);
	--_breadcrumb-font-size: var(--breadcrumb-font-size-lg);
}

[data-breadcrumb-list] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--_breadcrumb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

[data-breadcrumb-item],
[data-breadcrumb-separator] {
	display: inline-flex;
	align-items: center;
	min-inline-size: 0;
}

[data-breadcrumb-link] {
	display: inline-flex;
	align-items: center;
	min-inline-size: 0;
	border-radius: var(--breadcrumb-link-radius);
	color: var(--breadcrumb-link-color);
	font-weight: var(--breadcrumb-link-font-weight);
	text-decoration: none;
	outline: none;
	transition:
		color var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
		box-shadow var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease);
}

[data-breadcrumb-link]:hover:not([data-current]) {
	color: var(--breadcrumb-link-color-hover);
}

[data-breadcrumb-link]:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: 0;
}

[data-breadcrumb-link][data-current] {
	color: var(--breadcrumb-link-color-current);
	font-weight: var(--breadcrumb-link-font-weight-current);
	cursor: default;
}

[data-breadcrumb-separator] {
	color: var(--breadcrumb-separator-color);
	user-select: none;
}

[data-breadcrumb-ellipsis] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--breadcrumb-ellipsis-size);
	block-size: var(--breadcrumb-ellipsis-size);
	border: var(--breadcrumb-ellipsis-border-width) solid var(--breadcrumb-ellipsis-border);
	border-radius: var(--breadcrumb-ellipsis-radius);
	background: var(--breadcrumb-ellipsis-bg);
	color: var(--breadcrumb-ellipsis-color);
	font: inherit;
	outline: none;
	user-select: none;
}

[data-breadcrumb-ellipsis][data-interactive] {
	cursor: pointer;
	transition:
		background var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
		border-color var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
		color var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
		box-shadow var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease);
}

[data-breadcrumb-ellipsis][data-interactive]:hover {
	border-color: var(--breadcrumb-ellipsis-border-hover);
	background: var(--breadcrumb-ellipsis-bg-hover);
	color: var(--breadcrumb-ellipsis-color-hover);
}

[data-breadcrumb-ellipsis][data-interactive]:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
	[data-breadcrumb-link],
	[data-breadcrumb-ellipsis][data-interactive] {
		transition: none;
	}
}