/* ==========================================================================
 * Scroll button
 * ========================================================================== */


.c-scroll-button {
	@include text-style(5);
	position: relative;
	display: inline-flex;
	align-items: center;
	color: palette(secondary, 500);
	text-decoration: none;
	cursor: pointer;
}


.c-scroll-button__text {
	display: inline-flex;
	align-items: center;
	padding: space(2);
}


.c-scroll-button__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	svg {
		position: absolute;

		.ie.v11 & {
			left: 36%;
			top: 36%;
		}

		transition: transform 0.25s ease-in-out, color 0.25s linear;
		transform: scale(1.4);

		.c-scroll-button:hover & {
			transform: scale(1.2);
			color: white;
		}
	}

	&::before {
		content: '';
		display: block;
		background-image: url(/img/hex.svg);
		width: 48px;
		height: 56px;
		background-size: cover;
		transition: transform 0.25s ease-in-out;

		.c-scroll-button:hover & {
			transform: scale(0.9);
		}
	}
}