@keyframes as-label-horizontal-cycle {
  0% {
    opacity: 1;
    transform: translateX(0);
    animation-timing-function: var(--as-motion-ease-exit);
  }
  27.78% {
    opacity: 0;
    transform: translateX(-120%);
  }
  27.79% {
    opacity: 0;
    transform: translateX(120%);
    animation-timing-function: var(--as-motion-ease-enter);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes as-label-processing-cycle {
  0% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: var(--as-motion-ease-exit);
  }
  25%, 32.5% {
    opacity: 0;
    transform: translateY(-120%);
  }
  32.51% {
    opacity: 0;
    transform: translateY(120%);
    animation-timing-function: var(--as-motion-ease-enter);
  }
  80%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

:where(a.as-btn, button.as-btn, .as-btn.elementor-button).is-label-motion:not(.is-processing):not(.is-disabled):not(:disabled) .as-btn__label,
.as-btn:not(.is-processing):not(.is-disabled) .elementor-button.is-label-motion:not(:disabled) .as-btn__label {
  animation: as-label-horizontal-cycle var(--as-motion-duration-cycle) linear 1;
}

.is-processing .as-btn__processing-label {
  animation: as-label-processing-cycle var(--as-motion-duration-processing) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  :where(a.as-btn, button.as-btn, .as-btn.elementor-button, .as-btn .elementor-button) {
    transition-duration: 80ms;
  }

  :where(a.as-btn, button.as-btn, .as-btn.elementor-button, .as-btn .elementor-button) .as-btn__label,
  .is-processing .as-btn__processing-label {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .is-processing .as-btn__label {
    opacity: 0;
  }
}
