/* Only the ink and the icon move. The input, caret and hit targets stay put. */
.input-shell {
  position: relative;
  --ink-line: var(--blue);
  --line-scale: .02;
  --line-opacity: 0;
}
.input-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: auto 9px -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-line);
  transform-origin: left center;
  transform: scaleX(var(--line-scale));
  opacity: var(--line-opacity);
}
.input-shell:is(:focus-within, :active),
.desk:is([data-link-state="ready"], [data-link-state="error"]) .input-shell {
  --line-scale: 1;
  --line-opacity: 1;
}
.input-shell:focus-within .input-icon { color: var(--ink-line); }
.desk[data-link-state="ready"] .input-shell { --ink-line: #43684e; }
.desk[data-link-state="error"] .input-shell { --ink-line: #ac432d; }

.input-shell::before {
  content: "!";
  display: grid;
  place-items: center;
  position: absolute;
  left: 17px;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font: 700 12px/1 var(--mono);
  color: var(--ink-line);
  opacity: 0;
  transform: rotate(-12deg) scale(.94);
  pointer-events: none;
}

.desk[data-link-state="ready"] .input-icon { color: #43684e; }
.desk[data-link-state="error"] .input-icon { opacity: 0; }
.desk[data-link-state="error"] .input-shell::before {
  opacity: 1;
  transform: none;
}

.ready-stamp {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #355c40;
  background: #f2f6ee;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  padding: 3px 6px;
  font: 700 11px/1.2 var(--sans);
  letter-spacing: .075em;
  white-space: nowrap;
  transform: translateY(-5px) rotate(-9deg) scale(1.07);
  opacity: 0;
  pointer-events: none;
}
.ready-stamp svg { width: 13px; height: 13px; }
.desk[data-link-state="ready"] .ready-stamp {
  opacity: 1;
  transform: rotate(-4deg);
}

.paste {
  display: grid;
  gap: 0;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -2px #343c1e0c;
}
.paste-default, .paste-done {
  grid-area: 1 / 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.paste-done,
.paste[data-paste-state="done"] .paste-default {
  visibility: hidden;
  opacity: 0;
}
.paste-done { transform: translateY(6px); }
.paste[data-paste-state="done"] .paste-default { transform: translateY(-6px); }
.paste[data-paste-state="done"] .paste-done {
  visibility: visible;
  opacity: 1;
  transform: none;
}
.paste[data-paste-state="done"] {
  color: #355c40;
  border-color: #abc1ad;
  background: #edf4e9;
}
.paste[data-paste-state="error"] {
  color: #97412e;
  border-color: #cd9f91;
  background: #fbf0e9;
}
.paste:active, .submit:active { transform: none; }
.paste:active { box-shadow: inset 0 1px #343c1e19; }

.submit {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  background: #163191;
  box-shadow: 0 1px 0 #173491;
}
.submit::before, .submit::after {
  content: "";
  position: absolute;
  inset: 0 0 2px;
  pointer-events: none;
}
.submit::before {
  border-radius: inherit;
  background: var(--blue);
}
.submit::after {
  inset-inline: -23%;
  background: linear-gradient(112deg, #1838a6 42%, #294dc7 74%, #607ae2 92%, transparent 93%);
  transform: translateX(-100%);
}
.submit-label, .submit .icon { position: relative; z-index: 1; }
.submit:is(:focus-visible, :active)::after { transform: none; }

@media (hover: hover) and (pointer: fine) {
  .desk:is([data-link-state="idle"], [data-link-state="editing"]) .input-shell:hover:not(:focus-within) {
    --line-scale: .28;
    --line-opacity: .7;
    border-color: #8999c2;
  }
  .submit:hover::after { transform: none; }
}

@media (max-width: 620px) {
  .input-shell::before { left: 12px; width: 16px; height: 16px; }
  .ready-stamp { font-size: 10px; padding: 2px 5px; }
}

html[data-motion="playing"] {
  .input-shell::after { transition: transform 250ms var(--ease-out), opacity 150ms ease; }
  .input-shell:focus-within .input-icon { transform: rotate(-9deg) scale(1.08); }
  .input-icon, .input-shell::before, .ready-stamp {
    transition: transform 200ms var(--ease-out), opacity 150ms ease;
  }
  .paste-default, .paste-done {
    transition: transform 160ms var(--ease-out), opacity 150ms ease, visibility 150ms;
  }
  .paste .icon, .submit-label, .submit .icon, .submit::before {
    transition: transform 160ms var(--ease-out);
  }
  .submit::after { transition: transform 250ms var(--ease-out); }
  .submit:focus-visible .icon { transform: translateX(6px); }
  .paste:focus-visible .paste-default .icon { transform: translateY(-1px) rotate(-8deg); }

  @media (hover: hover) and (pointer: fine) {
    .input-shell:hover:not(:focus-within) .input-icon { transform: rotate(-5deg); }
    .paste:hover .paste-default .icon { transform: translateY(-1px) rotate(-8deg); }
    .submit:hover .submit-label { transform: translateX(1px); }
    .submit:hover .icon { transform: translateX(7px); }
  }

  .paste:active .paste-default .icon { transform: translateY(1px) rotate(3deg); }
  .paste:active .paste-default { transform: translateY(1px); }
  .submit:active::before, .submit:active::after { transform: translateY(2px); }
  .submit:active .submit-label { transform: translate(1px, 2px); }
  .submit:active .icon { transform: translate(4px, 2px); }
}
html[data-motion="paused"] .submit:hover .icon { transform: none; }