.breadcrumb-container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	border-bottom: $layoutBorder;
	background: transparent;
	padding: 10px;


	ul.breadcrumb {
		background: #222;
		padding: 6px 4px 5px 4px;
		box-shadow: 1px 1px .5px .5px inset rgba(0, 0, 0, 0.2);
		border: 1px solid #222;
		border-radius: $baseRadius;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		list-style: none;
		margin: 0;

		li {
			&.divider {
				margin: 0 5px;

				i {
					color: #AAA;
				}
			}

			span,
			a {
				border-radius: $baseRadius;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				color: white;
				text-align: center;
				padding: 0 3px;
				background: rgba(0, 0, 0, 0.2);

				i {
					margin-right: 5px;
				}
			}


			&:hover {
				a {
					color: #fff;
					background: $seaBlue;
				}
			}

			&:last-child a {
				margin-right: 0;
			}
		}

	}

}