.reactionIndicatorWidget {
  display: flex;
  background-color: var(--cpd-color-bg-subtle-primary);
  border-radius: var(--cpd-radius-pill-effect);
  color: var(--cpd-color-icon-secondary);
}

.reactionIndicatorWidget > p {
  padding: none;
  margin-top: auto;
  margin-bottom: auto;
  width: 4em;
}

.reactionIndicatorWidgetLarge > p {
  padding: var(--cpd-space-2x);
}

.reactionLarge {
  margin: var(--cpd-space-2x);
  padding: var(--cpd-space-4x);
  padding-block: var(--cpd-space-4x);
}

.reaction {
  margin: var(--cpd-space-1x);
  color: var(--cpd-color-icon-secondary);
  background-color: var(--cpd-color-icon-secondary);
  display: flex;
  align-items: center;
  border-radius: var(--cpd-radius-pill-effect);
  user-select: none;
  overflow: hidden;
  box-shadow: var(--small-drop-shadow);
  box-sizing: border-box;
  max-inline-size: 100%;
  max-width: fit-content;
  padding: var(--cpd-space-1x);
  padding-block: var(--cpd-space-1x);
}

.reaction > span {
  width: var(--cpd-space-6x);
  height: var(--cpd-space-6x);
  display: inline-block;
  text-align: center;
  font-size: 1.2em;
  /* Centralise */
  line-height: 1.2;
}

.reactionLarge > span {
  width: 30px;
  height: 30px;
  font-size: 25px;
}