.breadcrumb {
	list-style: none;
	margin-bottom: 16px;
	padding: 20px 0;

	li {
		display: inline-block;

		+ li::before {
			$nbsp: '\00a0';
			$breadcrumb-separator: '\003e';
			color: $color-gray-dark;
			content: '#{$breadcrumb-separator}#{$nbsp}';
			padding: 0 5px 0 10px;
		}
	}

	.active {
		color: $color-gray-dark;
	}

	&.dashboard {
		color: $color-white;
		font-size: 13px;
		font-weight: 400;
		line-height: 20px;
		margin-bottom: 0;
		padding: 10px 0;

		li {
			a {
				&:link,
				&:visited {
					color: $color-white;
					text-decoration: underline;
				}

				&:hover,
				&:focus {
					color: $color-white;
					text-decoration: none;
				}
			}

			+ li::before {
				color: $color-white;
				content: '';
				padding: 0;
			}
		}

		li::after {
			$nbsp: '\00a0';
			$breadcrumb-separator: '\003e';
			color: $color-white;
			content: '#{$breadcrumb-separator}#{$nbsp}';
			padding: 0 5px 0 10px;
		}

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