/* Shared tactile reaction controls, including comment dialogs and room copies. */
:is(.connected-root,.live-dialog) .live-reactions>button.reaction-choice {
  min-width: 48px;
  min-height: 44px;
  border-width: 2px;
  box-shadow: 0 3px 0 var(--live-input-line);
  cursor: pointer;
  transition: transform 130ms ease, box-shadow 130ms ease, background-color 130ms ease, border-color 130ms ease;
}
:is(.connected-root,.live-dialog) .live-reactions>button.reaction-choice.is-selected {
  background: var(--live-soft);
  border-color: var(--live-accent);
  box-shadow: 0 3px 0 var(--live-accent), inset 0 0 0 1px var(--live-accent);
}
@media (hover: hover) {
  :is(.connected-root,.live-dialog) .live-reactions>button.reaction-choice:not(:disabled):hover {
    transform: translateY(-2px);
    border-color: var(--live-accent);
  }
}
:is(.connected-root,.live-dialog) .live-reactions>button.reaction-choice:not(:disabled):active {
  transform: translateY(2px) scale(.96);
  box-shadow: 0 1px 0 var(--live-input-line);
}
:is(.connected-root,.live-dialog) .live-reactions>button.reaction-choice.is-pending {
  opacity: 1;
  cursor: progress;
}
:is(.connected-root,.live-dialog) .reaction-choice.is-reacting .reaction-symbol {
  animation: reaction-feedback-pop 320ms cubic-bezier(.2,.8,.3,1.2);
}
:is(.connected-root,.live-dialog) .reaction-choice.is-saving-choice {
  border-style: dashed;
}
@keyframes reaction-feedback-pop {
  0% { transform: scale(.85); }
  45% { transform: scale(1.35) rotate(-8deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.connected-root,.live-dialog) .live-reactions>button.reaction-choice {
    transition: none;
    transform: none;
  }
  :is(.connected-root,.live-dialog) .reaction-choice.is-reacting .reaction-symbol { animation: none; }
  :is(.connected-root,.live-dialog) .live-reactions>button.reaction-choice:not(:disabled):is(:hover,:active) { transform: none; }
}
@media (forced-colors: active) {
  :is(.connected-root,.live-dialog) .live-reactions>button.reaction-choice.is-selected { border-color: Highlight; }
}