@keyframes show {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.6;
  }
}

.mealz-shadow-overlay {
  position: fixed;
  background: var(--mealz-ds-color-neutral-black, #0F191F);
  animation: show 0.3s ease-in-out forwards;
  opacity: 0.6;
  z-index: 6000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

.mealz-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6002;
  background-color: var(--mealz-ds-color-neutral-white, #fff);
  padding: 24px;
  border-radius: 16px;

  @media (max-width: 600px) {
    bottom: 0;
    top: unset;
    left: 0;
    right: 0;
    border-radius: 16px 16px 0 0;
    transform: none;
  }

  .mealz-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    > *:not(:last-child) {
      margin-right: 8px;
    }
  }

  .mealz-modal__content-container {
    padding-top: 24px;
  }
}