/* Tailwind Elements: breadcrumbs.css */

@layer components {
	/* Hide Scrollbars */
	/* Duplicated from core.css to support `skeleton-minimal.css` */
	.hide-scrollbar::-webkit-scrollbar {
		display: none;
	}
	.hide-scrollbar {
		-ms-overflow-style: none; /* IE/Edge */
		scrollbar-width: none; /* Firefox */
	}

	.breadcrumb,
	.breadcrumb-nonresponsive {
		@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto;
	}

	.crumb {
		@apply flex justify-center items-center space-x-2;
	}
	.crumb-separator {
		@apply flex text-surface-700-200-token opacity-50;
	}

	/* === Auto-Responsive === */

	.breadcrumb li {
		@apply hidden md:block;
	}
	.breadcrumb li:nth-last-child(3),
	.breadcrumb li:nth-last-child(2),
	.breadcrumb li:nth-last-child(1) {
		@apply block;
	}
}