@import "../mixins";
@import "../variables";

// menu links at top
.menu-links{
	position: fixed;
	top: 96px;
	bottom: 16px;
	left: 16px;
	right: 16px;
	background: $color1;
	visibility: hidden;
	opacity: 0;
	transform: scale(1.1);
	transition: 0.3s;
	&.menu-visible{
		visibility: visible;
		opacity: 1;
		transform: none;
	}
	@media(min-width: 601px){
		top: 0;
		left: auto;
		right: 0;
		bottom: auto;
		visibility: visible;
		opacity: 1;
		transform: none;
		background: none;
	}
	.links{
		position: relative;
		padding: 16px;
		padding-top: 32px;
		@media(min-width: 801px){
			padding: 0;
			float: right;
			padding-top: 32px;
			padding-right: 64px;
			background: transparent;
		}
		li{
			text-align: center;
			margin-bottom: 16px;
			width: 100%;
			@media(min-width: 601px){
				width: auto;
				float: left;
			}
			#menu-link{
				display: none;
				@media(min-width: 601px){
					display: inline-block;
				}
			}
			a{
				font-family: $sans;
				font-size: 18px;
				padding: 4px 12px;
				display: inline-block;
				color: $white;
				transition: 0.3s;
				width: 100%;
				@media(min-width: 601px){
					font-size: $text-size;
					width: auto;
				}
				&:hover,
				&.menu-visible,
				&:active{
					color: transparentize($white,0.2);
					@media(min-width: 601px){
						color: transparentize($color1,0.0);
					}
				}
			}
			&.cta{
				margin-top: -2px;
				a{
					border-radius: 100px;
					padding-left: 24px;
					padding-right: 24px;
					background: transparentize($white,0.9);
					border: 2px solid $white;
					@media(min-width: 601px){
						margin-left: 12px;
					}
					&:hover{
						border-color: transparentize($color1,0.2);
						background: transparentize($color1,0.9);
					}
				}
			}
		}
	}
}

// Menu icon visible only on small devices
.menu-icon{
	float: right;
	position: fixed;
	z-index: 11;
	height: 48px;
	width: 48px;
	top: 32px;
	right: 16px;
	background: transparentize($white,0.9);
	@media(min-width: 601px){
		// Hide it on medium/large devices
		display: none;
	}
	border-radius: 40px;
	border: 2px solid $white;
	transition: 0.3s;
	&:after{
		display: none;
	}
	&:before{
		position: absolute;
		z-index: 1;
		content: "";
		transform: rotate(0deg);
		background: transparentize($white,0.9);
		top: 4px;
		left: 4px;
		bottom: 4px;
		right: 4px;
		border-radius: 40px;
	}
	.bars{
		display: block;
		margin: auto;
		margin-top: 17px;
		width: 16px;
		.bar1,
		.bar2,
		.bar3{
			display: block;
			content: "";
			height: 1px;
			width: 100%;
			background: $white;
			margin-bottom: 4px;
			-webkit-transition: 0.3s;
			transition: 0.3s;
		}
		.bar2{
		}
		.bar3{
		}
	}
	&.menu-visible{
		.bars{
			.bar1{
				transform: translateY(5px) rotate(45deg);
				transform-origin: center;
			}
			.bar3{
				transform: translateY(-5px) rotate(-45deg);
				transform-origin: center;
			}
			.bar2{
				width: 0px;
			}
			
		}
	}
}
