// Outline breadcrumbs
.outline-breadcrumb {
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
	& a {
		@extend .py-2;
		@extend .pr-3;
		@extend .mr-3;
		position: relative;
		display: inline-block;
	}
	& a:not(:last-child)::before, & a:not(:last-child)::after {
		position: absolute;
		content: "";
		height: 24px;
		width: 1px;
		right: 0;
		background: #e2e2e2;
	}
	& a::before {
		top: -2px;
		-webkit-transform: rotate(-30deg);
		-ms-transform: rotate(-30deg);
		transform: rotate(-30deg);
	}
	& a::after {
		bottom: -2px;
		-webkit-transform: rotate(30deg);
		-ms-transform: rotate(30deg);
		transform: rotate(30deg);
	}
}

// Minimal breadcrumbs

.minimal-breadcrumb > div:not(:first-of-type)::before{
	display:inline-block;
	content:"/";
}

.minimal-breadcrumb > .trail{
	color:$gray-600;
	font-size:0.9rem;
	display:inline-block;
	max-width:200px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:no-wrap;
}

// For anchors
.minimal-breadcrumb > .trail a{
	color:$gray-600;
	white-space:nowrap;
}


// Fancy breadcrumbs

@each $color, $value in $theme-colors {
	.fancy-breadcrumb-#{$color} > div{
		display:inline-block;
	}

	.fancy-breadcrumb-#{$color} a {
		cursor:pointer;
		color:white !important;
		padding:3px 0 3px 45px;
		background-color:$value;
		position:relative;
		display:inline-block;
	}

	.fancy-breadcrumb-#{$color} a:hover{
		background-color:lighten($value, 7%);
	}

	.fancy-breadcrumb-#{$color} a:hover::after{
		border-left-color:lighten($value, 7%);
	}

	.fancy-breadcrumb-#{$color} > a:first-of-type, .fancy-breadcrumb > div:first-of-type a{
		padding-left:10px;
	}

	.fancy-breadcrumb-#{$color} a:hover{
		text-decoration:none;
	}

	.fancy-breadcrumb-#{$color} a::after{
		cursor:pointer;
		content: " ";
		display:inline-block;
		position:absolute;
		width:0;
		height:0;
		border-top: 50px solid transparent;
		border-bottom: 50px solid transparent;
		border-left:30px solid #{$value};
		top:50%;
		margin-top:-50px;
		left:100%;
		z-index:2;
	}

	.fancy-breadcrumb-#{$color}{
		overflow:hidden;
		margin-bottom:map-get($spacers, 3);
	}

	.fancy-breadcrumb-#{$color} a::before{
		cursor:pointer;
		content: " ";
		display:inline-block;
		width: 0;
		height: 0;
		border-top: 50px solid transparent;
		border-bottom: 50px solid transparent;
		border-left: 30px solid white;
		position: absolute;
		top: 50%;
		margin-top: -50px;
		margin-left: 1px;
		left: 100%;
		z-index: 1;
	}
}

// Deprecated Fancy breadcrumbs
.fancy-breadcrumb > div{
	display:inline-block;
}

.fancy-breadcrumb a{
	cursor:pointer;
	color:white !important;
	padding:3px 0 3px 65px;
	background-color:map-get($theme-colors, "primary");
	position:relative;
	display:inline-block;
}

.fancy-breadcrumb a:hover{
	background-color:rgba(map-get($theme-colors, "primary"), 0.7);
}

.fancy-breadcrumb a:hover::after{
	border-left-color:rgba(map-get($theme-colors, "primary"), 0.7);
}

.fancy-breadcrumb > a:first-of-type, .fancy-breadcrumb > div:first-of-type a{
	padding-left:10px;
}

.fancy-breadcrumb a:hover{
	text-decoration:none;
}

.fancy-breadcrumb a::after{
	cursor:pointer;
	content: " ";
	display:inline-block;
	position:absolute;
	width:0;
	height:0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left:30px solid map-get($theme-colors, "primary");
	top:50%;
	margin-top:-50px;
	left:100%;
	z-index:2;
}

.fancy-breadcrumb{
	overflow:hidden;
	margin-bottom:map-get($spacers, 3);
}

.fancy-breadcrumb a::before{
	cursor:pointer;
	content: " ";
	display:inline-block;
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 30px solid white;
	position: absolute;
	top: 50%;
	margin-top: -50px;
	margin-left: 1px;
	left: 100%;
	z-index: 1;
}

.breadcrumb {
    background-color: transparent;
    border-left: 6px solid $color-third;
    border-bottom: 1px solid $color-third;
    background: none;
    padding: 0.33rem 1rem;
    font-family: $font-third;
    font-size: 0.88rem;
    font-weight: normal;
    text-transform: uppercase;
    a {
        color: $color-second;
        &:hover {
        	color: $color-prime;
        }
    }
}
.breadcrumb-item {
    font-family: $font-third;
    font-size: 0.88rem;
    font-weight: normal;
    &::before {
        color: darken($color-third, 15%) !important;
    }
    +.active {
        color: darken($color-third, 15%) !important;
    }
}