.merlin__button {
	background: $white;
	border-radius: 4px;
	border: 0;
	color: $gray;
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	overflow: hidden;
	padding: 8px 18px 9px;
	position: relative;
	text-align: center;
	text-decoration: none;
	transform: translate3d(0, 0, 0);
	transition: color 150ms cubic-bezier(.694, 0, .335, 1), background 150ms cubic-bezier(.694, 0, .335, 1);

	// Applies styles when Reduced Motion is enabled
	@media screen and (prefers-reduced-motion: reduce) {
		transition: color 50ms ease-in-out, background 50ms ease-in-out;
	}

	&:hover {
		background: $button--hover;

		.chevron {
			&::after,
			&::before {
				background: $blue;
			}
		}
	}

	&:active {
		background: $button--active;
	}

	span {
		display: inline-block;
	}

	&--colorchange {
		animation: colorchange 800ms infinite alternate;
	}

	&--fullwidth {
		padding-top: 9px;
		padding-bottom: 10px;
		display: block;
		font-size: 14px;
		width: 60%;
		margin: 0 auto;
		z-index: 999;
	}

	&--next,
	&--skip {
		position: absolute;
		bottom: 12px;
	}

	&--next {
		color: $blue;
		right: 12px;

		&:hover,
		&:active {
			color: $blue__darker;
		}
	}

	&--skip {
		left: 12px;

		&:hover,
		&:active {
			color: $black;
		}
	}

	&--blue {
		background: $blue;
		color: $white;

		&:hover,
		&:active {
			background: $blue__darker;
			color: $white;
		}
	}

	&--knockout {
		background: transparent;
		color: $gray;
		font-size: 14px;
		font-weight: 500;
		margin-left: -10px;
		padding-right: 25px;
		padding-top: 10px;
		transition: color 150ms ease;

		&:hover,
		&:active {
			background: transparent;
			color: $blue;
		}
	}

	&--no-chevron {
		margin-left: 0;
		margin-top: 3px;
		padding-right: 18px;
	}

	&--loading {

		&:hover,
		&:active {
			background: transparent;
		}

		& &__text {
			transition: opacity 400ms cubic-bezier(.18, 1, .21, 1) 400ms, filter 4100ms cubic-bezier(.18, 1, .21, 1);
		}

		&__spinner {
			left: 50%;
			margin-left: -12px;
			opacity: 0;
			position: absolute;
			top: 50%;
			margin-top: -11px;
			transform: scale(0);
			transition: opacity 100ms ease, transform 600ms cubic-bezier(.18, 1, .21, 1) 200ms;
		}

		& &__text {
			opacity: 0;
			filter: blur(100px);
		}

		& &__spinner {
			opacity: 1;
			transform: scale(1);
		}
	}

	&--external::after {
		content: "➝";
		display: inline-block !important;
		font-size: 1em;
		margin-top: .05em;
		opacity: 0;
		padding-left: 0.25em;
		position: absolute;
		transform: translateX(-5px);
		transition: transform 0.2s cubic-bezier(0, 0.25, 0.08, 1), opacity 0.2s cubic-bezier(0, 0.25, 0.08, 1);
	}

	&--external:hover::after {
		opacity: 1;
		transform: translateX(0);
	}
}

#skip {
	display: inline-block;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

#close {
	display: none;
	opacity: 0;
	visibility: hidden;
	z-index: -1;
}