.reaction-modal-wrapper.article-reactions {
  & > turbo-frame {
    display: inherit;
    flex-direction: inherit;
    gap: inherit;
    width: inherit;
  }
}

.reactions-tally {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
}

.emoji-reaction {
  margin: auto;
}

.reaction {
  align-items: center;
  background-color: var(--off-white);
  border-radius: 50px;
  box-shadow: 0px 4px 4px rgba(128, 128, 128, 0.25);
  display: inline-flex;
  justify-content: center;
  gap: 0.25rem;
  line-height: 1rem;
  margin: 0;
  min-height: 1.5rem;
  outline: 1px solid var(--light-gray);
  transition: 0.4s ease-in-out;
  white-space: nowrap;
  width: fit-content;

  &.reaction-s {
    padding: 0.25rem 0.5rem;
    min-width: 2rem;

  }

  &.reaction-m {
    padding: 0.5rem 1rem;
    min-width: 2.5rem;
  }

  &.reaction-all {

  }

  &.selected {
    box-shadow: inset -2px 4px 4px rgba(51, 51, 51, 0.25);
    border: 1px solid var(--brand-charcoal);
    background-color: var(--brand-charcoal);

    & * {
      color: var(--pure-white);
    }
  }
}

/* Emoji symbol inside the reaction block */
/* These styles are required to ensure emojis render correctly across different browsers and devices */
.reaction__emoji {
  font-family: "Twemoji Mozilla",
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji",
    "EmojiOne Color",
    "Android Emoji",
    sans-serif;
}