.pro-double-text-button-wrapper {
  display: block;
}

.pro-double-text-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pro-double-text-button-icon-gap, 0.75em);
  overflow: hidden;
  transition: color var(--pro-double-text-button-hover-duration, 0.3s) ease,
              background-color var(--pro-double-text-button-hover-duration, 0.3s) ease,
              border-color var(--pro-double-text-button-hover-duration, 0.3s) ease,
              box-shadow var(--pro-double-text-button-hover-duration, 0.3s) ease;
}

.pro-double-text-button__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--pro-double-text-button-icon-gap, 0.75em);
}

.pro-double-text-button__text-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 1.2;
}

.pro-double-text-button__text {
  display: block;
  will-change: transform;
  transition: transform var(--pro-double-text-button-hover-duration, 0.3s) ease;
}

.pro-double-text-button__text--clone {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 100%;
}

.pro-double-text-button:hover .pro-double-text-button__text--primary {
  transform: translateY(-100%);
}

.pro-double-text-button:hover .pro-double-text-button__text--clone {
  transform: translateY(-100%);
}

.pro-double-text-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--pro-double-text-button-icon-size, 1em);
  line-height: 1;
  transition: color var(--pro-double-text-button-hover-duration, 0.3s) ease,
              transform var(--pro-double-text-button-hover-duration, 0.3s) ease;
}

.pro-double-text-button__icon svg {
  width: var(--pro-double-text-button-icon-size, 1em);
  height: var(--pro-double-text-button-icon-size, 1em);
  transition: fill var(--pro-double-text-button-hover-duration, 0.3s) ease;
}

.pro-double-text-button--icon-none .pro-double-text-button__inner {
  gap: 0;
}