.offcanvas-menu-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--#{$variable-prefix}background-white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-105%);
  transition: .3s all ease;
  .offcanvas-menu-header{
    padding: 15px 18px;
    .offcanvas-menu-close{
      display: inline-flex;
      svg{
        width: 12px;
        height: 12px;
      }
    } 
    .navbar-brand{
      padding: 0;
      margin: 0;
      line-height: 0;
      img{
        max-width: 67px;
        height: 20px;
      }
    }
  }
  .offcanvas-user-profile{
    padding: 10px 20px;
    background: var(--#{$variable-prefix}offcanvas-menu-profile-bg);
    .profile-title{
      font-size: 1rem;
      font-weight: 700;
      color: var(--#{$variable-prefix}dark-text-color);
    }
  }
  .btn-explore{
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
    margin: 10px 0 0;
    color: var(--#{$variable-prefix}toolbox-blue);
  }
  .btn-logo-link{
    padding: 15px 0;
    margin: 10px 0 0;
  }
}


.menu-list-wrapper{
  padding: 0 20px;
  ul{
    list-style: none;
    margin: 0;
    padding: 0;
    li{
      a{
        display: block;
        padding: 6px 0;
        margin: 5px 0;
        font-size: .75rem;
        font-weight: 700;
        color: var(--#{$variable-prefix}dark-text-color);
        text-decoration: none;
      }
    }
  }
}

.menu-active{
  overflow: hidden;
  .offcanvas-menu-wrapper{
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(0);
  }
}