/* Offcanvas
--------------------------------------------- */
.offcanvas {
  height: 100%;
  max-width: var(--offcanvas-width);
  position: fixed;
  right: 0;
  top: 0;
  transition: visibility var(--transition-duration) ease-in-out;
  visibility: hidden;
  width: 100%;
  z-index: var(--z-index);
}
.offcanvas.is-active {
  transition: none;
  visibility: visible;
}

.admin-bar .offcanvas {
  top: 32px;
}

.offcanvas__panel {
  height: 100vh;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(100%, 0);
  transition: transform var(--transition-duration);
  width: 100%;
  -webkit-overflow-scrolling: touch;
  background-color: #ddd;
  z-index: var(--z-index);
}

.offcanvas__header {
  display: flex;
  padding-block: 1rem;
}

.offcanvas__close {
  --hamburger-bar-size: 24px;
  cursor: pointer;
}

.offcanvas__content {
  background: #fff;
  height: 100%;
  overflow-y: scroll;
  padding: 2vmin 4vmin;
}

.offcanvas.offcanvas--has-overlay {
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  max-width: none;
}
.offcanvas.offcanvas--has-overlay .offcanvas__panel {
  cursor: auto;
  max-width: var(--offcanvas-width);
}
.offcanvas.offcanvas--has-overlay.is-active {
  background: var(--offcanvas-overlay-color, rgba(0, 0, 0, 0.6));
  transition: background-color var(--transition-duration);
}

.offcanvas__overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.offcanvas.is-active .offcanvas__panel {
  transform: translate(0, 0);
}

.offcanvas.offcanvas--left {
  left: 0;
  right: auto;
}

.offcanvas--left .offcanvas__panel {
  left: 0;
  right: auto;
}
.offcanvas--left:not(.is-active) .offcanvas__panel {
  transform: translate(-100%, 0);
}
.offcanvas--left .offcanvas__close {
  order: 2;
}

.offcanvas__nav .menu-item {
  border-bottom: 1px solid #ddd;
}
.offcanvas__nav .sub-menu > .menu-item {
  border-style: dotted;
}
.offcanvas__nav .sub-menu > .menu-item:last-child {
  border: 0;
}
@media (max-width: 782px) {
  .admin-bar .offcanvas {
    top: 46px;
  }
}