$o-footer-bp1: 1000;


.o-footer {
	@include z(z-footer);
	position: relative;
	padding-top: 36.8vw;
	color: palette(neutral, 0);
	background-color: palette(primary, 500);
	background-image: url(/img/stripes-right.png);
	background-repeat: no-repeat;
	background-position:  right bottom -230px;

	&::before {
		content:'';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 36.8vw;
		background-color: palette(neutral, 0);
		transform: skewY(-20deg) translateY(-100%);
		transform-origin: top right;
	}

	@include mq($o-footer-bp1) {
		padding-top: calc(((100vw - #{$site-max-width}px) / 2) * #{tan(20deg)});
	}
}


.o-footer__tilted-roof-kink {
	@include mq($o-footer-bp1) {
		@include border-radius((0, 0, m, 0));
		display: block;
		position: absolute;
		top: 24.8vw;
		left: -40px;
		right: 68vw;
		height: 100px;
		background-color: palette(neutral, 0);
		transform: skewY(-20deg) skewX(-20deg) translateY(-2%);
		transform-origin: top right;

		// Warning, magic values ahead!!
		@include mq($bp-max) {
			right: calc(100vw - ((100vw - #{$site-max-width}px) / 2) - 333px);
			top: calc(298px + ((100vw - #{$site-max-width}px) / 2) * #{tan(20deg)});
		}

		&::before {
			@include border-radius((l, 0, 0, 0));
			position: absolute;
			content: '';
			top: 0;
			right: -32px;
			width: 32px;
			height: 16px;
			background: transparent;
			box-shadow: -16px -1px 0 0 palette(neutral, 0); /* This is where the magic happens! */
		}
	}
}


.o-footer__main {
	@include contain;
	display: grid;
	grid-column-gap: space(2);
	grid-row-gap: space(5);
	grid-template-columns: repeat(2, auto);
	grid-template-rows: repeat(3, auto);
	padding: space(4) 0 space(6);

	@include mq($o-footer-bp1) {
		grid-column-gap: 0;
		grid-template-columns: 3fr 1fr 5fr 3fr;
		grid-template-rows: repeat(3, auto);
	}
}

.o-footer__extra {
	grid-row: 1;
	grid-column: 3 / span 2;
	display: grid;
	grid-template-columns: 5fr 3fr;
	grid-template-rows: auto;
	padding-bottom: space(8);
	border-bottom: 1px solid rgba(palette(neutral, 0), 0.5);
}


.o-footer__content {
	grid-column: 1;
	align-self: end;
	margin-top: 9vw; // make sure it stays inside red area
	padding-right: space(3);
}


.o-footer__feedback {
	grid-column: 2;
	align-self: end;
}


.o-footer__logo-small {
	display: inline-block;
	transition: opacity 200ms linear;
	grid-column: 1 / span 2;

	&:hover {
		opacity: 0.5;
	}

	@include mq($o-footer-bp1) {
		display: none;
	}

	& > .o-footer__logo-img {
		height: 40px;
	}
}


.o-footer__logo-large {
	@include mq($o-footer-bp1) {
		display: flex;
		justify-content: center;
		grid-row: 2 / span 2;
		grid-column: 1;
	}
}


.o-footer__address {
	@include mq($o-footer-bp1) {
		grid-row: 2;
		grid-column: 4;
	}
}


.o-footer__heading {
	text-transform: uppercase;
}


.o-footer__subheading {
	@include font-size(16,26);
	margin-bottom: space(1);
}


.o-footer__contact {
	list-style: none;
	margin-left: 0;
	margin-top: 2px;
	grid-row: 3;
	grid-column: 1 / span 2;

	@include mq($o-footer-bp1) {
		grid-row: 3;
		grid-column: 4
	}
}


// Right column
.o-footer__nav {
	@include mq($o-footer-bp1) {
		display: block;
		grid-row: 2 / span 2;
		grid-column: 3;
	}
}


.o-footer__menu {
	display: flex;
}


.o-footer__list {
	margin-left: 0;
	list-style: none;
}


.o-footer__navlist {
	margin-left: 0;
	list-style: none;
	width: 50%;
	margin-right: space(2);

	// All subsequent lists need spacing
	&:nth-child(n+2){
		margin-left: space(2);
	}
}


.o-footer__item {
	@include owl(space(1));
}


.o-footer__link {
	display: inline-flex;
	position: relative;
	z-index: 0;
	text-decoration: none;
	cursor: pointer;
	color: palette(neutral, 0);
	transition: color 150ms linear;

	// needed for hover effect
	&::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background-color: palette(neutral, 0);
		opacity: 0;
		transition: opacity 150ms linear;
	}

	&[data-icon] {
		&::before {
			content: '';
			display: block;
			width: 24px;
			height: 24px;
			margin-right: space(2);
			background-repeat: no-repeat;
			background-position: left center;
		}
	}

	$link-icons: "phone", "mobile", "email";

	@each $icon in $link-icons {
		&[data-icon="#{$icon}"] {
			&::before {
				background-image: url("/img//#{$icon}-white.svg");
			}
		}
	}

	&:hover {
		color: rgba(palette(neutral, 0), 0.8);
		&::after {
			opacity: 0.5;
		}
	}
}


.o-footer__social {
	text-align: right;

	@include mq($o-footer-bp1) {
		grid-row: 4;
		grid-column: 1;
		text-align: center;
	}
}


.o-footer__iconlist {
	display: flex;
	justify-content: flex-end;
	list-style: none;
	margin-left: 0;

	@include mq($o-footer-bp1) {
		justify-content: center;
	}
}


.o-footer__channel {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;

	&:nth-child(n+2) {
		margin-left: space(1);
	}
}


.o-footer__icon {
	flex: auto;
	display: block;
	height: 100%;
	border: 1px solid palette(primary, 700);
	border-radius: 4px;
	background-repeat: no-repeat;
	background-position: center;
	transition-property: background-color;
	transition-duration: 150ms;

	$social-links: "facebook", "linkedin", "twitter", "instagram";

	@each $link in $social-links {
		.#{$link} & {
			background-image: url("/img/social/#{$link}.svg");
		}
	}

	&:hover {
		background-color: rgba(palette(neutral, 0), 0.09);
	}
}

// Hide these elements for small screens
@include mq($max: $o-footer-bp1) {
	.o-footer__nav,
	.o-footer__extra,
	.o-footer__logo-large {
		display: none;
	}
}