/* Distance travelled by the chalk tip: across the word, then halfway back. */
@property --ag-chalk-distance {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
:is(button, a, summary) {
  --ag-baseline: 1;
  --ag-crossing: 0%;
  --ag-chalk-time: 160ms;
}
.ag-word-label, .ag-ink-control, .cast-selection button {
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  text-decoration: none;
}
:is(.ag-word-label, .ag-ink-control, .cast-selection button)::before,
:is(.ag-word-label, .ag-ink-control, .cast-selection button)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
:is(.ag-word-label, .ag-ink-control, .cast-selection button)::before {
  height: max(2px, .105em);
  background: currentColor;
  clip-path: polygon(0 50%,3% 27%,15% 39%,27% 17%,34% 24%,52% 12%,63% 18%,71% 0,78% 13%,94% 4%,100% 25%,97% 59%,82% 50%,74% 78%,61% 61%,48% 86%,31% 77%,21% 91%,8% 79%,2% 100%);
  bottom: -.135em;
  opacity: .64;
  transform-origin: right;
  transform: scaleX(var(--ag-baseline, 1));
  transition: transform 240ms ease-out;
}
:is(.ag-word-label, .ag-ink-control, .cast-selection button)::after {
  --ag-chalk-distance: var(--ag-crossing, 0%);
  bottom: .35em;
  height: clamp(5px, .42em, 11px);
  /* Reveal fixed grain: the second band starts at the first stroke's endpoint. */
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left top, right bottom;
  background-size: clamp(0%, var(--ag-chalk-distance), 100%) 60%,
    clamp(0%, calc(var(--ag-chalk-distance) - 100%), 54%) 40%;
  mask: url('./chalk-strike.svg') center / 100% 100% no-repeat;
  transition: --ag-chalk-distance var(--ag-chalk-time) linear;
  transition-timing-function: linear(0, .19 16%, .51 43%, .63 55%, .65 62%, .70 68%, .94 90%, 1);
}
:is(.ag-word-label, .ag-ink-control, .cast-selection button):lang(ar)::before { transform-origin: left; }
:is(.ag-word-label, .ag-ink-control, .cast-selection button):lang(ar)::after { transform: scaleX(-1); }
@media (hover: hover) {
  :is(button,a,summary):hover:not(:disabled) {
    --ag-baseline: 0;
    --ag-crossing: 154%;
    --ag-chalk-time: 760ms;
  }
}
:is(button,a,summary):is(:focus-visible, :active):not(:disabled) {
  --ag-baseline: 0;
  --ag-crossing: 154%;
  --ag-chalk-time: 760ms;
}
.ag-ink-control::before, .cast-selection button::before { bottom: calc(50% - .77em); }
.ag-ink-control::after, .cast-selection button::after { bottom: calc(50% - .21em); }
button:disabled .ag-word-label::before { opacity: .22; }
/* Keyboard focus is on the word, too; keep a persistent second mark when focused. */
html :is(button,a,summary):has(.ag-word-label):focus-visible,
html :is(.ag-ink-control, .cast-selection button):focus-visible {
  outline: none;
  text-decoration: underline dotted currentColor 2px;
  text-underline-offset: .37em;
}
:is(button,a,summary):focus-visible .ag-word-label {
  text-decoration: underline dotted currentColor 2px;
  text-underline-offset: .37em;
}
@media (forced-colors: active) {
  html :is(button,a,summary):focus-visible { outline: 2px solid Highlight !important; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.ag-word-label, .ag-ink-control, .cast-selection button)::before,
  :is(.ag-word-label, .ag-ink-control, .cast-selection button)::after { transition: none; }
}
html[data-effects='off'] :is(.ag-word-label, .ag-ink-control, .cast-selection button)::before,
html[data-effects='off'] :is(.ag-word-label, .ag-ink-control, .cast-selection button)::after { transition: none; }