/*
 * CTA "card swipe": on hover a light band sweeps across the button like a
 * card through a reader, and the arrow slides out while a bank card slides
 * in. Both icons are mask layers of one ::after, so they take the button's
 * text colour. Usage: add .btn-pay to a .btn.
 */
.btn-pay {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-pay::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  z-index: -1;
  width: 45%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
  transform: skewX(-20deg);
  pointer-events: none;
}

.btn-pay::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1em;
  margin-left: .5em;
  vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M3 8h13M11 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath fill-rule='evenodd' d='M3.5 2h13A2.5 2.5 0 0 1 19 4.5v7a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 1 11.5v-7A2.5 2.5 0 0 1 3.5 2zM4 5.5h4v3H4zM11 10.5h5v1h-5z'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M3 8h13M11 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath fill-rule='evenodd' d='M3.5 2h13A2.5 2.5 0 0 1 19 4.5v7a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 1 11.5v-7A2.5 2.5 0 0 1 3.5 2zM4 5.5h4v3H4zM11 10.5h5v1h-5z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /* lengths, not %: with a 100% mask size percentages all resolve to 0 */
  -webkit-mask-position: 0 0, -1.5em 0;
  mask-position: 0 0, -1.5em 0;
  transition: -webkit-mask-position .35s cubic-bezier(.6, 0, .2, 1), mask-position .35s cubic-bezier(.6, 0, .2, 1);
}

.btn-pay:hover::before,
.btn-pay:focus-visible::before {
  animation: btn-pay-swipe .6s ease-out;
}

.btn-pay:hover::after,
.btn-pay:focus-visible::after {
  -webkit-mask-position: 1.5em 0, 0 0;
  mask-position: 1.5em 0, 0 0;
}

@keyframes btn-pay-swipe {
  to { left: 130%; }
}

/* Light buttons: a darker sweep reads better than a white one */
.btn-pay.btn-secondary::before,
.btn-pay.btn-light::before,
.btn-pay[class*="btn-outline"]::before {
  background: linear-gradient(90deg, rgba(255, 78, 2, 0), rgba(255, 78, 2, .14), rgba(255, 78, 2, 0));
}

@media (prefers-reduced-motion: reduce) {
  .btn-pay:hover::before,
  .btn-pay:focus-visible::before { animation: none; }
  .btn-pay::after { transition: none; }
}