@keyframes slide-in {
  from {
    right: -100vw;
  }

  to {
    right: 0;
  }
}

.modal {
  position: fixed;
  top: calc(
    var(--main-menu-mobile-height) + var(--sitewide-alert-height) + 1px
  );
  right: auto;
  bottom: 0;
  width: 100%;
  background-color: var(--Base-Surface-Primary-light-Normal);
  z-index: var(--menu-overlay-z-index);
}

.modal[data-entering] {
  animation: slide-in 0.3s;
}
.modal[data-exiting] {
  animation: slide-in 0.3s reverse;
}

.dialog {
  height: 100%;
  overflow-y: auto;
}

@media screen and (min-width: 768px) {
  .myPagesMobileMenu,
  .modal {
    display: none;
  }
}