@keyframes showDrawer {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}

@keyframes showOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.k-drawer {
  animation: showDrawer;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  background: transparent;
  bottom: auto;
  max-height: calc(100vh - 2.5rem);
  /* justify-content: center; */
  top: -100%;
}

.k-drawer > .k-drawer-box {
  align-content: center;
  align-self: top;
  flex-basis: 100%;
  max-height: 100%;
}

@media screen and (min-width: 60em) {
  .k-drawer > .k-drawer-box {
    max-width: 88rem;
  }
}

.k-overlay {
  animation: showOverlay;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  background-color: rgba(0, 0, 0, 0.25);
}

.k-overlay[open][data-type="drawer"] > .k-portal {
  justify-content: center;
}