/**
 * @file
 * Mobile menu.
 */

.mobile-menu {
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--modal-background);
  z-index: 10;
}

.header.mobile-menu-expanded .mobile-menu {
  left: 0;
}

.gin--horizontal-toolbar.toolbar-fixed .mobile-menu {
  top: calc(var(--admin-top-offset) + var(--gin-toolbar-secondary-height));
}

.gin--horizontal-toolbar.toolbar-fixed .header.is-fixed .mobile-menu {
  top: var(--admin-top-offset);
}

.mobile-menu__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  padding: var(--spacer-m);
  background-color: var(--color-white);
  border-right: 1px solid var(--border-color);
  transform: translateX(-120%);
  transition: transform var(--animation-speed) ease;
  overflow-y: scroll;
}

@media screen and (min-width: 767px) {
  .mobile-menu__content {
    max-width: 24rem;
  }
}

.header.mobile-menu-expanded .mobile-menu__content {
  transform: translateX(0);
}