@use '../utils' as *;

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

.td-main-menu {
    >ul {
      @include inline-flex();
      gap: 18px;
      >li {
        &:not(:last-child) {
          margin-inline-end: 15px;
          @media #{$lg} {
            margin-inline-end: 0px;
          } 
        }
		&.active {
			> a {
				color: var(--td-tertiary);;
			}
		}
        >a {
          position: relative;
        }
        &:last-child {
          a {
            &::before {
              display: none;
            }
          }
        }
        &:hover {
          >a {
            color: var(--td-tertiary);;
          }
          >ul {
            opacity: 1;
            pointer-events: all;
            inset-inline-start: 0px;
            &.dp-menu li {
              &:hover {
                >ul {
                  opacity: 1;
                  pointer-events: all;
                  inset-inline-start: 100%;
                }
              }
            }
          }
        }
      }
    }
    li {
      position: relative;
      list-style: none;
      a {
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
        color: var(--td-text-primary);
        padding: 28px 5px;
        display: inline-block;
        letter-spacing: 0.2px;
      }
    }
}
.menu-icon {
  width: 30px;
  height: 20px;
  position: relative;
  display: block;
  &::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    top: 0;
    inset-inline-start: 0;
    background: var(--td-white);
    transition: all 0.3s;
  }
  &::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    bottom: 0;
    inset-inline-start: 0;
    background: var(--td-white);
    transition: all 0.3s;
  }
  span {
    position: absolute;
    content: "";
    width: 18px;
    height: 1px;
    top: 50%;
    inset-inline-end: 0;
    transition: all 0.3s;
    background-color: var(--td-white);
  }
  &:hover {
    &::after,
    &::before,
    span {
      background-color: var(--td-tertiary);;
    }
  }
}

/*----------------------------------------*/
/*  Meanmenu css
/*----------------------------------------*/
.mean-container{
	margin-bottom: 35px;
	& a{
		&.meanmenu-reveal{
			width: 22px;
			height: 22px;
			padding: 13px 13px 11px 13px;
			position: absolute;
			top: 0;
			inset-inline-end: 0;
			cursor: pointer;
			color: var(--td-white);
			text-decoration: none;
			font-size: 16px;
			text-indent: -9999em;
			line-height: 22px;
			font-size: 1px;
			font-weight: 700;
			display: none !important;
			& span{
				display: block;
				background: var(--td-white);
				height: 3px;
				margin-top: 3px;
			}
		}
	}
	& .mean-push{
		float: left;
		width: 100%;
		padding: 0;
		margin: 0;
		clear: both;
	}
	& .mean-nav{
		background: none;
		margin-top: 0;
		float: left;
		width: 100%;
		& .wrapper{
			width: 100%;
			padding: 0;
			margin: 0;
		}
		& > ul{
			padding: 0;
			margin: 0;
			width: 100%;
			list-style-type: none;
			display: block !important;
			& > li{
				&:first-child{
					& > a{
						border-top: 0 !important;
					}
				}
			}
		}
		& ul{
			padding: 0;
			margin: 0;
			width: 100%;
			list-style-type: none;
			& li{
				position: relative;
				float: left;
				width: 100%;
				// if dropdown opened
				&.dropdown-opened{
					& > a,
					& > span{
						color: var(--td-white);

						&.mean-expand.mean-clicked{
							background: var(--td-white);
							color: var(--td-white);
							border-color: transparent;
							& i{
								color: var(--td-white);
								transform: rotate(90deg);
							}
						}
					}
				}
				&.mean-last{
					border-bottom: none;
					margin-bottom: 0;
				}
				& > a{
					&.mean-expand{
						& i{
							display: inline-block;
							transition: .3s;
						}
					}
					& > i{
						display: none;
					}
				}
				& a,
				& span{
					display: block;
					float: left;
					width: 90%;
					padding: 10px 5%;
					margin: 0;
					text-align: left;
					text-decoration: none;
					width: 100%;
					padding: 10px 0;
					color: rgba($white, $alpha: 0.7);
					border-top: 1px solid rgba($white, $alpha: 0.1) !important;
					font-size: 16px;
					line-height: 1.5;
					font-weight: 500;
					&:hover{
						color: var(--td-tertiary);;
						& i{
							color: var(--td-tertiary);;
						}
					}
					&.mean-expand{
						text-align: center;
						position: absolute;
						inset-inline-end: 0;
						top: 0;
						z-index: 2;
						font-weight: 700;
						background: transparent;
						border: none !important;
						font-size: 14px;
						margin-top: 5px;
						padding: 0 !important;
                        border: 1px solid rgba(255, 255, 255, 0.079) !important;
						height: 30px;
						width: 30px;
                        color: rgba($black, $alpha: 0.6);
						line-height: 30px;
						top: 0;
						font-weight: 400;
						&:hover{
							background: var(--td-white);
							color: var(--td-white);
							border-color: var(--td-white);
							& i{
								color: var(--td-white);
							}
						}
						&.mean-clicked{
							color: var(--td-white);
							&:hover{
								background: var(--td-white);
								color: var(--td-white);
								border-color: var(--td-white);
							}
						}
					}
				}
				& li{
					& a{
						width: 90%;
						padding: 10px 7%;
						text-shadow: none !important;
						visibility: visible;
					}
					& li{
						& a{
							width: 80%;
							padding: 10px 12%;
						}
						& li{
							& a{
								width: 70%;
								padding: 10px 17%;
							}
							& li{
								& a{
									width: 60%;
									padding: 10px 20%;
								}
							}
						}
					}
				}
			}
		}
	}
	& .mean-bar{
		padding: 0;
		min-height: auto;
		background: none;
		float: left;
		width: 100%;
		position: relative;
		padding: 4px 0;
		min-height: 42px;
		z-index: 999999;
	}
	& .mean-bar,
	& .mean-bar *{
		/* Fix for box sizing on Foundation Framework etc. */
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}
}