/*
 * Reactions (specs/005 research R7): a chip per emoji with its count, under a message on
 * Meet and Home. The viewer's own chips light up: the page's viewer style points
 * --reaction-mine at the palette.
 */

.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.reactions[hidden] {
  display: none;
}

.reaction__form {
  margin: 0;
}

.reaction {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 28px;
  padding: 0 var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-foreground);
  background-color: color-mix(in srgb, var(--reaction-mine, var(--color-card)) 25%, var(--color-card));
  border: 1px solid var(--reaction-mine, var(--color-border-subtle));
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.reaction:hover {
  border-color: var(--color-border);
}

.reaction:focus-visible {
  outline: none;
  box-shadow: var(--glow-purple);
}

.reaction__emoji {
  display: inline-flex;
  font-size: 1rem;
  line-height: 1;
}

.reaction__emoji img.emoji {
  width: 1rem;
  height: 1rem;
}

.reaction__count {
  font-variant-numeric: tabular-nums;
}