.o-callout-bar {
	display: flex;
	align-items: center;
	color: white;
	background-color: palette(neutral, 200);
	background-position: center;
	background-size: cover;
  	text-align: center;
	min-height: 220px;
}

.o-callout-bar--dark-image {
	color: palette(neutral, 900);
}

.o-callout-bar__main {
	@include contain;
	@include vspacing(
		'padding-top' 1.33334,
		'padding-bottom' 0.6667
	);

	// Vertical spacing for elements that proceed another element
	& > * + * {
		@include vspacing(
			'margin-top' 0.25
		);
	}
}

.o-callout-bar__text {
	font-size: 1.2rem;
	line-height: 1;
	font-weight: 700; 
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.o-callout-bar__button {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: space(1.5) space(3);
	font-size: 0.9rem;
	line-height: 1.4;
	font-weight: bold;
	text-decoration: none;
	background-color: transparent;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);

	&:before,
	&:after {
		content: '';
		display: block;
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		transform: scaleX(1);
		transition: transform 500ms cubic-bezier(0.77, 0, 0.175, 1);
	}

	&:before {
		background-color: palette(neutral, 900);
		transform-origin: 0 50%;
	}

	&:after {
		border: 2px solid palette(neutral, 900);
		border-left: none;
		border-right: none;
		transform-origin: 100% 50%;
		transition-delay: .25s;
	}

	&:hover {
		color: palette(neutral, 900);
		transition-delay: .35s;
		background-color: white;

		&:before,
		&:after {
			transform: scaleX(0);
		}
	}
}

.o-callout-bar__icon {
	position: relative;
	z-index: 2;
	top: -1px;
	display: inline-block;
	width: space(2);
	margin-left: space(2);
	transition: transform 300ms;

	.o-callout-bar__button:hover & {
		transform: translateX(4px);
	}
}