@layer components {
	.breadcrumb {
		inline-size: 100%;
		font-size: var(--text-small-size);
	}

	.breadcrumb ol {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.breadcrumb li {
		display: inline-flex;
		align-items: center;
	}
	.breadcrumb .separator {
		display: inline-flex;
		align-items: center;
		margin-inline: var(--space-xs);
		user-select: none;
		white-space: nowrap;
	}

	.breadcrumb a {
		text-decoration: none;
	}

	.breadcrumb [aria-current="page"] {
		font-weight: var(--fw-medium);
	}
	.breadcrumb a:focus-visible {
		outline-offset: 2px;
	}
}