@layer components {
  /* A list as an inbox: who, then what about them, and at the row's end when and in what state. */

  /* The link is the row's box, so it takes the focus ring */
  .inbox__link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--inline-space);
    min-width: 0;
    color: inherit;
    text-decoration: none;

    &:focus-visible {
      border-radius: inherit;
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: calc(-1 * var(--focus-ring-size));
    }
  }

  @media (any-hover: hover) {
    .row:has(> .inbox__link:hover) {
      background-color: var(--color-ink-lightest);
    }
  }

  /* Sized by the link that holds it, which outranks the avatar's own type size. */
  .inbox__link .inbox__avatar {
    --avatar-size: 2.25rem;

    font-size: var(--text-x-small);
  }

  /* With no avatar to hold a row's height, the end keeps a row's usual room above and below. */
  .row:not(:has(.inbox__avatar)) .inbox__end {
    padding-block: calc(var(--block-space-half) * 0.75);
  }

  /* Nothing on a row is bold: its state is told by the word's colour alone. */
  .inbox__end .status {
    font-weight: normal;
  }
}