// Component settings: Connect
// ------------------------------------------

$c-connect: (
	'color':					palette(text),
	'color-alt':			palette(text, 2),
);

// ------------------------------------------



.c-connect {
	@include flex(column);

	@include mq(m){
		@include flex(inline center);
	}
}

.c-connect__phone {
	@include font(l);
	font-weight: 600;
	text-decoration: none;
	color: map-get($c-connect, 'color');
	transition: opacity 300ms;

	&:hover {
		opacity: 0.7;
		text-decoration: underline;
	}

	&:focus {
		outline: none;
		color: palette(feedback, action);
		text-shadow: 1px 1px 0 #fff, 2px 2px 0 rgba(26, 26, 26, 0.35);
		text-decoration: underline;
	}
}

.c-connect__or {
	margin: 0 space(2);
	color: map-get($c-connect, 'color-alt');

	@include mq($max: m) {
		margin: space(1) 0 space(2);
	}
}

//.c-connect__action {
//
//}