@import "../../../lib/style/base";

$elements-page-menu-width: #{size(260)};

:host {
	padding: #{size(25)} #{size(50)} #{size(25)} calc(#{$elements-page-menu-width} + #{size(50)});
	display: block;
}

a {
	text-decoration: none;
}

#title {
	margin: 0;
}

#menu {
	width: $elements-page-menu-width;
	//background: color("shade", 100);
	background: $background;
	padding: $spacing-s;
	overflow-y: auto;
	flex-shrink: 0;
	position: fixed;
	left: 0;
	top: var(--nav-height);
	height: calc(100vh - var(--nav-height));
	overscroll-behavior: contain;
}

:host-context(.darkmode) {
	.menu-item {
		.img {
			filter: invert(1);
		}
	}
}

#header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	#open-docs {
		display: flex;
		align-items: center;
		line-height: 1;

		span {
			margin: 0 $spacing-m 0 0;
		}
	}
}

@media #{$screen-s-and-down} {
	:host {
		padding: #{$spacing-m};
	}

	#menu {
		position: fixed;
		z-index: 12345;
		bottom: 0;
		top: var(--nav-height);
		transform: translateX(-100%);
	}

	#menu, #router {
		transition: transform #{$transition-duration-medium} #{$transition-deceleration-curve};
	}

	#header {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	:host([popover-visible]) {

		#menu {
			transform: translateX(0);
		}

		#router {
			opacity: 0.3;
			pointer-events: none;
		}
	}
}

#footer {
	border-radius: $border-radius-m;
	display: none;
}

:host([routed]) {
	#footer {
		display: flex;
	}
}



