.popup-overlay[data-message-overlay="added"] {
  align-items: flex-start;
  justify-content: flex-end;
  background-color: transparent;
  padding-top: calc(clamp(4.5rem, 4rem + 2.5vw, 7rem) + 12px);
  padding-right: 16px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.popup-overlay[data-message-overlay="added"].is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.popup-overlay[data-message-overlay="added"] .checkout-popup--added {
  max-width: fit-content;
  min-height: auto;

  border-radius: 1rem;
  padding: 1rem 1.125rem;
  transform: translateX(120%);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
  pointer-events: auto;
  will-change: transform, opacity;
}

.popup-overlay[data-message-overlay="added"].is-open .checkout-popup--added {
  transform: translateX(0);
  opacity: 1;
}

.popup-overlay[data-message-overlay="added"]:not(.is-open) .checkout-popup--added {
  transform: translateX(120%);
  opacity: 0;
}

.popup-overlay[data-message-overlay="error"] {
  position: fixed;
  inset: 0;
  align-items: flex-start;
  justify-content: flex-end;
  background-color: transparent;
  padding-top: calc(clamp(4.5rem, 4rem + 2.5vw, 7rem) + 12px);
  padding-right: 16px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.popup-overlay[data-message-overlay="error"].is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.popup-overlay[data-message-overlay="error"] .checkout-popup--error {
  width: min(420px, calc(100vw - 32px));
  min-height: auto;
  border-radius: 1rem;
  padding: 1rem 1.125rem;
  transform: translateX(120%);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
  pointer-events: auto;
  will-change: transform, opacity;
}

.popup-overlay[data-message-overlay="error"].is-open .checkout-popup--error {
  transform: translateX(0);
  opacity: 1;
}

.popup-overlay[data-message-overlay="error"]:not(.is-open) .checkout-popup--error {
  transform: translateX(120%);
  opacity: 0;
}