$c-servicepoint-gap: space(3);

.c-servicepoint {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	// negative margin to fight the extraneous margins on the outer edges because of the margin on the children elements
	margin: -$c-servicepoint-gap;

	@include mq($max: m) {
		@include contain;
	}
}

.c-servicepoint__image {
	margin: $c-servicepoint-gap;
	max-width: 192px;
	background-color: lightgrey;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

	&.is-small {
		max-width: 144px;
	}
}

.c-servicepoint__content {
	//@include hyphenate;
	@include owl-children(space(2));
	flex-grow: 9999;
	min-width: 180px;
	max-width: 336px;
	margin: $c-servicepoint-gap;
}

.c-servicepoint__intro {
	@include text-style(3);
	color: palette(text, 800);
}

.c-servicepoint__body {
	margin-bottom: space(1);
}

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

.c-servicepoint__data {
	text-decoration: none;
	color: palette(text, 500);
	transition: color 0.2s linear;

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

	&[data-icon] {
		display: inline-flex;

		&::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);
	}
}

.c-servicepoint__name {
	@include font-weight(bold);
	color: palette(primary, 500);
}

.c-servicepoint__function {
	@include text-style(5);
	color: palette(secondary, 500);
}

.c-servicepoint__action {
	margin-top: space(5);
}


// Modifier that makes the image and the gap a bit smaller
.c-servicepoint--small {
	.c-servicepoint__image {
		max-width: 144px;
	}
}


// Modifier for when placed on dark background
.c-servicepoint--on-dark {

	&,
	.c-servicepoint__intro,
	.c-servicepoint__name,
	.c-servicepoint__data {
		color: palette(neutral, 0);
	}

	.c-servicepoint__data:hover {
		color: palette(secondary, 500);
	}
}


.c-servicepoint--is-special {
	@include restrict-m;

	.c-servicepoint__image {
		margin-left: 0;
	}

	.c-servicepoint__content {
		max-width: 400px;
	}

	@include mq(m) {
		justify-content: flex-start;
	}

	@include mq(1240) {
		.c-servicepoint__content {
			max-width: none;
		}
	}
}