/* Account settings people list: a flat list of active users, each with an admin toggle and a
 * delete (deactivate) button. Mirrors Fizzy's account/settings people list. */
@layer components {
  .access-lists {
    --avatar-size: 2rem;

    list-style: none;
    padding: 0;
    margin: 0;
    margin-block-start: var(--block-space);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .access-lists__item {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
  }

  .access-lists__identity {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    min-width: 0;
  }

  .access-lists__avatar {
    flex-shrink: 0;
  }

  .access-lists__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .access-lists__name,
  .access-lists__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .access-lists__email {
    font-size: var(--text-small);
    color: var(--color-faint);
  }

  .access-lists__leader {
    flex: 1 1 auto;
    min-width: var(--inline-space);
    border-bottom: 1px dashed var(--color-line);
  }

  .access-lists__actions {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    flex-shrink: 0;
  }

  /* Crown role toggle fills in when the user is an admin (checkbox checked). */
  .access-lists__role:has(input:checked) {
    --btn-background: var(--color-ink);
    --btn-border-color: var(--color-ink);
    --btn-color: var(--color-canvas);
  }

  .access-lists__badge {
    background-color: var(--color-selected-light);
    color: var(--color-selected-dark);
    padding: 0 var(--inline-space-half);
    border-radius: var(--radius);
  }
}