@use "../../../010-settings/"as *;
@use "../../../050-layout/basics"as *;
@use "../../../050-layout/standardpage/"as *;
@use "../../../030-tools/tool_focus-outline" as *;

.breadcrumb_wrapper {
	width: 100%;
	display: inline-grid;
	background: $il-standard-page-breadcrumbs-bg-color;

	.breadcrumb {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		direction: rtl;
		text-align: left;
		margin: 0;
		font-weight: $il-standard-page-breadcrumbs-font-weight;
		font-size: $il-font-size-small;
		padding: ($il-padding-small-vertical * 2);
		padding-left: $il-standard-page-content-padding;

		span.crumb a {
			color: $il-standard-page-breadcrumbs-color;
			&:hover {
				color: $il-standard-page-breadcrumbs-active-color;
			}
			@include clear-focus-for-override($clearAfter: true);
			@include il-focus-outline-only();
		}

		&>span+span:before {
			content: $il-standard-page-breadcrumbs-seperator;
			color: $il-standard-page-breadcrumbs-divider-color;
			padding: 8px 10px;
			font-weight: $il-font-weight-base;
			font-family: "il-icons";
		}
	}

}

// This part is for legacy dropdowns, visible e.g. in the repository listing or session materials
// Note they have a bootstrap dep.

//== Navs
//== Breadcrumbs
//
//##

//** Breadcrumb margin
$il-breadcrumb-margin-top: .8em;
$il-breadcrumb-margin-right: 0;
$il-breadcrumb-margin-bottom: $il-line-height-computed;
$il-breadcrumb-margin-left: 0;
$il-breadcrumb-resp-margin-top: 0;
$il-breadcrumb-resp-margin-right: 0;
$il-breadcrumb-resp-margin-bottom: 0;
$il-breadcrumb-resp-margin-left: 0;
//** Breadcrumb paddin
$il-breadcrumb-resp-padding-vertical: 0;
$il-breadcrumb-resp-padding-horizontal: 5px;


/* Breadcrumb */

.breadcrumb {
	margin: $il-breadcrumb-margin-top $il-breadcrumb-margin-right $il-breadcrumb-margin-bottom $il-breadcrumb-margin-left;
	font-size: $il-font-size-small;

	> li + li:before {
		font-family: 'il-icons';
	}

	@media only screen and (max-width: $il-grid-float-breakpoint-max) {
		margin: $il-breadcrumb-resp-margin-top $il-breadcrumb-resp-margin-right $il-breadcrumb-resp-margin-bottom $il-breadcrumb-resp-margin-left;
		padding: $il-breadcrumb-resp-padding-vertical $il-breadcrumb-resp-padding-horizontal;
	}
}

/* Legacy Breadcrumbs */
ol.breadcrumb {
	padding: 0;

	> li {
		display: inline-block;
	}
	> li + li:before {
		padding: 0 $il-padding-xs-horizontal;
		color: $il-standard-page-breadcrumbs-divider-color;
		content: $il-standard-page-breadcrumbs-seperator;
		font-family: "il-icons";
	}
}