/* =========================================================
   V7 MASTER Mobile Shell Behavior 1.0
   Functional states only. No visual design values.
   ========================================================= */

.zb-mobile-shell-header,
.zb-mobile-shell-drawer,
.zb-mobile-shell-overlay {
  display: none;
}

@media (max-width: 900px) {
  body.zb-menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .zb-mobile-shell-header {
    display: flex !important;
  }

  .zb-mobile-shell-button {
    display: flex !important;
  }

  .zb-mobile-shell-button span {
    transition: transform .2s ease, opacity .2s ease !important;
  }

  body.zb-menu-open .zb-mobile-shell-button span:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }

  body.zb-menu-open .zb-mobile-shell-button span:nth-child(2) {
    opacity: 0 !important;
  }

  body.zb-menu-open .zb-mobile-shell-button span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  .zb-mobile-shell-overlay {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .22s ease, visibility .22s ease !important;
  }

  body.zb-menu-open .zb-mobile-shell-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .zb-mobile-shell-drawer {
    display: flex !important;
    transform: translate3d(-105%,0,0) !important;
    transition: transform .24s cubic-bezier(.22,.61,.36,1) !important;
  }

  body.zb-menu-open .zb-mobile-shell-drawer {
    transform: translate3d(0,0,0) !important;
  }

  body > .app-shell > .sidebar,
  body > .app > .sidebar,
  .sidebar:not(.zb-mobile-shell-drawer),
  .v7-sidebar,
  .desktop-sidebar {
    display: none !important;
  }
}