// Breadcrumb
//
// The breadcrumb is a handy navigation tool, you can not eat it.
//
// Styleguide 1

// Basic Breadcrumb
//
// Markup:
// <ul class="breadcrumb">
//     <li class="list-item">
//         <a class="txt-link" href="#">Item One</a>
//     </li>
//     <li class="list-item">
//         <a class="txt-link" href="#">Item Two</a>
//     </li>
//     <li class="list-item">
//         <a class="txt-link" href="#">Item Three</a>
//     </li>
// </ul>
//
// Styleguide 1.1

.breadcrumb {
	z-index: @index-3;

	padding: 5px;

	line-height: 10px;

	background-color: @breadcrumb-bgcolor;
	.list-item {
		.fontsize(1.3);

		display: inline;

		font-weight: bold;
		// add the dividers between the breadcrumb items
		&:before,
		&::before {
			padding: 0 10px;
			padding: 0 2px 0 5px;

			content: @breadcrumb-content;
		}
		// remove breadcrumb divider for first item
		&:first-child {
			&:before,
			&::before {
				display: none;
			}
		}
		// this removes the white space between the :before and the txt-link
		> .txt-link {
			margin-left: -4px;

			color: @breadcrumb-color; //#0a7690 ? skinning color
			// without this the first item is too far left
			&:first-child {
				margin-left: 0;
			}
		}
	}
	// clear after the breadcrumb
	&:after,
	&::after {
		display: table;
		clear: both;

		content: '';
	}
}