@use "../utilities" as *;

/* !START: hamburger CSS */

.hamburger {
	&-area {
		position: fixed;
		inset-inline-end: -490px;
		top: 15px;
		width: 450px;
		height: calc(100% - 30px);
		box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
		transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
		transition-duration: 1s;
		z-index: 9999;
		-ms-overflow-style: none;
		scrollbar-width: none;
		overflow-y: scroll;
		border-radius: 12px;
		&::-webkit-scrollbar {
			display: none;
		}
		&.opened {
			inset-inline-end: 15px;
			@media #{$sm, $xs} {
				inset-inline-end: 0;
			}
		}
		@media #{$sm, $xs} {
			top: 0;
			height: 100%;
			border-start-end-radius: 0;
			border-end-end-radius: 0;
		}
		@media #{$xs} {
			width: 320px;
		}
	}
	&_bg {
		background-color: var(--tj-color-theme-dark);
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		inset-inline-start: 0;
		z-index: -1;
		border-start-start-radius: 12px;
		border-end-start-radius: 12px;
	}
	&_wrapper {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		padding: 40px;
		overflow: auto;
		height: 100%;
		&::before {
			content: "";
			position: absolute;
			top: 3%;
			inset-inline-end: 3%;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background: var(--tj-color-theme-primary);
			-webkit-filter: blur(50px);
			filter: blur(50px);
			opacity: 0.26;
			z-index: -1;
			backdrop-filter: blur(10px);
		}
		@media #{$xs} {
			padding: 40px 20px;
		}
	}
	&_top {
		margin-bottom: 30px;
	}
	&_close {
		&_btn {
			display: inline-block;
			font-size: 35px;
			line-height: 1;
			color: var(--tj-color-common-white);
			@media #{$xs} {
				font-size: 30px;
			}
			&:hover {
				@include transform(rotate(90deg));
				color: var(--tj-color-theme-bg);
			}
		}
	}
	&_search {
		position: relative;
		margin-bottom: 30px;
		select,
		.nice-select,
		input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
		input {
			width: 100%;
			height: 60px;
			line-height: 60px;
			padding: 0 40px 0 16px;
			background: var(--tj-color-common-white);
			border: none;
			outline: none;
			font-size: 18px;
			font-family: var(--tj-ff-body);
			color: var(--tj-color-text-body);
			border: 1px solid var(--tj-color-border-1);
			border-radius: 10px;
			&::placeholder {
				transition: all 0.3s;
				color: var(--tj-color-text-body);
			}
		}
		button {
			position: absolute;
			height: 58px;
			width: 58px;
			top: 50%;
			inset-inline-end: 0;
			font-size: 24px;
			color: var(--tj-color-theme-dark);
			transform: translateY(-50%);
			border-inline-start: 1px solid var(--tj-color-border-1);
		}
	}
	&_menu {
		.mean-container {
			.mean-bar {
				background: transparent;
				box-sizing: border-box;
				margin-bottom: 30px;
				* {
					box-sizing: border-box;
				}
			}
		}
		.mean-nav {
			background: transparent;
			margin-top: 0;
			overflow: hidden;
			> ul {
				display: block !important;
				> li:first-child {
					> a {
						border-top: none;
					}
				}
			}
			ul {
				li {
					position: relative;
					a {
						color: var(--tj-color-common-white);
						width: 100%;
						font-size: 16px;
						line-height: 1;
						letter-spacing: 0.5px;
						font-family: var(--tj-ff-body);
						font-weight: var(--tj-fw-medium);
						text-transform: capitalize;
						padding: 18px 0;
						border-top: none;
						border-bottom: 1px solid rgba(255, 255, 255, 0.1);
						transition: all 0.4s ease-in-out 0s;
						&:hover {
							color: var(--tj-color-theme-primary);
						}
					}
					a.mean-expand {
						padding: 0;
						width: 30px;
						height: 30px;
						text-align: center;
						line-height: 30px;
						position: absolute;
						inset-inline-end: 0;
						top: 12px;
						transition: all 0.4s ease-in-out 0s;
						&:hover {
							color: var(--tj-color-common-white);
						}
						i {
							font-size: 15px;
						}
						&.mean-clicked {
							color: var(--tj-color-theme-primary);
							transform: rotate(180deg);
							& i {
								transform: rotate(180deg);
							}
						}
					}

					& .sub-menu {
						li {
							padding-inline-start: 25px;
							position: relative;

							a {
								width: 100%;
								padding: 18px 0;
							}
							a.mean-expand {
								padding: 0;
								width: 30px;
							}
						}
					}

					&.dropdown-opened {
						> a {
							color: var(--tj-color-theme-primary);
						}
					}
				}
			}
		}
	}
}

.tj-offcanvas-area {
	position: fixed;
	inset-inline-end: -490px;
	top: 15px;
	width: 470px;
	height: calc(100% - 30px);
	box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
	transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	transition-duration: 0.3s;
	z-index: 9999;
	-ms-overflow-style: none;
	scrollbar-width: none;
	overflow-y: scroll;
	border-start-start-radius: 12px;
	border-end-start-radius: 12px;
	border-radius: 12px;
	&::-webkit-scrollbar {
		display: none;
	}
	&.opened {
		inset-inline-end: 15px;
	}
}

.offcanvas-text {
	margin-bottom: 40px;
	p {
		color: var(--tj-color-text-body-2);
		margin-bottom: 0;
	}
}
.hamburger-search-area {
	margin-bottom: 45px;
	@media #{$md, $sm, $xs} {
		margin-bottom: 30px;
	}
}
.hamburger-title {
	color: var(--tj-color-common-white);
	font-size: 22px;
	line-height: 1;
	margin-bottom: 25px;
	position: relative;
	z-index: 1;
}

.hamburger-infos {
	margin-bottom: 45px;
	.contact-info {
		.contact-item {
			padding: 15px 0 10px 0;
			&:first-child {
				padding-top: 0;
			}
		}
	}
}

.hamburger_logo {
	.mobile_logo {
		display: inline-block;
		max-width: 136px;
		width: 100%;
	}
}

.menu-bar {
	button {
		height: 25px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		transform-origin: center center;
		transform: rotate(0deg);
		cursor: pointer;
		transition: transform 300ms ease;
		span {
			height: 3px;
			width: 35px;
			display: block;
			background: var(--tj-color-common-white);
			cursor: pointer;
			@include transition(all 0.3s ease-in-out 0s);
			margin-inline-start: auto;
			&:nth-child(2) {
				width: 40px;
				transition-delay: 200ms;
			}
			&:nth-child(3) {
				width: 30px;
			}
			&:nth-child(4) {
				position: absolute;
				top: -8px;
				inset-inline-start: 50%;
				transform: translateX(-50%);
				display: block;
				width: 3px;
				height: 0;
				transition: height 400ms;
			}
		}
	}
	&.style-2 {
		button {
			span {
				background: var(--tj-color-heading-primary);
			}
		}
	}
	&.menu-bar-toggeled {
		button {
			transform: rotate(45deg);
			transition-delay: 400ms;
			span {
				&:nth-child(1) {
					width: 0;
				}
				&:nth-child(3) {
					width: 0;
				}
				&:nth-child(4) {
					height: 40px;
					transition: height 200ms ease;
					transition-delay: 200ms;
				}
			}
		}
	}
	@media #{$md, $sm, $xs} {
		margin-inline-start: 0;
	}
}

.body-overlay {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 9999;
	inset-inline-start: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-out 0s;
	backdrop-filter: blur(10px);
	&.opened {
		opacity: 1;
		visibility: visible;
	}
}
/* !END: hamburger CSS */