// =================================================================
// Breadcrumb Navigation Styles
// =================================================================

:where( .nav-crumbs ) {
	background: var( --nav-crumbs-background, #fff );
	border-block: var( --nav-crumbs-border, var( --bu-base-border, 1px solid #ddd ) );
	display: flex;
	font-family: var( --nav-crumb-font-family, var( --bu-base-font-family, sans-serif ) );
	font-size: var( --nav-crumb-font-size, 1rem );
	margin-block: var(--bu--content--margin-block, 1em);
	margin-inline: auto;
	padding: var( --nav-crumbs-padding-block, 0.75em ) var( --nav-crumbs-padding-inline, 0 );

	grid-area: breadcrumbs;

	width: var( --bu-container-size--content );

	* {
		line-height: 1em;
		vertical-align: middle;
	}
	
	button {
		background: var( --nav-crumbs-color-buttons-background, var( --bu-base-button-bg-color, #eee ) );
		border: 0;
		border-radius: var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) );
		cursor: pointer;
		font-family: var( --nav-crumb-font-family );
		font-size: var( --nav-crumb-font-size, 1rem );
		line-height: var( --nav-crumb-height, 1em );
		margin: 0;
		padding: var( --nav-crumb-padding, 0.75em );

		&:hover {
			background: var( --nav-crumbs-color-buttons-background-hover, var( --nav-crumbs-color-buttons-background, var( --bu-base-button-bg-color, #eee ) ) );
		}
	}


	// Styles for when breadcrumb dropdown menu is open
	&[ data-open="true" ] {

		.nav-crumbs-menu-wrapper {
			min-width: clamp( 0px, 300px, 90vw );
		}

		.nav-crumbs-current {
			border-radius: var( --nav-crumbs-color-buttons-radius-d, var( --bu-base-button-border-radius, 4px ) var( --bu-base-button-border-radius, 4px ) 0 0 );
			max-width: 300px;

			&::after {
				content: "\f106";
			}
		}
		
		.nav-crumbs-menu {
			border-radius: var( --bu-base-button-border-radius-menu-open, 0 0 var( --bu-base-button-border-radius, 4px ) var( --bu-base-button-border-radius, 4px ));
		}

		// Styles for when breadcrumb dropdown menu is open while breadcrumbs are not expanded
		&[ data-expanded="false" ] {
			position: relative;

			.nav-crumbs-menu-wrapper {
				position: absolute;
				right: var( --nav-crumbs-padding-inline,  0.75em );
			}

			@container content-container ( min-width: 500px ) {
				position: static;

				.nav-crumbs-menu-wrapper {
					position: relative;
					right: auto;
				} 
			}
		}
		
	}
}

.nav-crumb-list {
	display: inline-block;
	display: inline-flex;
	flex-wrap: wrap;
	height: calc( var( --nav-crumb-height, 1em ) + (var( --nav-crumb-padding, 0.75em ) * 2 ) );
	justify-content: space-around;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
	
.nav-crumb,
.nav-crumbs-expander-wrapper {

	&::after {
		content:'/';
		display: inline-block;
		margin-inline: var( --nav-crumb-padding, 0.75em );
	}
}
	
.nav-crumb {
	display: inline-block;

	a {
		color:  var( --nav-crumb-color-text, var( --bu-base-link-color, #0f69d7 ) );
		display: inline-block;
		margin: var( --nav-crumb-margin, 0.5  );
		max-width: var( --nav-crumb-char-count, 15ch );
		overflow: hidden;
		padding: var( --nav-crumb-padding, 0.75em );
		text-decoration: none;
		text-overflow: ellipsis;
		vertical-align: middle;
		white-space: nowrap;
		
		&:hover {
			text-decoration: underline;
		}
	}
}

.nav-crumb-home {
	a{
		font-size: 0;
		max-width: none;

		&::before {
			content: "\f015";
			display: block;
			font-family: "Font Awesome 5 Free";
			font-size: var( --nav-crumb-font-size, 1rem );
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			float: right;
			font-style: normal;
			font-variant: normal;
			font-weight: 900;
			line-height: 1;
			padding: var( --nav-crumb-padding, 0.75em );
			text-decoration: none;
			text-rendering: optimizeLegibility;
			text-transform: none;
			translate: 0 -0.1em;
			white-space: nowrap;
		}	
	}
	
}

.nav-crumbs-expander-wrapper,
.nav-crumbs-menu-wrapper {
	flex-shrink: 0;
}

.nav-crumbs-current,
.nav-crumbs-menu {
	padding: var( --nav-crumb-padding, 0.75em );
}

.nav-crumbs-expander-wrapper {
	&:is( :not( .visible) ) {
		display: none;
	}
}

.nav-crumbs-current {
	display: block;
	max-width: var( --nav-crumb-char-count-current, 22ch );
	overflow: hidden;
	padding-right: calc( var( --nav-crumb-padding, 0.75em ) * 2 + 1em);
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	
	&::after {
		content: "\f107";
		display: block;
		font-family: "Font Awesome 5 Free";
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		float: right;
		font-style: normal;
		font-variant: normal;
		font-weight: 900;
		line-height: 1;
		position: absolute;
		right: var(--nav-crumb-padding, 0.75em);
		top: 50%;
		text-decoration: none;
		text-rendering: optimizeLegibility;
		text-transform: none;
		translate: 0 -50%;
		white-space: nowrap;
	}
}

.nav-crumbs-menu-wrapper {
	display: inline-block;
	min-width: 0;
	position: relative;
	transition: min-width 250ms;
	
	&:has( .nav-crumbs-menu[open] ) {
		min-width: clamp( 0px, 300px, 90vw );
		
		.nav-crumbs-current {
			border-radius: var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) ) var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) ) 0 0;

			&::after {
				content: "\f106";
			}
		}
		
		.nav-crumbs-menu {
			border-radius: 0 0 var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) ) var( --nav-crumbs-color-buttons-radius, var( --bu-base-button-border-radius, 4px ) );
		}
	}
}

.nav-crumbs-menu {
	background:  var( --nav-crumbs-color-menu-background, var( --bu-base-button-bg-color, #eee ) );
	border: 0;
	box-sizing: border-box;
	// display: none;
	padding: var( --nav-crumb-padding, 0.75em );
	position: absolute;
	width: 100%;
	
	ul,
	menu {
		border-inline-start: 2px solid var( --nav-crumbs-color-buttons-text, var( --bu-base-button-text-color, #333 ) );
		border-inline-start: var( --nav-crumbs-border, var( --bu-base-border, 1px solid #ddd ) );
		list-style: none;
		margin: 0;
		padding: var(--nav-crumb-padding, 0.75em);
	}

	li {
		margin-block: 1em;

		&:first-child {
			margin-block-start: 0;
		}

		&:last-child {
			margin-block-end: 0;
		}
	}
	
	a {
		color:  var( --nav-crumbs-color-menu-text, var( --bu-base-button-text-color, #333 ) );

		&:hover {
			text-decoration: underline;
		}
	}
}


// Styles for when breadcrumbs are expanded
.nav-crumbs-expanded {
	display: block;

	.nav-crumb-list {
		display: inline;
		height: auto;
	}

	.nav-crumb {
		a {
			max-width: none;
		}
	}
}