.separator--text {
	position: relative;
	color: $secondary;
	display: block;

	text-align: center;

	&:after {
		content: "";
		border-bottom: 1px solid currentColor;
		width: 100%;
		position: absolute;
		top: 50%;
		left: 0;
	}

	span {
		@extend %delta;
		font-size: rem(11px);
		color: currentColor;
		display: inline-block;
		background: white;
		border: 1px solid currentColor;
		text-transform: uppercase;
		padding: 0.25em 1em;
		position: relative;
		z-index: 2;
	}
}

%separator-diamonds {
	width: 196px;
	max-width: 196px;
	height: 9px;
	display: block;
	margin-left: auto;
	margin-right: auto;

	border: 0;
}

.separator-diamonds--accent {
	@extend %separator-diamonds;
	background-image: url('assets/svg/separator-simple-accent.svg');
}

.separator-diamonds--gray {
	@extend %separator-diamonds;
	background-image: url('assets/svg/separator-simple.svg');
}

// when used, it contains SVG code, SVG that
// gets its color with currentColor
%separator-wrapper {
	margin: rem(20px) 0;
	display: block;
	text-align: center;
}

.separator-wrapper--white {
	@extend %separator-wrapper;
	color: white;
}

.separator-wrapper--accent {
	@extend %separator-wrapper;
	color: $secondary;
}


.color-secondary {
	color: $secondary;
}