.nav {
  &-offcanvas {
    height: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    left: -300px;
    transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    &.open {
      left: 0;
    }
  }
}

.nav-offcanvas-menu {
  width: 100%;
  height: 100%;
  display: flex;
}

.offcanvas-overlay {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgb(0,0,0);
  z-index: 99;
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  visibility: hidden;
  opacity: 0;

  &.on {
    opacity: 0.5;
    visibility: visible;
  }
}
