// Note: The prefooter disappears on mobile


.o-prefooter {
	@include z(z-prefooter);
	@include font-weight(semiBold);
	position: relative;
	padding-top: space(6);
	overflow: hidden;
	color: palette(neutral, 0);
	background-color: palette(neutral, 0);
	border-bottom-right-radius: space(25);
	box-shadow: 20px 20px 20px -20px rgba(0,0,0,0.24);
	display: grid;
	grid-template-columns: 1fr 12fr 1fr;
	grid-template-rows: auto;

	@include mq($max: $o-prefooter-bp-medium) {
		height: space(6);
		margin-top: space(-6);
		border-bottom-right-radius: space(10);
	}

	@include mq($bp-max) {
		grid-template-columns: 1fr ($site-max-width*1px) 1fr;
	}
}


.o-prefooter__bg {
	@include mq($o-prefooter-bp-medium) {
		position: absolute;
		top: space(6);
		bottom: 0;
		left: 0;
		right: calc((100% - (100% / #{$site-columns}) * #{$site-columns - 2}) / 2);
		background-image:
			url('/img/ornament-shape-2-half-bottom.svg'),
			url('/img/ornament-shape-3-half-bottom.svg'),
			url('/img/ornament-shape-4-half-bottom.svg'),
			url('/img/ornament-shape-5.svg'),
			linear-gradient(to bottom right, palette(secondary, 400), palette(secondary, 500));
		background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
		background-size: 160px 80px, 106px 56px, 160px 80px, 160px 136px, 100% 100%;
		background-position: space(7) top, space(1) calc(100%), 31vw calc(100%), 86% calc(120%), 0 0;
		z-index: 0;
		border-top-right-radius: space(10);

		@include mq($bp-max) {
			right: $site-max-gutter-width;
		}
	}
}

.o-prefooter__main {
	grid-column: 2 / span 1;
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	padding: space(6) 0;

	@include mq($max: $o-prefooter-bp-medium) {
		display: none; // hidden on mobile
	}
}


.o-prefooter__visual {
	@include mq($max: $o-prefooter-bp-large) {
		margin-left: column(-0.75);
	}
	margin: space(-12) 0 space(-6) 0;
	width: column(4);
}


.o-prefooter__chat {
	margin-left: column(0.75);
	width: column(3.5);
	flex: auto;
}


.o-prefooter__social {
	margin-left: column(0.75);
	width: column(3);
	flex: auto;
}


// When layout menu is in large viewport we need a special background to match the sidebar color
@include mq(layout-menu) {
	.o-prefooter--with-menu-bg {
		background-color: transparent;
		background-image: linear-gradient(to right, transparent 50%, palette(primary, 100) 50%);
		margin-top: space(-6);
	}
}