// Breadcrumbs
.breadcrumbwidget{
	list-style: none;
	margin: .5rem 0;
	.user-select();

	li {
		display: inline-block;
		margin-right: .25rem;
		color: @bcTextColor;

		&:last-child {
			font-weight: 600;
		}
	}
	a {
		text-decoration: none;
		color: @bcTextColor;
		border: 1px solid transparent;
		padding: .25rem;

		&:hover {
			color: @bcTextColor;
			border-color: @bcHoverColor;
			text-decoration: none;
		}
	}
	li + li:before {
		content: " >";
		font-weight: bold;
		margin-right: .25rem;
	}
	&.path li + li:before {
		content: " /";
	}
	&.section li + li:before {
		content: " |";
	}

	&.flat {
		text-align: center;
		display: inline-block;
		overflow: hidden;
		background-color: @bcFlatBgColor;
		.z-depth1();
		border-radius: @radius;

		li {
			& + li:before {
				display: none;
			}

			display: block;
			float: left;
			text-decoration: none;
			outline: none;
			line-height: 2rem;
			position: relative;
			margin: 0;

			&:first-child {
				border-radius: @radius 0 0 @radius;
				a, span {
					padding-left: 1.5rem;
				}
			}

			&:last-child {
				border-radius: 0 @radius @radius 0;
				a, span {
					padding-right: 1.5rem;

					&:after {
						content: none;
					}
				}
			}

			span {
				padding: 0 1rem 0 2rem;
			}

			a {
				color: @bcFlatText;
				background-color: transparent;
				display: block;
				padding: 0 1rem 0 2rem;
				border: none;
				.transition(all, 0.25s);

				// The chevron
				&:after {
					content: '';
					position: absolute;
					top: 0;
					right: -.925rem;
					width: 2rem;
					height: 2rem;
					z-index: 1;
					background-color: @bcFlatBgColor;
					.transform(45deg, .65);
					box-shadow: 2px -2px 0 2px @bcFlatAccent;
					border-radius: 0 @radius 0 100%;
					.transition(all, 0.25s);
				}

				&:hover {
					color: @bcFlatAccentText;
					background-color: @bcFlatAccent;

					&:after {
						background-color: @bcFlatAccent;
					}
				}
			}
		}
	}
}
