.arrow{
	&-right {
		position: relative;

		&:after {
			@include fa-icon;
			@extend .fas;
			content: fa-content($fa-var-angle-right);
			margin-left: 5px;
			font-size: 10px;
			position: absolute;
			bottom: 18px;
			font-size: 10px;
		}
	}

	&-left {
		position: relative;

		&:before {
			@include fa-icon;
			@extend .fas;
			content: fa-content($fa-var-angle-left);
			margin-right: 5px;
			font-size: 10px;
			position: absolute;
			bottom: 18px;
			font-size: 10px;
		}
	}
}

.cta {
	@extend .arrow-right;
	padding: 0;
	padding-right: 10px;
	text-align: left;
	font-weight: 700;
	width: auto;
	color: $orange-darker;

	&:after {
		bottom: 7px;
	}

	body:not(.touch-device) & {
		&:hover {
			background-color: transparent;
			color: $orange;
		}
	}
}

.external::after {
	@include fa-icon;
	@extend .fas;
	content: fa-content($fa-var-external-link-alt);
	font-size: .75em;
	color: $charcoal;
	position: relative;
	left: 4px;
	bottom: 1px;
  margin-right: 4px;
  filter: invert(51%) sepia(0%) saturate(13%) hue-rotate(142deg) brightness(89%) contrast(83%);
}
