$l-menu-content-bg: palette(primary, 100);

.l-menu {
	position: relative;

	@include mq($max: layout-menu) {
		background: $l-menu-content-bg;
	}

	@include mq(layout-menu) {
		display: grid;
		grid-template-columns: 1fr 3.5fr 8.5fr 1fr;
		grid-template-rows: auto;
		min-height: 100vh;
	}

	&::before {
	    content: '';
	    z-index: -1;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    left: 0;
		background: $l-menu-content-bg;
		grid-column: 3 / span 2;
		grid-row: 1;
	}

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


.l-menu__bar {
	@include mq($max: layout-menu) {
		@include z(z-layout-menu);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		width: calc(100% - #{space(3)});
		max-width: 400px;
		background-color: palette(neutral, 0);
		box-shadow: 0 10px 24px 0 rgba(0,0,0,0.16);
		border-radius: 0 16px 40px 0;
		transform: translateX(-110%);
		transition: transform 400ms ease-in;
	}

	@include mq(layout-menu) {
		grid-column: 2 / span 1;
		grid-row: 1;
		margin-top: space(2);
		padding-top: space(3);
		padding-left: 0;
		padding-right: space(6);
		padding-bottom: space(10) // needed for overlapping prefooter;
	}

	&.is-menu-bar-active {
		transform: none;
		transition: transform 400ms ease-out;
	}
}


.l-menu__content {
	@include contain($max: layout-menu);
	padding-top: space(6);

	@include mq(layout-menu) {
		grid-column: 3 / span 1;
		grid-row: 1;
		width: 100%;
		padding-top: space(16);
		padding-left: space(6);
		padding-bottom: space(6); // needed for overlapping prefooter
	}

	&::before,
	&::after {
		content: '';
		position: absolute;
		z-index: -1;
		right: 0;
		top: 0;
		width: 200px;
		height: 200px;
		background-color: palette(primary, 600);
	}
	&::after {
		background-color: $l-menu-content-bg;
		border-top-right-radius: map-get($border-radius, xxl);
	}
}


.l-menu__breadcrumbs {
	margin-bottom: space(7);

	@include mq($max: layout-menu) {
		display: none;
	}
}


.l-menu__close {
	position: absolute;
	right: space(3);
	top: space(3);

	@include mq(layout-menu) {
		display: none;
	}
}


.l-menu__filter-button {
	margin-top: space(5);

	@include mq(layout-menu) {
		display: none;
	}
}


.l-menu__category {
	@include mq($max: layout-menu) {
		padding: space(11) space(3) 0;
	}
}