/* Current: a short current travels around the CTA edge, leaving the interior clear. */
.button,
.button:hover,
.nav-cta,
.nav-cta:hover {
  --charge-edge: #87998e;
  --charge-trail: #c6e675;
  --charge-tip: #ffffdf;
  --charge-glow: rgb(220 245 121 / 38%);
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--paper);
  border-color: var(--charge-edge);
  transform: none;
  transition: border-color .2s ease;
}

/* The same clear interior reads as dark ink on the pale closing panel and form. */
.next-step .button,
.next-step .button:hover,
.project-form .button,
.project-form .button:hover {
  --charge-edge: #657352;
  --charge-trail: #536b29;
  --charge-tip: #263c12;
  --charge-glow: rgb(83 107 41 / 20%);
  background: transparent;
  color: var(--ink);
  border-color: var(--charge-edge);
}

/* This SVG is decoration, separate from the arrow's existing movement. */
:is(.button, .nav-cta) > svg.charge-border,
:is(.button, .nav-cta):is(:hover, :focus-visible, :active) > svg.charge-border {
  position: absolute;
  inset: -1px;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  overflow: visible;
  fill: none;
  stroke: none;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity .18s ease;
}

svg.charge-border > rect {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: none;
}

svg.charge-border > .charge-trail {
  stroke: var(--charge-trail);
  stroke-width: 1.5px;
  stroke-dasharray: 14 86;
  stroke-dashoffset: 14;
  filter: drop-shadow(0 0 2px var(--charge-glow));
}

svg.charge-border > .charge-tip {
  stroke: var(--charge-tip);
  stroke-width: 2px;
  stroke-dasharray: 2 98;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px var(--charge-glow));
}

:is(.button, .nav-cta):is(:focus-visible, :active) {
  border-color: var(--charge-trail);
}

:is(.button, .nav-cta):focus-visible {
  outline: 2px solid var(--charge-trail);
  outline-offset: 4px;
}

:is(.button, .nav-cta):is(:focus-visible, :active) > svg.charge-border {
  opacity: 1;
}

:is(.button, .nav-cta):focus-visible > svg.charge-border > .charge-trail {
  animation: current-charge-trail 1.6s linear infinite;
}

:is(.button, .nav-cta):focus-visible > svg.charge-border > .charge-tip {
  animation: current-charge-tip 1.6s linear infinite;
}

@media (hover: hover) {
  :is(.button, .nav-cta):hover {
    border-color: var(--charge-trail);
  }

  :is(.button, .nav-cta):hover > svg.charge-border {
    opacity: 1;
  }

  :is(.button, .nav-cta):hover > svg.charge-border > .charge-trail {
    animation: current-charge-trail 1.6s linear infinite;
  }

  :is(.button, .nav-cta):hover > svg.charge-border > .charge-tip {
    animation: current-charge-tip 1.6s linear infinite;
  }
}

@keyframes current-charge-trail {
  from { stroke-dashoffset: 14; }
  to { stroke-dashoffset: -86; }
}

@keyframes current-charge-tip {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}

/* Disabled actions never suggest that they can be activated. */
:is(.button, .nav-cta):is(:disabled, [aria-disabled="true"]) {
  border-color: var(--charge-edge);
  cursor: not-allowed;
}

:is(.button, .nav-cta):is(:disabled, [aria-disabled="true"]) > svg.charge-border {
  opacity: 0;
}

:is(.button, .nav-cta):is(:disabled, [aria-disabled="true"]) > svg.charge-border > :is(.charge-trail, .charge-tip) {
  animation: none;
}

:is(.button, .nav-cta):is(:disabled, [aria-disabled="true"]) > svg:not(.charge-border) {
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(.button, .nav-cta),
  :is(.button, .nav-cta) > svg.charge-border {
    transition: none !important;
  }

  :is(.button, .nav-cta) > svg.charge-border > rect {
    animation: none !important;
    filter: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  /* A firm single-color outline replaces the travelling tip. */
  :is(.button, .nav-cta) > svg.charge-border > .charge-tip {
    display: none;
  }
}