/* Member list — group members page, presence indicators. */

@layer components {
  .member-list {
    list-style: none;
    padding: 0;
    container-type: inline-size;
  }

  .member-list__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--inline-space) var(--inline-space-l);
    padding: var(--block-space-s) 0;
    border-block-end: 1px solid var(--color-border);

    &:last-child {
      border-block-end: none;
    }
  }

  .member-list__info {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    flex: 1 1 auto;
    min-width: 0;
  }

  .member-list__avatar-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .member-list__status {
    font-size: 0.8125rem;
    margin: 0;
  }

  .member-list__actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-s);
    flex-shrink: 0;
  }

  /* Wrapper around page-level actions ("On My Way") above the card */
  .member-list__actions {
    margin-block-end: var(--block-space);
  }

  /* Stack actions below member info on narrow card widths */
  @container (max-width: 30rem) {
    .member-list__item {
      align-items: flex-start;
    }

    .member-list__actions-row {
      width: 100%;
      justify-content: flex-end;
    }
  }

  /* Online/offline status dot */
  .status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-surface);
  }

  .status-dot--online {
    background: oklch(var(--lch-laser));
    box-shadow: 0 0 6px oklch(var(--lch-laser) / 0.5);
  }

  .status-dot--offline {
    background: var(--color-border);
  }
}