@layer components {

  .joinlink {
    display: flex;
    align-items: center;
    gap: var(--space);
  }

  @media (width <= 40rem) {
    .joinlink { flex-direction: column; align-items: stretch; }
  }

  
  .input.joinlink__url {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    cursor: text;
  }

  
  @media (width <= 40rem) {
    .input.joinlink__url { flex: none; }
  }

  .joinlink__state {
    flex-wrap: wrap;
    gap: var(--space) var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-faint);
  }

  .joinlink__spent { color: var(--warn); }

  .joinlink__limit { flex: none; }

  .joinlink__number { width: 5rem; }
}