@layer modules {
  /* A team row on the invitation page: the team name leads, and its role
     select and role hint sit beneath it, aligned with the name. */
  .invitation-team__name {
    color: var(--color-ink);
    font-size: var(--text-normal);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
  }

  .invitation-team__role {
    align-items: center;
    column-gap: var(--inline-space-double);
    display: flex;
    flex-wrap: wrap;
    padding-inline-start: calc(1em + var(--inline-space-half));
    row-gap: var(--block-space-half);

    .invitation-team--fixed & {
      padding-inline-start: 0;
    }
  }

  .invitation-team__select {
    --input-border-size: 0;
    --input-background: transparent;
    --input-padding: 0.3em 1.8em 0.3em 0.6em;

    background-position: center right 0.6em;
    clip-path: none;
    flex: none;
    font-size: var(--text-small);
    inline-size: auto;
  }

  .invitation-team__description {
    flex: 1 1 20ch;
    margin: 0;
  }

  /* A team the person already belongs to: shown for context, not selectable. */
  .invitation-team--joined {
    color: var(--color-ink-medium);

    .invitation-team__name {
      color: inherit;
    }
  }
}