discourse/app/assets/stylesheets/common/modal/discourse-reactions-popup.scss

@use "lib/viewport";

// specific d-modal overrules
.fk-d-menu-modal.discourse-reactions-users-menu-content,
.fk-d-menu-modal.post-liked-users-menu-content,
.fk-d-menu-modal.chat-message-reaction-users-content {
  .d-modal {
    &__container {
      height: clamp(50dvh, 50dvh, 60dvh);
    }

    &__body {
      padding-top: 0;
    }
  }
}

.users-popup {
  --skeleton-shimmer-rgb: #{hexToRGB($primary-50)};
  width: 250px;
  background: var(--secondary);
  color: var(--primary);
  line-height: normal;

  @include viewport.until(sm) {
    width: 100%;
  }

  &__title {
    padding: 0 var(--space-4) var(--space-4);
    text-align: center;
    font-weight: 700;
    border-bottom: 1px solid var(--primary-low);

    @include viewport.until(sm) {
      padding-top: var(--space-3);
      padding-bottom: var(--space-3);
    }
  }

  &__sticky-header {
    position: sticky;
    top: 0;
    background: var(--secondary);
    z-index: z("base");
  }

  &__header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    // signals that the row continues past its edges; the ramps sit over the
    // padding, so a row too short to scroll has nothing under them to fade
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black var(--space-4),
      black calc(100% - var(--space-6)),
      transparent 100%
    );

    @include viewport.from(sm) {
      padding: var(--space-2) var(--space-3);
      border-bottom: 1px solid var(--primary-low);
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);

    @include viewport.from(sm) {
      padding: var(--space-1) var(--space-2);
    }
    border: none;
    border-radius: var(--d-border-radius);
    background: transparent;
    color: var(--primary-medium);
    font-size: var(--font-down-1);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;

    .emoji {
      width: 1.15em;
      height: 1.15em;

      @include viewport.until(sm) {
        width: 1.25em;
        height: 1.25em;
      }
    }

    &:hover {
      .discourse-no-touch & {
        background: var(--primary-very-low);
      }

      .discourse-touch & {
        background: transparent;
      }
    }

    &.is-active {
      background: var(--tertiary-low);
      color: var(--primary);
    }
  }

  &__body {
    overflow-y: auto;

    @include viewport.from(sm) {
      overscroll-behavior: contain;
      height: auto;
      max-height: 320px;
    }
  }

  &__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);

    @include viewport.from(sm) {
      padding: var(--space-2) var(--space-3);
      font-size: var(--font-down-1-rem);
    }

    &:hover {
      .discourse-no-touch & {
        background: var(--primary-very-low);
      }

      .discourse-touch & {
        background: transparent;
      }
    }
  }

  .avatar {
    background: var(--primary-low);

    @include viewport.until(sm) {
      width: 32px;
      height: 32px;
    }
  }

  &__user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  &__name {
    @include ellipsis;
    color: var(--primary) !important;
    max-width: 100%;
  }

  &__username {
    color: var(--primary-medium) !important;
    font-size: var(--font-down-1);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      text-decoration: underline;
    }
  }

  &__reaction {
    color: var(--danger);
    flex-shrink: 0;
    margin-left: auto;

    &.emoji {
      width: 1.15em;
      height: 1.15em;

      @include viewport.until(sm) {
        width: 1.25em;
        height: 1.25em;
      }
    }
  }

  &__skeleton-item {
    pointer-events: none;
  }

  &__skeleton-avatar,
  &__skeleton-name,
  &__skeleton-username,
  &__skeleton-reaction {
    background: var(--primary-low);
    border-radius: var(--d-border-radius);
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(
        90deg,
        rgb(var(--skeleton-shimmer-rgb), 0) 0,
        rgb(var(--skeleton-shimmer-rgb), 0.3) 50%,
        rgb(var(--skeleton-shimmer-rgb), 0.5) 100%
      );

      @media (prefers-reduced-motion: no-preference) {
        animation: users-popup-shimmer 1.25s infinite;
      }
    }
  }

  &__skeleton-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;

    @include viewport.until(sm) {
      width: 32px;
      height: 32px;
    }
  }

  &__skeleton-name {
    height: 12px;
    width: 60%;
    margin-top: 2px;
  }

  &__skeleton-username {
    height: 10px;
    width: 40%;
    margin-top: var(--space-2);
  }

  &__skeleton-reaction {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    margin-left: auto;

    @include viewport.until(sm) {
      width: 1.25em;
      height: 1.25em;
    }
  }

  @keyframes users-popup-shimmer {
    100% {
      transform: translateX(100%);
    }
  }
}