@import 'variables';
@import '_mixins';

header#header {
	.header-data {
		// position: relative;
		height: 54px;
	}
	#header-nav {
		nav#header-mine-menu {
			a.disabled {
				cursor: default;
			}

			i.arrow {
				line-height: 0;

				@include respond-below(md) {
					position: absolute;
					right: 0;
					width: 30px;
					height: 30px;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 1;
					transition: all 250ms ease-in-out;

					img {
						width: 14px;
					}
				}
			}

			@include respond-above(md) {
				.submenu {
					position: absolute;
					left: 0;
					right: 0;
					top: calc(100% - 25px);
					background: $cWhite;
					border-bottom: 1px solid #dcdcdc;
					box-shadow: 0 1.5px 4px 0 rgba(0, 0, 0, 0.05);
					padding-top: 25px;
					padding-bottom: 25px;

					opacity: 0;
					visibility: hidden;

					.container {
						position: relative;
					}
				}

				ul {
					list-style: none;

					&:not(.container) {
						padding: 0;
						margin: 0;
					}

					&.lvl-1 {
						display: flex;
						flex-direction: row;
						column-gap: 40px;

						> li {
							height: 54px;
							align-content: center;

							&:hover {
								> .submenu {
									opacity: 1;
									visibility: visible;
								}
							}
							> a {
								display: flex;
								flex-direction: row;
								align-items: center;
								column-gap: 5px;

								span {
									color: $cTxtBlack;
									font-size: 15px;
									font-family: $font3;
									font-weight: 700;
									letter-spacing: 1px;
									text-transform: uppercase;
									line-height: 1;
									margin-bottom: -4px;

									@include respond-below(lg) {
										font-size: 12px;
									}
								}
							}
						}

						@include respond-below(xl) {
							column-gap: 20px;
						}
						@include respond-below(lg) {
							column-gap: 15px;
						}
					}
					&.lvl-2 {
						width: 150px;

						> li {
							&:not(:last-child) {
								margin-bottom: 20px;
							}

							&:hover {
								> a {
									span {
										text-shadow: 0px 0.3px 0px $cTxtBlack,
											0px -0.3px 0px $cTxtBlack, 0.3px 0px 0px $cTxtBlack,
											-0.3px 0px 0px $cTxtBlack, -0.3px -0.3px 0px $cTxtBlack,
											0.3px 0.3px 0px $cTxtBlack, 0.3px -0.3px 0px $cTxtBlack,
											-0.3px 0.3px 0px $cTxtBlack, -0.3px 0.3px 0px $cTxtBlack;

										&::before {
											width: 100%;
											visibility: visible;
										}
									}

									img {
										width: 11px;
									}
								}

								.lvl-3 {
									opacity: 1;
									visibility: visible;
								}
							}

							> a {
								position: relative;
								width: 100%;
								display: inline-flex;
								flex-direction: row;
								align-items: center;
								column-gap: 5px;
								text-decoration: none;
								transition: all 250ms ease-in-out;

								span {
									display: inline-block;
									position: relative;
									color: $cTxtBlack;
									font-size: 16px;
									font-family: $font3;
									font-weight: 500;
									line-height: 1;
									transition: all 250ms ease-in-out;

									&::before {
										content: '';
										position: absolute;
										bottom: -10px;
										left: 0;
										width: 0;
										height: 3px;
										background: $cTxtBlack;
										visibility: hidden;
										transition: all 250ms ease-in-out;
									}
								}

								img {
									transform: rotate(-90deg);
									width: 0;
									transition: all 250ms ease-in-out;
								}
							}
						}
					}
					&.lvl-3 {
						position: absolute;
						// left: calc(150px + 15px + 60px);
						left: 150px;
						top: 0;
						right: 0;
						bottom: 0;
						transition: all 250ms ease-in-out;
						padding-left: 75px;

						opacity: 0;
						visibility: hidden;

						&.lvl-3-big {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							column-gap: 60px;

							> li,
							> .lvl-3-col > li {
								> a {
									text-decoration: none;

									span {
										color: $cTxtBlack;
										font-size: 16px;
										font-family: $font3;
										font-weight: 700;
										line-height: 1;
									}

									.arrow {
										display: none;
									}
								}
							}
							> .lvl-3-col {
								display: flex;
								flex-direction: column;
								row-gap: 30px;
							}

							@include respond-below(lg) {
								column-gap: 40px;
							}
						}

						&:not(.lvl-3-big) {
							> li {
								&:not(:last-child) {
									margin-bottom: 20px;

									@include respond-below(lg) {
										margin-bottom: 10px;
									}
								}
								> a {
									text-decoration: none;

									span {
										color: $cTxtBlack;
										font-size: 16px;
										font-family: $font3;
										font-weight: 300;
										line-height: 1;

										@include respond-below(lg) {
											font-size: 14px;
										}
									}
								}
							}
						}

						@include respond-below(lg) {
							padding-left: 50px;
						}
					}
					&.lvl-4 {
						margin-top: 20px;
						> li {
							&:not(:last-child) {
								margin-bottom: 20px;

								@include respond-below(lg) {
									margin-bottom: 10px;
								}
							}
							> a {
								text-decoration: none;
								span {
									color: $cTxtBlack;
									font-size: 16px;
									font-family: $font3;
									font-weight: 300;
									line-height: 1;

									@include respond-below(lg) {
										font-size: 14px;
									}
								}
							}
						}
					}
				}
			}

			@include respond-below(md) {
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				height: 0;
				overflow: hidden;
				transition: all 250ms ease-in-out;

				background: rgba(255, 255, 255, 0.5);
				backdrop-filter: blur(10px);

				&.visible {
					padding: 10px 0 50px;
					height: calc(100dvh - 110px) !important;
					overflow: auto;
				}

				ul {
					padding: 0;
					margin: 0;
					list-style: none;

					&.lvl-1 {
						max-width: 540px;
						width: 100%;
						padding-right: 15px;
						padding-left: 15px;
						margin-right: auto;
						margin-left: auto;

						> li {
							&:not(:last-child) {
								border-bottom: 1px solid rgba(0, 0, 0, 0.1);
							}

							> a {
								padding-top: 10px;
								padding-bottom: 10px;
								font-weight: 600;
							}

							ul {
								padding-left: 15px;
								border-left: 1px solid rgba(17, 14, 12, 0.1);
							}
						}
					}

					&.lvl-2 {
						> li {
							> a {
								padding-top: 10px;
								padding-bottom: 10px;
							}
						}
					}

					&.lvl-3 {
						> .lvl-3-col {
							> li {
								> a {
									padding-top: 10px;
									padding-bottom: 10px;

									br {
										display: none;
									}
								}
							}
						}
						> li {
							> a {
								padding-top: 10px;
								padding-bottom: 10px;
							}
						}
					}

					&.lvl-4 {
						> li {
							> a {
								padding-top: 5px;
								padding-bottom: 5px;
							}
						}
					}

					li {
						&.active {
							> a {
								.arrow {
									transform: scale(-1);
								}
							}
						}

						&.parent {
							> a {
								font-weight: 600;
							}
						}

						a {
							color: $cTxtBlack;
							position: relative;
							padding-right: 30px;

							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;

							span {
								font-size: 16px;
							}

							&:hover {
								color: $cTxtBlack;
							}
						}
					}

					&:not(.lvl-1) {
						display: none;
					}
				}

				.container {
					padding: 0;
					margin: 0;
					max-width: unset;
				}
			}
		}

		#header-mine-menu-btn {
			position: relative;
			height: 20px;
			width: 33px;
			// position: fixed;
			// bottom: 10px;
			// right: 10px;
			// color: #fff;
			// background: #000;
			display: none;
			z-index: 9999;
			// line-height: 50px;
			// text-align: center;
			// font-size: 25px;
			cursor: pointer;
			// @include border-radius(50%);
			overflow: hidden;

			&.active {
				&::before {
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%) rotate(45deg);
				}
				&::after {
					bottom: 50%;
					left: 50%;
					transform: translate(-50%, -50%) rotate(-45deg);
				}

				span.line {
					transform: translateX(calc(100% + 2px));
				}
			}

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 1px;
				background: #000;
				transition: all 250ms ease-in-out;
			}
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 1px;
				background: #000;
				transition: all 250ms ease-in-out;
			}

			span.line {
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				height: 1px;
				background: #000;
				transition: all 250ms ease-in-out;
			}

			@include respond-below(md) {
				display: block;
			}
		}
	}
}