.merlin__button {
	@include font-smoothing;
	background: #fff;
	border-radius: 4px;
	border: 0;
	color: #a1a5a8;
	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;
	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: #a1a5a8;
			}
		}
	}

	&: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: #666;
		}
	}

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

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

	&--knockout {
		background: #fff;
		color: #cbcbcb;
		font-size: 14px;
		font-weight: 500;
		margin-left: -10px;
		padding-right: 25px;
		padding-top: 10px;
		transition: color 900ms cubic-bezier(.694, 0, .335, 1);

		&:hover,
		&:active {
			background: transparent;
			color: #a1a5a8;
		}
	}

	&--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%;
			opacity: 0;
			position: absolute;
			top: 50%;
			transform: scale(0);
			transition: opacity 100ms ease, transform 800ms cubic-bezier(.18, 1, .21, 1) 300ms;
		}

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

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

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

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