@layer components {
	.breadcrumbs {
		--breadcrumbs-separator: "/";
	}

	.breadcrumbs > ul {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: calc(var(--gutter) / 2);
	}

	.breadcrumbs li {
		display: flex;
		align-items: center;
		gap: calc(var(--gutter) / 2);
	}

	.breadcrumbs li:not(:first-child)::before {
		content: var(--breadcrumbs-separator);
		color: oklch(from var(--color-text) l c h / 40%);
	}

	.breadcrumbs a {
		color: oklch(from var(--color-text) l c h / 60%);
		text-decoration: none;
	}

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

	.breadcrumbs [aria-current="page"] {
		color: var(--color-text);
		font-weight: var(--font-weight-medium);
	}
}