.ReactorListModal {
  --color-reaction: var(--color-message-reaction);
  --hover-color-reaction: var(--color-message-reaction-hover);
  --accent-color: var(--color-primary);

  .modal-content {
    overflow: hidden;
    height: min(92vh, 32rem);
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0 !important;
  }

  .reactor-list-wrapper {
    flex-grow: 1;
    min-height: 0;
  }

  .confirm-dialog-button {
    align-self: flex-end;
    margin: 0 0.5rem;
  }

  .Reactions {
    margin-bottom: 0.5rem;
    padding: 0 1rem;
    justify-content: space-between;

    &::after {
      content: '';
      flex-grow: 1;
    }
  }

  .icon-heart {
    width: 1.125rem;
    height: 1.125rem;
    margin-inline-end: 0.25rem;
  }

  .reaction-filter-emoji {
    margin-inline-end: 0.25rem;
  }

  .reactor-list {
    max-height: 100%;
    overflow: auto;
    overflow-x: hidden;
    padding: 0 0.5rem;
  }

  .reactors-list-item {
    margin: 0;
  }

  .reactors-list-item .ListItem-button {
    display: flex;
    align-items: center;
  }

  .reactors-list-emoji {
    width: 1.5rem;
    height: 1.5rem;
    margin-inline-start: auto;
  }

  .status {
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    font-size: 0.875rem !important;
    line-height: 1.25rem;
  }
}