@import "../bootstrap/scss/functions";
@import "../base/functions";
@import "../base/variables";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";


// Variables
$breadcrumb-font-size: px-to-rem( 15px );
$breadcrumb-item-padding: 16px;
$breadcrumb-divider: '\2022';
$breadcrumb-divider-color: $gray-300;
$breadcrumb-primary: $primary;
$breadcrumb-secondary: $secondary;


// Base
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	margin-left: -$breadcrumb-item-padding;
	margin-right: -$breadcrumb-item-padding;
	font-size: $breadcrumb-font-size;
	list-style: none;
	opacity: 1;
	visibility: visible;
	transition: opacity .2s;
}

.breadcrumb-item {
	position: relative;
	padding: 0 $breadcrumb-item-padding;

	&:not(:last-child) {
		&::after {
			content: $breadcrumb-divider;
			position: absolute;
			top: 50%;
			right: 0;
			transform: translate(50%, -50%);
			padding: 0;
			font-size: px-to-rem( 22px );
			line-height: 1;
			vertical-align: middle;
			color: $breadcrumb-divider-color;
		}
	}
}

.breadcrumb-text,
.breadcrumb-link {
	display: inline-block;
	line-height: 1.5;
}

.breadcrumb-link {
	color: inherit;

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

.breadcrumb-active {
	border-bottom: 2px solid $breadcrumb-secondary;
}


// Contexts
.context-dark {
	.breadcrumb-item {
		&::before {
			color: inherit;
		}
	}

	.breadcrumb-active {
		border-color: $breadcrumb-primary;
	}

	&.section-layer {
		.breadcrumb-link {
			&:hover {
				color: rgba( $white, .7 );
			}
		}

		.breadcrumb-active {
			border-color: $white;
		}
	}
}