.article-interactions-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: fit-content;
  margin: 1rem auto 0;
  max-width: var(--container-l);
  position: relative;
  width: 100%;

  section.interaction-forms-wrapper {
    min-width: var(--container-s);
    width: 100%;

    .avatar.avatar--md {
      margin-top: calc(3.5rem + 0.5rem); /* Height of article-reaction-container + gap */
      transform: translateY(-50%);
    }

    .interaction-forms {
      & > * {
        width: 100%;
      }

      .article-reaction-container {
        align-items: center;
        background-color: var(--off-white);
        border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
        display: inline-flex;
        max-height: 3.5rem;
        min-height: 3.5rem;
        overflow: hidden;
        padding: 0.5rem;
        width: 100%;

        form.edit-news-feed-article-interaction:not(:has(.emoji-radio-button-label)) {
          display: contents;
          /*Ignores form if interaction is present*/
        }
      }
    }
  }

  .interactions-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 1;
    max-height: unset;
    visibility: visible;
    width: 100%;

    & > * {
      width: 100%;
    }

    .reaction-modal-wrapper.article-reactions:not(:has(.reaction-m)) {
      max-height: 0;
    }
  }
}