@import 'src/Components/GlobalStyles/colors';
@import 'src/Components/GlobalStyles/mixins';

.container {
	position: fixed;
	width: 300px;
	height: 100vh;
	z-index: 1;
	top: 0;
	left: 0;
	overflow-x: hidden;
	padding-right: 23px;
	display: flex;
	z-index: 99999;

	@media (max-width: 1000px) {
		padding-right: 0;
	}

	@media (max-width: 600px) {
		right: 0;
	}

	@media (max-height: 550px) {
		direction: rtl;
	}

	.logo {
		max-width: 60%;
		margin: 0 auto;
		display: block;
		height: auto;
	}

	.navWrapper {
		background-color: $light-grey;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
		z-index: 2;
		direction: ltr;

		@media (max-width: 600px) {
			width: 100%;
		}

		&.hidden {
			padding: 0 13px;

			.header p,
			.about h4,
			.navbar .childItem {
				visibility: hidden;
				width: 0;
				white-space: nowrap;

				@media (max-width: 1000px) {
					display: none;
				}
			}

			.navbar {
				width: auto;
				padding: 0;
				align-items: start;
			}

			.navbar a h4,
			.database h4 {
				display: none;
			}

			.navbar,
			.insights a {
				align-self: center;

				@media (max-width: 1000px) {
					ul {
						margin-bottom: 0;

						li {
							display: flex;
							justify-content: center;
							margin-bottom: 30px;
						}

						svg {
							margin-right: 0;
						}
					}
				}
			}

			footer {
				div svg {
					margin-right: 0 !important;
				}
			}

			@media (max-width: 1000px) {
				width: 70%;
				padding: 0;
			}

			@media (max-width: 600px) {
				width: 100px;
				padding: 0;
			}
		}

		.header {
			text-align: center;
			font-size: 12px;
			color: $dark;

			p {
				margin: 22px 0 58px;

				@media (max-width: 600px) {
					font-size: 16px;
				}

				@media (max-height: 700px) {
					margin: 12px 0 38px;
				}
			}

			.logo {
				display: flex;
				justify-content: center;
				margin-top: 22px;

				@media (max-width: 1000px) {
					transform: scale(0.9);
					margin-bottom: 30px;
				}

				@media (max-width: 600px) {
					transform: scale(0.7);
					margin-bottom: 30px;
				}

				&:hover {
					cursor: pointer;
				}

				img {
					display: block;
					width: 80px;
				}
			}
		}

		.about {
			display: flex;
			align-items: end;
			cursor: pointer;
			height: 100%;
			justify-content: center;
			margin-bottom: 40px;
			background-color: $light-grey;

			@media (max-width: 900px) {
				height: 10vh;
			}

			&:hover {
				color: var(--primary-color);
			}

			div {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				svg {
					margin-right: 12px;
				}

				h4 {
					font-size: 1.125em;
					margin-bottom: 0;
				}
			}
		}

		.navbar {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: start;
			// width: 245px;
			width: auto;
			padding: 0 30px 0 36px;
			background-color: $light-grey;

			@media (max-width: 600px) {
				margin: 0 auto;
			}

			ul {
				padding-left: 0;

				@media (max-height: 700px) {
					margin-bottom: 15px;
				}

				@media (max-height: 630px) {
					margin-bottom: 10px;
				}

				.iconNavLink {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;

					svg {
						margin-top: -10px;
					}
				}

				h4 {
					font-size: 18px;
					font-weight: 600;
				}

				li,
				.about {
					list-style-type: none;
					font-size: 16px;
					margin-bottom: 18px;
					display: flex;
					align-items: center;
					cursor: pointer;

					&:hover {
						color: var(--primary-color);
					}

					svg {
						display: block;
						margin-right: 12px;
						filter: brightness(100%) hue-rotate(90deg) brightness(50%);
					}

					@media (max-height: 700px) {
						margin-bottom: 15px;
					}

					@media (max-height: 630px) {
						margin-bottom: 10px;
					}
				}

				li {
					padding-left: 33px;

					a {
						display: flex;
						align-items: center;

						&.active {
							color: var(--primary-color) !important;
							font-weight: 600;

							// svg path {
							//   fill: $primary  !important;
							// }
						}
					}
				}

				li.insights,
				li.database,
				li.tools {
					padding-left: 0;
				}

				.insights {
					margin-bottom: 30px;

					@media (max-height: 700px) {
						margin-bottom: 20px;
					}

					@media (max-height: 630px) {
						margin-bottom: 10px;
					}
				}
			}
		}
	}

	.closeNavButton,
	.openNavButton {
		@include Button;

		text-align: right;
		padding: 11px 12px 11px 10px;
		background-color: $light-grey;
		height: 50px;
		margin-top: 50px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;

		@media (max-height: 550px) {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 9999;
		}
	}

	.closeNavButton {
		@media (max-width: 600px) {
			margin-left: -40px;
			z-index: 11111;
			background-color: lighten($light-grey, 5);
			border-radius: 10px;
		}
	}

	a {
		text-decoration: none;
		color: $dark;

		&:hover {
			color: var(--primary-color);
		}
	}

	.closedButton {
		transition: all 0.3s ease-in-out;
		transform: rotateZ(-180deg);
	}

	.openButton {
		transition: all 0.3s ease-in-out;
		padding-right: 1px;
	}
}

.popupMessage {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	box-shadow: 0 3px 13px 0 $dropShadow;
	z-index: 9999;
	padding: 50px 100px;
	margin-left: 100px;

	&__financials {
		display: inline-block;
		color: var(--primary-color);
		font-size: 20px;
	}

	@media (max-width: 1000px) {
		margin-left: 0;
	}
}

.logoStyle {
	margin: 45px;

	&.hidden {
		margin: 45px 0;
	}

	svg {
		width: 100px;
	}
}