@layer components {
  .participant {
    --avatar-size: var(--participant-size);
    --type-avatar: var(--type-initials);

    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    inline-size: var(--participant-slot);
    scroll-snap-align: start;
  }

  .participant__avatar {
    display: grid;
    grid-template-areas: "stack";
    place-items: center;
    inline-size: var(--participant-size);
    block-size: var(--participant-size);
  }

  .participant__avatar > *,
  .participant__avatar::before {
    grid-area: stack;
  }

  .participant__avatar::before {
    content: "";
    inline-size: var(--size-fill);
    block-size: var(--size-fill);
    border-radius: var(--radius-pill);
  }

  .participant--speaking .participant__avatar::before {
    animation: speaking-ring var(--dur-speaking) var(--ease-calm) infinite;
  }

  .participant__avatar--pair {
    --avatar-size: var(--participant-pair-size);
    --type-avatar: var(--type-initials-pair);
  }

  .participant__avatar--pair .avatar {
    outline: var(--border-width-strong) solid var(--color-bg);
  }

  .participant__avatar--pair .avatar:first-child {
    align-self: start;
    justify-self: start;
  }

  .participant__avatar--pair .avatar:last-child {
    align-self: end;
    justify-self: end;
  }

  .participant__name {
    max-inline-size: var(--participant-slot);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--type-caption);
    color: var(--color-ink-muted);
  }

  .participant--guide {
    inline-size: auto;
    min-inline-size: var(--participant-slot);
  }

  .participant__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }


  .participant__link .participant__avatar {
    transition: transform var(--dur-fast) var(--ease-spring);
  }

  .participant__link:active .participant__avatar {
    transform: scale(var(--press-scale));
  }

  .participant__link .participant__name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-inline-size: none;
  }

  @media (any-hover: hover) {
    .participant__link:hover .participant__name {
      color: var(--color-ink);
    }
  }

  .participant--guide .avatar {
    --icon-size: var(--participant-mark-size);

    background-color: var(--color-guide);
    color: var(--color-guide-ink);
  }

  .participant--add .participant__avatar {
    --icon-size: var(--participant-icon-size);

    border: var(--border-width-strong) dashed var(--color-ink-faint);
    border-radius: var(--radius-pill);
    color: var(--color-ink-muted);
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm), transform var(--dur-fast) var(--ease-spring);
  }

  .participant--add .participant__avatar:active {
    transform: scale(var(--press-scale));
  }

  @media (any-hover: hover) {
    .participant--add .participant__avatar:hover {
      border-color: var(--color-accent);
      color: var(--color-accent-ink);
    }
  }
}