/*
 * PureCSS.com
 * https://purecss.com/examples/breadcrumb/
 * Navigation breadcrumbs with ::before arrow separators using CSS content.
 */

.demo-breadcrumb .breadcrumb-variants {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		align-items: flex-start;
	}

.demo-breadcrumb nav ol {
		list-style: none;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0;
	}

.demo-breadcrumb nav li {
		display: flex;
		align-items: center;
		font-size: .9rem;
	}

:is(.demo-breadcrumb nav li) + li::before {
			content: "/";
			color: var(--text-muted);
			margin: 0 .5rem;
		}

:is(.demo-breadcrumb nav li):last-child {
			color: var(--text);
			font-weight: 500;
		}

.demo-breadcrumb nav a {
		color: var(--text-muted);
		text-decoration: none;
		transition: color .15s;
	}

:is(.demo-breadcrumb nav a):hover {
			color: var(--accent);
		}

/* Arrow variant */

.demo-breadcrumb .bc-arrow li + li::before {
		content: "›";
		font-size: 1.1rem;
		line-height: 1;
	}

/* Chevron variant */

.demo-breadcrumb .bc-chevron li + li::before {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		border-top: 1.5px solid var(--text-muted);
		border-right: 1.5px solid var(--text-muted);
		transform: rotate(45deg);
		margin: 0 .6rem;
	}

/* Pill variant */

.demo-breadcrumb .bc-pill li {
		background: var(--surface-2);
		padding: .25rem .75rem;
		border-radius: 99px;
		font-size: .8rem;
	}

:is(.demo-breadcrumb .bc-pill li) + li::before {
			display: none;
		}

:is(.demo-breadcrumb .bc-pill li) + li {
			margin-left: .35rem;
		}

:is(.demo-breadcrumb .bc-pill li):last-child {
			background: var(--accent-dim);
			color: var(--accent);
		}