/*
 * Citizen - Navigation Styles
 * https://starcitizen.tools
*/

/*
 * Header
*/

.mw-header-container {
	position: fixed;
	z-index: 10;
	top: 0;
	width: 100vw;
	height: @header-height;
	display: flex;
	justify-content: space-between;
	font-family: @fonts-secondary;
	transition: @transition-transform;

	&:before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		box-shadow: 0 0 50px @header-height rgba( 255, 255, 255, 1 );
		z-index: -1;
		transition: @transition-box-shadow;
	}

	ul {
		list-style: none;
	}

	ul,
	li {
		margin: 0;
		display: block;
	}

	// Hide header when scroll
	&.nav-up {
		transform: translate( 0, -@header-height );

		&:before {
			box-shadow: none !important;
		}
	}

	.mw-header-icons {
		display: inherit;
	}

	.mw-header-end {
		width: @icon-box-size + @margin-side + @icon-padding;
		height: @header-height;
		user-select: none;

		// Input button hack
		> input {
			width: inherit;
			height: inherit;
			position: absolute;
			z-index: 8;
			margin: 0;
			display: block;
			opacity: 0;
			cursor: pointer;
			-webkit-touch-callout: none;
		}
	}
}

/*
 * Hamburger menu
 * Modified from https://codepen.io/erikterwan/pen/EVzeRP and https://codepen.io/oxla/pen/zgvqmM
 */
.mw-header-menu {
	input {
		&:checked {

			// Show drawer
			~ .mw-header-menu-drawer {
				transform: none;
				will-change: unset;
			}

			// Transform all the slices of hamburger into a crossmark
			~ .mw-header-menu-toggle > span {
				opacity: @opacity-icon;
				transform: rotate( 45deg ) translate( -5px, -7px );

				// Reflect line
				&:nth-last-child( 2 ) {
					transform: rotate( -45deg ) translate( -2px, 6px );
				}

				// Hide line
				&:nth-last-child( 3 ) {
					opacity: 0;
					transform: rotate( 0deg ) scale( 0.2, 0.2 );
				}
			}
		}

		// Hover state
		&:hover ~ .mw-header-menu-toggle > span {
			opacity: @opacity-icon-active;

			&:first-child {
				transform: translate( -50%, 0 );
			}
		}
	}

	&-toggle {
		width: @icon-size;
		height: @icon-size;
		margin: (@header-height - @icon-size) / 2 @icon-padding (@header-height - @icon-size) / 2 (@icon-margin * 2 + @margin-side * 2) / 2;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		span {
			z-index: 5;
			margin: 1.5px 0;
			width: @icon-size;
			height: 2px;
			display: block;
			background: @base-0;
			opacity: @opacity-icon;
			transform-origin: 4px 0;
			transition: @transition-transform-quick, @transition-background-quick, @transition-opacity-quick;

			&:first-child {
				transform-origin: 0% 0%;
			}

			&:nth-last-child( 2 ) {
				transform-origin: 0% 100%;
			}
		}
	}

	&-drawer {
		position: fixed;
		z-index: 4;
		top: 0;
		padding-top: @header-height;
		width: @drawer-width;
		max-width: 100vw; // In case if someone has super small screen
		height: 100vh;
		.boxshadow(3);
		background: @menu-background;
		transform-origin: 0% 0%;
		transform: translate( -110%, 0 ); // Shadow bleeding with 100%
		transition: @transition-transform;
		will-change: transform; // Help with performance

		&-container {
			height: ~'calc(100vh - @{header-height})';
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			transition: @transition-height;

			.mw-header-banner {
				padding: 0 @margin-side @margin-side / 2 @margin-side;
				border-bottom: 1px solid @base-80;
				display: flex;
				flex-direction: column;

				.mw-wiki-logo {
					margin-bottom: @margin-side / 2;
					width: 120px;
					height: 120px;
					display: block;
					background-position: left center;
					background-repeat: no-repeat;
					background-size: contain;
					transition: @transition-height;
					will-change: height;
				}

				.mw-wiki-title {
					opacity: 0;
					height: 0;
					transition: @transition-height, @transition-opacity;
				}
			}

			.mw-nav-links {
				padding: @margin-side / 2 0;
				overflow: auto;
				overscroll-behavior: contain;
				flex-grow: 1;

				#p-navigation-label {
					.mixin-screen-reader-text;
				}
			}

			.mw-user-links {
				#p-personal {
					padding-top: @margin-side / 2;
					border-top: 1px solid @base-80;

					h3 {
						.mixin-screen-reader-text;
					}

					#pt-userpage {
						margin-bottom: @margin-side / 2;

						a {
							justify-content: unset;

							&:after {
								margin: 0;
								width: @icon-box-size;
								height: @icon-box-size;
							}
						}

						span {
							order: 2;
							padding-left: @margin-side;
						}
					}

					#pt-login {
						a {
							.button-blue;

							&:hover,
							&:active,
							&:focus {
								.button-blue-active;
							}
						}
					}

					#pt-logout {
						a {
							.button-red;

							&:hover,
							&:active,
							&:focus {
								.button-red-active;
							}
						}
					}
				}
			}

			.mw-nav-links,
			.mw-user-links {
				a {
					.menu-item-link;
					align-items: center;
					justify-content: space-between;
					padding: @padding-menu-item-big;
					font-size: @ui-menu-text-big;
					font-family: @fonts;

					&:after {
						.resource-loader-list-icon;
						margin-left: @icon-padding;
						opacity: 0.4;
						display: block;
						background-size: contain;
						transition: @transition-opacity-quick;
					}

					&:hover {
						.menu-item-link-hover;

						&:after {
							opacity: 0.6;
						}
					}

					&:active {
						.menu-item-link-active;
					}

					&:focus {
						.menu-item-link-focus;
					}
				}
			}

			h3 {
				margin: @margin-side / 2 0 0 0;
				padding: @margin-side / 2 @margin-side;
				color: @color-item-header;
				font-size: @ui-menu-header;
				font-weight: normal;
				letter-spacing: 1px;
			}

			span {
				display: block;
			}
		}
	}
}

// Sidebar site title
.mw-sidebar-sitename {
	position: fixed;
	visibility: visible;
	top: @header-height;
	left: @margin-side;
	font-size: 11px;
	transform: translateY( 100% ) translateX( -100% ) rotate( -90deg );
	transform-origin: top right;
	transition: @transition-transform, @transition-opacity;
	-webkit-font-smoothing: subpixel-antialiased;

	.mw-wiki-title {
		letter-spacing: 4px;
	}
}

// Nav up stuff
.nav-up {
	~ .mw-sidebar-sitename {
		transform: translateY( -@header-height + @margin-side ) translateX( -100% ) rotate( -90deg );
	}

	.mw-header-menu-drawer-container {
		height: 100vh;

		.mw-header-banner {
			border-color: transparent;

			.mw-wiki-logo {
				margin: 0;
				height: 0;
			}

			.mw-wiki-title {
				margin-top: 20px;
				height: auto;
				opacity: 1;
			}
		}
	}
}

// Only show title when screen height is less than 800px
@media only screen and ( max-height: 800px ) {
	.mw-header-menu-drawer-container {
		.mw-header-banner {
			border-color: transparent;

			.mw-wiki-logo {
				margin: 0;
				height: 0;
			}

			.mw-wiki-title {
				margin-top: 20px;
				height: auto;
				opacity: 1;
			}
		}
	}
}

// Bypass calculation
@mw-sidebar-sitename-max-width: @margin-side * 5 + @page-width;

@media only screen and ( max-width: @mw-sidebar-sitename-max-width ) {
	.mw-sidebar-sitename {
		z-index: -1; // remove link
		opacity: 0; // hide visual
	}
}

/*
 * User icon bar
 */
#p-personal-extra {
	ul {
		height: 56px;
		display: flex;
		align-items: center;
	}
}

/*
 * Hide stuff
 */
#feedlinks,
#pt-anontalk,
#pt-anoncontribs {
	display: none;
}

// RTL tweaks
.rtl {
	.mw-sidebar-sitename {
		left: unset;
		right: @margin-side;
		transform: translateY( 0 ) rotate( 90deg );
		transform-origin: top right;
	}

	.nav-up ~ .mw-sidebar-sitename {
		transform: translateY( @header-height - @margin-side ) rotate( 90deg );
	}

	.mw-header-menu-drawer {
		transform: translate( 100%, 0 );
	}
}