.c-back {
	@include font-size(s);
	display: inline-flex;
	align-items: center;
	border: none;
	color: palette(neutral, 700); /* 1 */
	text-decoration: none;
	cursor: pointer;
	transition: color 150ms linear;

	&:hover {
		color: scale-color(palette(neutral, 700), $lightness: -20%);
	}
}

.c-back__text {
	transition: all 200ms linear;

	.c-back:hover & {
		color: palette(primary, 800);
	}
}

.c-back__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	width: 48px;
	margin-right: space(2);
	border-radius: 50%;
	background-color: palette(neutral, 0);
	box-shadow: 0 4px 8px -4px rgba(0,0,0,0.50);

	& > svg {
		transition: transform 200ms linear,
					color 200ms linear;

		.c-back:hover & {
			transform: translateX(-3px);
			color: palette(primary, 800);
		}
	}
}