// -------------------------------------------------------------------
// :: BREADCRUMB
// -------------------------------------------------------------------


.m-breadcrumb{

	background: $light;
	display: block;
	padding: 0 1.25rem;
	line-height: 2.75rem;

	a{
		text-decoration: none;
		color: $font-color;
		position: relative;
		font-weight: bold;

		&:hover{
			color: $primary-color;
		}


		&:last-child{
			color: $font-color-light;
		}

		&:first-child{
			@extend %__icon-home;

			&:before{
				margin-right: 0.5rem;
				margin-top: -0.3rem;
				display: inline-block;
			}
		}

		&:nth-last-child(2){
			@extend %__icon-arrow-back;

			&:before{
				margin-right: 0.5rem;
				margin-top: -0.1rem;
				display: inline-block;
			}
		}

		&:not(:nth-last-child(2)){
			display: none;
		}

		@include FLOW-at($desktop){
			display: inline-block !important;

			&:not(:last-child){
				padding-right: 1.5rem;

				&:after{
					content: "";
					display: block;
					position: absolute;
					width: 2px;
					height: 1rem;
					right: 0.5rem;
					top: 50%;
					margin-top: - 0.5rem;
					background-color: $border-color;
				}
			}

			&:nth-last-child(2):before{
				display: none;
			}

			&:first-child:before{
				display: inline-block !important;
			}
		}
	}


}


// to be extended when displayed on a dark or coloured background

%__m-breadcrumb--light{
	background: rgba($black, 0.7);

	a{
		&:not(:last-child){
			color: $white;

			&:hover{
				color: $white;
			}

			&:after{
				background-color: rgba($white, 0.5);
			}
		}

		&:last-child{
			color: rgba($white, 0.5);
		}
	}
}


.m-breadcrumb--light{ @extend %__m-breadcrumb--light; }