/* Menu Buttons */
.mobile-menu-button {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

/* Menu Buttons Icons */
.mobile-menu-button svg {
    width: 32px;
    height: 32px;
}

/* Open */
.mobile-menu-open svg {
    fill: var(--TIP_darkblue);
}

/* Close */
.mobile-menu-close svg {
    fill: var(--white);
}

/* Active menu */
.menu-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
}

/* Mobile menu link */
#mobile-nav a {
  border-bottom: 1px solid #eee;
}

#mobile-nav .menu-item:focus-within a,
#mobile-nav .menu-item:hover a {
  padding-left: 12px;
}

/* Menu */
#mobile-menu-main {
  position: fixed;
  width: 270px;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
  z-index: 999999;
  transform: translate3d(-100%, 0, 1px);
  transition: transform 0.3s ease;
  backface-visibility: hidden;
}

/* Nav Overaly */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 120vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99999;
}

.no-scroll {
  overflow: hidden;
  height: 100%;
}