element-call/src/button/ReactionToggleButton.module.css

.raisedButton > svg {
  color: var(--cpd-color-icon-on-solid-primary);
}

.reactionPopupMenu {
  --reaction-button-padding: 10px;
  --reaction-button-fontsize: 20px;
  --reaction-button-gap: var(--cpd-separator-spacing);
  display: flex;
  width: fit-content;
}

@media (max-width: 420px) {
  .reactionPopupMenu {
    --reaction-button-padding: 8px;
    --reaction-button-fontsize: 16px;
    --reaction-button-gap: 6px;
  }
}

div.reactionPopupMenuRoot.reactionPopupMenuModal {
  --overlay-top: 82vh;
  width: fit-content;
}

div.reactionPopupMenuRoot {
  /* Center the drawer */
  --inset-inline: 30em;
}

.reactionPopupMenuRoot > div {
  width: fit-content;
  max-width: 100vw;
}

div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
  padding-inline: var(--cpd-space-6x);
  padding-block: var(--cpd-space-6x);
}

.reactionPopupMenu section {
  height: fit-content;
  flex: 1;
  max-width: fit-content;
}

.reactionPopupMenu section.reactionsMenuSection {
  margin: auto 0;
  flex: auto;
}

.reactionsMenu {
  margin: 0;
  padding: 0;
  flex-grow: 1;
  gap: var(--reaction-button-gap);
  /* Height of 3 rows plus padding. */
  max-height: calc(
    ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 3
  );
  max-width: calc(
    ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 5
  );
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: start;
  align-items: auto;
  align-content: start;
  width: fit-content;
}

.reactionsMenu > * {
  flex: 0 0 auto;
}

.reactionButton {
  padding: var(--reaction-button-padding);
  border-radius: var(--cpd-radius-pill-effect);
  font-size: var(--reaction-button-fontsize);
  min-block-size: unset;
  border: none;
  aspect-ratio: 1 / 1;
  height: 100%;
}

.verticalSeperator {
  background-color: var(--cpd-color-gray-800);
  width: 2px;
  height: auto;
  margin-left: var(--cpd-separator-spacing);
  margin-right: var(--cpd-separator-spacing);
}

.alert {
  margin-bottom: var(--cpd-space-3x);
  animation: grow-in 200ms;
  height: 2.5em;
}

@keyframes grow-in {
  from {
    height: 0;
  }

  to {
    height: 2.5em;
  }
}