.c-data {
	display: inline-flex;
	flex-direction: column;
}

.c-data__link {
	display: inline-flex;
	transition: color 200ms linear;
	color: palette(action, 500);
	text-decoration: none;

	.c-data--on-dark & {
		color: palette(neutral);
	}

	&:hover {
		color: palette(action);
	}

	&[data-icon] {
		&::before {
			content: '';
			flex: none;
			width: space(3);
			height: space(3);
			margin-right: space(1);
			background-repeat: no-repeat;
			background-position: center;
			transform: translateY(2px);
		}
	}

	&[data-icon="phone"]::before {
		background-image: url(/img/phone.svg);
	}

	&[data-icon="mail"]::before {
		background-image: url(/img/mail.svg);
	}
}