@use '../../utils' as *;

/*----------------------------------------*/
/* Main menu css
/*----------------------------------------*/

// Bar icon
.bar-icon {
	width: 24px;
	height: 24px;
	background: rgb(255 255 255);
	border-radius: 50%;
	@include inline-flex();
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(7, 37, 68, 0.1);

	@media #{$xs,$sm,$md,$lg} {
		width: 32px;
		height: 32px;
		@include border-radius(8px);
		background-color: var(--td-primary)
	}
}

// Header menu
.td-main-menu {
	nav {

		li {
			position: relative;
			list-style: none;
		}

		>ul {
			@include inline-flex();
			gap: 16px;

			@media #{$xl} {
				gap: 8px
			}

			@media #{$lg} {
				gap: 3px;
			}

			&>li {
				>a {
					position: relative;
					font-size: 14px;
					line-height: 1;
					padding: 23px 5px;
					display: inline-block;
					font-weight: 700;
					color: var(--td-heading);
					&.active {
						color: var(--td-primary);
					}
				}

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

					>ul {
						opacity: 1;
						pointer-events: all;
					}
				}

				&:has(ul) {
					&>a {
						&::after {
							content: "\f107";
							margin-inline-start: 3px;
							position: relative;
							top: 0px;
							display: inline-block;
							width: 18px;
							height: 18px;
							--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0'/%3E%3C/svg%3E");
							background-color: currentColor;
							-webkit-mask-image: var(--svg);
							mask-image: var(--svg);
							-webkit-mask-repeat: no-repeat;
							mask-repeat: no-repeat;
							-webkit-mask-size: 100% 100%;
							mask-size: 100% 100%;
							color: rgba($black, $alpha: 0.5);
						}
					}
				}

				&:has(li.menu-has-children) {
					.dp-menu {
						border-radius: 24px;

						&.active {
							border-radius: 24px 0 0px 24px;

							@include rtl {
								border-radius: 0 24px 24px 0;
							}
						}
					}
				}
			}
		}
	}
}

.menu-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: rem(7);
	justify-content: center;

	span {
		display: block;
		width: rem(26);
		height: rem(2);
		background-color: #000;
		transition: all 0.3s ease-in-out;
	}

	&.active {
		span {
			&:nth-child(1) {
				transform: rotate(45deg) translate(rem(6), rem(6));
			}

			&:nth-child(2) {
				opacity: 0;
			}

			&:nth-child(3) {
				transform: rotate(-45deg) translate(rem(6), rem(-6));
			}
		}
	}
}