@use "../../styles/mixins";

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

  .modal-dialog {
    overflow: clip;
  }

  .modal-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;

    height: min(92vh, 32rem);
    padding: 0 !important;
  }

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

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

  .Reactions {
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.4375rem;

    width: auto;
    min-height: 2rem;
    margin-top: 0;
    padding-inline: 0.75rem;
  }

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

  .not-chosen-button {
    &:hover {
      background-color: var(--hover-color-reaction) !important;
    }
  }

  .reactor-list {
    overflow: auto;
    overflow-x: hidden;

    max-height: 100%;
    padding-top: 0.25rem;
    padding-inline: 0.5rem;
  }

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

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

  .reactors-list-emoji {
    --custom-emoji-size: 1.5rem;

    display: flex;

    width: 1.5rem;
    height: 1.5rem;
    margin-inline-start: auto;

    font-size: 1.5rem;
    line-height: 1.5rem;
  }

  .status {
    display: flex;
    align-items: center;

    font-size: 0.875rem !important;
    line-height: 1.25rem;
    color: var(--color-text-secondary);
  }
}