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

$c-connect: (
	'color':		palette(neutral, 800),
	'color-alt':	palette(neutral, 500),
);

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



.c-connect {
	display: inline-flex;
	flex-direction: column;
	align-items: center;

	@include mq(m){
		flex-direction: row;
	}
}


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

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

	&:focus {
		outline-color: currentColor;
		outline-style: solid;
		outline-offset: 1px;
		outline-width: 2px;
	}
}


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

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