$o-footer-bp1: 600;
$o-footer-bp2: 800;
$o-footer-bp3: 1060;

.o-footer {
	@include template(logo, info, title-1, title--2, nav, extra);
	@include z(z-footer);
	padding-bottom: 0;
	color: palette(neutral, 300);
	background-color: palette(neutral, 700);
	transition: padding 0.6s;

	.is-cookie-bar-visible & {
		padding-bottom: $site-cookieBar-height;
	}
}


.o-footer__grid {
	@include contain;
	padding-top: space(8);
	padding-bottom: space(8);
	display: grid;
	grid-row-gap: space(4);
	grid-template-columns: 12fr;
	grid-template-areas:
		"logo"
		"info"
		"title--1"
		"nav"
		"title--2"
		"extra";

	@include mq($o-footer-bp2) {
		grid-template-columns: 7fr 5fr;
		grid-template-areas:
			"logo       logo"
			"info       info"
			"title--1   title--2"
			"nav    	extra";
	}

	@include mq($o-footer-bp3) {
		grid-template-columns: 4fr 5fr 3fr;
		grid-template-areas:
			"logo  title--1  title--2"
			"info  nav   	 extra";
		padding-bottom: space(15);
	}
}


.o-footer__logo {
	height: 96px;
	margin-bottom: space(1);
	justify-self: start;
	align-self: end;
}


.o-footer__title {
	@include font-size(m);
	@include font-weight(medium);
	color: palette(neutral, 0);
	align-self: end;
}


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

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


.o-footer__item {
	@include mq($o-footer-bp1) {
		flex: 0 0 column(2,5);

		&:nth-child(2n+2) {
			flex-basis: column(3,5);
		}
	}
}


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

	&::after {
		content:'';
		position: absolute;
		display: block;
		height: 2px;
		width: 100%;
		bottom: -4px;
		background-color: palette(neutral, 0);
		transform: scaleX(0);
		transform-origin: 100% 50%;
		transition: transform 250ms ease-in-out;
		pointer-events: none;
	}

	&:hover {
		color: palette(neutral, 0);

		&::after {
			transform: none;
			transform-origin: 0% 50%;
			background-color: currentColor;
		}
	}

	&.is-active {
		color: palette(neutral, 0);

		&::after {
			transform: none;
			background-color: palette(primary, 800);
		}
	}
}


/*
 * Contact info
 */

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

.o-footer__contact-link {
	display: flex;
	align-items: center;
	color: palette(neutral, 300);
	text-decoration: none;
	transition: color 150ms linear;

	&:hover {
		color: palette(neutral, 0);
	}
}


.o-footer__contact-icon {
	flex: none;
	width: space(2);
	margin-right: space(2);
	color: palette(neutral, 0);
}


.o-footer__contact-data {

}




/*
 * Social media links
 */

.o-footer__social {
	display: flex;
	list-style: none;
	margin: space(4) 0 0;
}


.o-footer__channel {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	margin-right: space(2);
}


.o-footer__icon {
	flex: auto;
	display: block;
	height: 100%;
	color: palette(neutral, 0);
	background-repeat: no-repeat;
	background-position: center;
	transition: color 150ms linear;

	&:hover {
		color: palette(neutral, 400);
	}
}


.o-footer__jobs {
	position: relative;
	display: inline-block;
	margin-top: space(3);
	color: palette(neutral, 0);
	text-decoration: none;
	transition: color 150ms linear;

	&[data-items]::before {
		@include font-size(s);
		content: attr(data-items);
		position: absolute;
		left: calc(100%);
		bottom: calc(100% - 10px);
		display: flex;
		justify-content: center;
		align-items: center;
		height: 20px;
		min-width: 20px;
		border-radius: 50%;
		padding: 0 4px;
		background-color: #F4260B;
		color: palette(neutral, 0);
		text-align: center;
	}

	&:hover {
		color: palette(neutral, 300);
	}
}