/* Per-word animated underline — mark words with the “Underline word” rich-text control. */

.qcc-underline-word {
  position: relative;
  display: inline;
  white-space: nowrap;
}

.qcc-underline-word::after {
  content: "";
  position: absolute;
  left: -0.08em;
  right: -0.08em;
  bottom: 0;
  height: 0.42em;
  background-color: currentColor;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--qcc-underline-duration, 650ms) cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  -webkit-mask-image: url("../img/animated-underline.svg");
  mask-image: url("../img/animated-underline.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left bottom;
  mask-position: left bottom;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.qcc-underline-word.is-underlined::after {
  clip-path: inset(0 0 0 0);
}

/* Editor — show which words are marked */
.editor-styles-wrapper .qcc-underline-word:not(.is-underlined)::after {
  clip-path: inset(0 0 0 0);
  opacity: 0.28;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .qcc-underline-word::after {
    transition: none;
  }
}