.payment-hosted {
  width: 100%;
}

.payment-hosted__stage {
  position: relative;
  width: 100%;
}

.payment-hosted__iframe {
  display: block;
  width: 100%;
  border: none;
  transition: height 0.2s ease;
}

.payment-hosted__iframe--hidden {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.payment-hosted__skeleton {
  width: 100%;
  height: 420px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--neutral-surface-low) 25%,
    var(--neutral-border) 37%,
    var(--neutral-surface-low) 63%
  );
  background-size: 400% 100%;
  animation: payment-hosted-skeleton 1.4s ease infinite;
}

@keyframes payment-hosted-skeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.payment-hosted__error {
  margin: 0;
  padding: 16px;
  text-align: center;
  font: var(--body);
  color: var(--negative-text, #d32f2f);
}