.cp-animated-underline {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4rem;
}

.cp-animated-underline:hover,
.cp-animated-underline:focus-visible,
.cp-animated-underline-parent:hover .cp-animated-underline {
  text-decoration-color: currentColor;
}

button.cp-animated-underline:disabled {
  text-decoration-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .cp-animated-underline {
    transition: text-decoration-color 200ms ease;
  }
}