@use '@talend/design-tokens/lib/tokens' as tokens;
////
/// Bootstrap breadcrumbs customization
/// @group Breadcrumbs
////

.breadcrumb {
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0 $padding-normal;
	height: $breadcrumb-height;
	white-space: nowrap;
	color: tokens.$coral-color-neutral-text;
	border-radius: 0;
	background-color: tokens.$coral-color-neutral-background;

	> li {
		display: flex;
		align-items: center;

		> a,
		> span,
		> .btn {
			display: inline-block;
			flex: 1;
			flex-basis: auto; // https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed
			max-width: $breadcrumb-items-max-width;
			padding: 0;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			color: tokens.$coral-color-accent-text;
		}

		+ li {
			// https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html
			&::before {
				display: block;
				content: '';
				margin: 0 $padding-small $padding-smaller $padding-smaller;
				padding: 0 0 0 $padding-small;
				transform: rotate(30deg);
				border-right: 0.0625rem solid tokens.$coral-color-neutral-border;
				height: 0.7813rem;
			}
		}

		// stylelint-disable-next-line selector-no-qualifying-type
		&.active span {
			font-weight: $font-weight-semi-bold;
			color: tokens.$coral-color-neutral-text;
		}
	}

	// Buttons need to have the same behavior as links
	a,
	.btn {
		font-size: inherit;
		text-align: left;
		text-transform: none;
		background: transparent;
		border: none;

		// stylelint-disable-next-line selector-no-qualifying-type
		&:focus,
		&:hover,
		&:active,
		&:active:focus,
		&.active {
			color: tokens.$coral-color-accent-text-active;
			background: transparent;
			text-decoration: none;
		}

		> span {
			display: block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}
}