/* LEON Text Motion Button */
.leon-text-motion-button-wrap {
  width: 100%;
}

.leon-text-motion-button {
  --leon-text-motion-duration: 0.42s;
  --leon-text-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --leon-text-motion-distance: 110%;
  --leon-text-motion-icon-gap: 10px;
  --leon-text-motion-icon-size: 15px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: auto;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 15px 28px;
  background-color: #F6A04D;
  color: #4A3428;
  line-height: 1;
  text-decoration: none !important;
  overflow: hidden;
  cursor: pointer;
  transition:
    background-color var(--leon-text-motion-duration) var(--leon-text-motion-ease),
    border-color var(--leon-text-motion-duration) var(--leon-text-motion-ease),
    color var(--leon-text-motion-duration) var(--leon-text-motion-ease),
    box-shadow var(--leon-text-motion-duration) var(--leon-text-motion-ease);
}

.leon-text-motion-button.width-full {
  display: flex;
  width: 100%;
}

.leon-text-motion-button:hover,
.leon-text-motion-button:focus-visible {
  text-decoration: none !important;
  outline: none;
}

.leon-text-motion-button-text {
  position: relative !important;
  display: inline-block !important;
  overflow: hidden !important;
  white-space: nowrap;
  line-height: 1.15;
}

.leon-text-motion-button-text-unit {
  display: block;
  transition:
    transform var(--leon-text-motion-duration) var(--leon-text-motion-ease),
    opacity var(--leon-text-motion-duration) var(--leon-text-motion-ease);
  will-change: transform;
}

.leon-text-motion-button-text-unit.is-next {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
}

/* Up motion */
.leon-text-motion-button.motion-up .leon-text-motion-button-text-unit.is-next {
  transform: translateY(var(--leon-text-motion-distance));
}

.leon-text-motion-button.motion-up:hover .leon-text-motion-button-text-unit.is-current,
.leon-text-motion-button.motion-up:focus-visible .leon-text-motion-button-text-unit.is-current {
  transform: translateY(calc(var(--leon-text-motion-distance) * -1));
}

.leon-text-motion-button.motion-up:hover .leon-text-motion-button-text-unit.is-next,
.leon-text-motion-button.motion-up:focus-visible .leon-text-motion-button-text-unit.is-next {
  transform: translateY(0);
}

/* Down motion */
.leon-text-motion-button.motion-down .leon-text-motion-button-text-unit.is-next {
  transform: translateY(calc(var(--leon-text-motion-distance) * -1));
}

.leon-text-motion-button.motion-down:hover .leon-text-motion-button-text-unit.is-current,
.leon-text-motion-button.motion-down:focus-visible .leon-text-motion-button-text-unit.is-current {
  transform: translateY(var(--leon-text-motion-distance));
}

.leon-text-motion-button.motion-down:hover .leon-text-motion-button-text-unit.is-next,
.leon-text-motion-button.motion-down:focus-visible .leon-text-motion-button-text-unit.is-next {
  transform: translateY(0);
}


.leon-text-motion-button.has-icon {
  gap: var(--leon-text-motion-icon-gap);
}

.leon-text-motion-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--leon-text-motion-icon-size);
  height: var(--leon-text-motion-icon-size);
  flex: 0 0 auto;
  color: currentColor;
  line-height: 1;
  transition:
    color var(--leon-text-motion-duration) var(--leon-text-motion-ease),
    transform var(--leon-text-motion-duration) var(--leon-text-motion-ease);
}

.leon-text-motion-button-icon svg,
.leon-text-motion-button-icon i {
  display: block;
  width: var(--leon-text-motion-icon-size);
  height: var(--leon-text-motion-icon-size);
  font-size: var(--leon-text-motion-icon-size);
  line-height: 1;
  fill: currentColor;
}

.leon-text-motion-button.icon-position-right:hover .leon-text-motion-button-icon,
.leon-text-motion-button.icon-position-right:focus-visible .leon-text-motion-button-icon {
  transform: translateX(3px);
}

.leon-text-motion-button.icon-position-left:hover .leon-text-motion-button-icon,
.leon-text-motion-button.icon-position-left:focus-visible .leon-text-motion-button-icon {
  transform: translateX(-3px);
}


/* Elementor editor selection helper */
.elementor-editor-active .leon-text-motion-button {
  pointer-events: none;
}

.elementor-editor-active .leon-text-motion-button * {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .leon-text-motion-button,
  .leon-text-motion-button * {
    transition: none !important;
  }

  .leon-text-motion-button:hover .leon-text-motion-button-text-unit,
  .leon-text-motion-button:focus-visible .leon-text-motion-button-text-unit {
    transform: none !important;
  }

  .leon-text-motion-button .leon-text-motion-button-text-unit.is-next {
    display: none !important;
  }
}
