.reactions-view {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4);
  min-width: 0;
}

.reactions-view .reactions-chips {
  align-self: stretch;
  min-width: 0;
  text-wrap: balance;
  font-size: 0;
  margin-block-end: calc(var(--spacing-4) * -1);
}

.reactions-view .reactions-reaction {
  display: inline-flex;
  vertical-align: middle;
  font-size: var(--font-size-medium-16);
  margin-block-end: var(--spacing-4);
}

.reactions-view .reactions-reaction:not(:last-child) {
  margin-inline-end: var(--spacing-8);
}

.reactions-view .reactions-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: var(--spacing-4);
}

.reactions-view .reactions-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-4);
  row-gap: var(--spacing-4);
  min-width: 0;
}

.reactions-view .reactions-reaction .reactions-emoji-button {
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
  border-inline-end-width: 0 !important;
}

.reactions-view .reactions-reaction .reactions-count-button {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
}

.reactions-view .reactions-count {
  display: inline-block;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.reactions-view .reactions-chips[data-count-width='1'] .reactions-count {
  min-width: 1ch;
}

.reactions-view .reactions-chips[data-count-width='2'] .reactions-count {
  min-width: 2ch;
}

.reactions-view .reactions-chips[data-count-width='3'] .reactions-count {
  min-width: 3ch;
}

.reactions-view .reactions-chips[data-count-width='4'] .reactions-count {
  min-width: 4ch;
}

.reactions-view .reactions-chips[data-count-width='5'] .reactions-count {
  min-width: 5ch;
}

.reactions-view .reactions-chips[data-count-width='6'] .reactions-count {
  min-width: 6ch;
}

.reactions-view .reactions-reaction {
  user-select: none;
  -webkit-touch-callout: none;
}

.reactions-view .reactions-emoji {
  font-family: var(--font-family-emoji);
}

.reactions-view .reactions-dialogs, .reactions-view .reactions-dialogs > .modal-dialog-view {
  display: contents;
}

.reactions-view .tooltip-view {
  margin-inline-start: 0;
}

.reactions-view .reactions-controls .button-view, .reactions-view .reactions-actions .button-view {
  align-self: center !important;
}

.reactions-view .reactions-when {
  justify-content: center;
  min-width: var(--min-size-interactive-touch);
  min-height: var(--min-size-interactive-touch);
}