// RedmineX Theme
// Copyright 2020 RedmineX
// For license, see https://www.redmine-x.com
// Created by Michael Staněk
// Created without vendor prefixes, "AutoPrefixed" by PrePros v5 (https://prepros.io)
 
// Media Queries to Copy / Paste:
 
// 380px
// @include media-breakpoint-up(xxs) {}

// 480px
// @include media-breakpoint-up(xs) {}

// 576px
// @include media-breakpoint-up(sm) {}

// 768px
// @include media-breakpoint-up(md) {}

// 899px
// @include media-breakpoint-up(redmine-mobile) {}

// 992px
// @include media-breakpoint-up(lg) {}

// 1200px
// @include media-breakpoint-up(xl) {}

// 1500px
// @include media-breakpoint-up(hd) {}

// 1900px
// @include media-breakpoint-up(2k) {}

/* ==========================================================================
   Top menu
   ========================================================================== */
 
#top-menu {
	background: $bg-topmenu;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 53px;
	padding: 0;
	border-bottom: 1px solid $border-color-light;
	z-index: $zindex-fixed;
	
	&:before {
		content: '';
		width: 2px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		background: $border-color-light;
	}
	
	.projectino-logo {
		display: block;
		float: left;
		padding: 0.75rem 1rem;
		max-width: 200px;
		
		&:hover {
			cursor: pointer;
		}
	}
	
	.projectino-logo img {
		max-width: 168px;
		height: 28px;
		vertical-align: middle;
	}
	
	&>ul {
		display: flex;
		padding-left: 0.25rem;
		float: left;
		
		li {
			margin: 0 0.25rem;
		}
	}
	
	li {
		list-style: none;
	}
	
	&>ul a {
		padding: 15px;
		display: block;
		position: relative;
		text-align: center;
		color: $text-color;
		
		&:before {
			color: lighten($bg-topmenu-dark, 20%);
			margin-right: 0.5rem;
		}
			
		&:before {
			@include translate-horizontal;
			content: '';
			width: 90%;
			height: 3px;
			position: absolute;
			bottom: 0;
			left: 50%;
			background: transparent;
		}
		
		&:hover {
			color: $link-color !important;
		}
		
		&.selected {
			color: $link-color;
			
			&:before {
				background: $link-color;
			}
		}	
	}
	
	/*
	 * Hamburger
	 */
	 
	#top-menu-hamburger {
		@include box-shadow-container;
		border-radius: 0 0 $border-radius 0;
		background: $link-color;
		z-index: $zindex-tooltip;
		position: fixed;
	    top: 52px;
	    width: 308px;
	    padding: 3rem;
		left: 0;
		display: none;
		max-height: 94vh;
		overflow-y: auto;
		animation: growOut 200ms ease-in-out forwards;
		transform-origin: top left;
		
		@keyframes growOut {
			0% {
			transform: scale(0)
			}
			100% {
			transform: scale(1)
			}
		}
		
		@include media-breakpoint-up(hd) {
			width: 378px;
		}
		
		&.open {
			display: block;
		}
		
		ul a {
			@include rounded;
			padding: 0.5rem 1rem;
			display: block;
			color: $white;
			
			&:hover,
			&.selected {
				background: rgba($black, .125);
			}
		}
		
		ul:nth-of-type(2) {
			
			.logout {
				display: none;
			}
		}

		h2 {
			margin: 1.75em 0 0.25em 0;
			position: relative;
			color: $white;
			
			&:after {
				@include translate-vertical;
			    content: '';
			    width: 90%;
			    height: 1px;
			    background: $white;
			    position: absolute;
			    top: 50%;
			    right: 0;
				z-index: -1;
				opacity: 0.3;
			}
			
			&:first-of-type {
				margin-top: 0;
			}
			
			span {
				background: $link-color;
				padding-right: 0.5rem;
			}
		}
	}
	
	#top-menu-hamburger-trigger {
	    padding: 16px;
	    width: 52px;
	    height: 52px;
		color: $white;
		display: none;
		z-index: $zindex-fixed;
		float: left;
		text-align: center;
		
		@include media-breakpoint-up(redmine-mobile) {
			display: block;
		}
		
		&:before {
			font-size: 20px;
			color: $fa-font-color;
			display: block;
		}
		
		&:hover {
			cursor: pointer;
			background: $link-color;
		}
		
		&:hover,
		&.open {
			
			&:before {
				color: $white;
			}
		}
		
		&.open {
			background: $link-color;
		}
	}
	
	/*
	 * User account
	 */
	
	#account,
	#loggedas {
		float: right;
		z-index: 110;
		background: darken($tetriary, 30%);
		height: 52px;
		
		a:before {
			padding: 1rem;
		}
	}
	
	#loggedas,
	#account ul {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}
	
	#account li, 
	#loggedas a {
		width: 60px;
		height: 52px;
		text-align: center;
		
		&:hover, 
		&:focus, 
		&:active {
			background: $link-color;
		} 
	}
	
	#dark {
		position: absolute;
		top: 0.875rem;
		right: 4rem;
		
		@include media-breakpoint-up(xl) {
			right: 29rem;
		}
		
		a {
			font-size: 0;
			
			&:before {
				content: fa-content($fa-var-moon);
				font-family: "Font Awesome 5 Pro";
				font-size: 14px;
				color: $fa-font-color;
			}
		}
	}
}