@layer components {
  .credential-badge {
    align-items: center;
    background-color: var(--credential-bg, var(--color-ink-medium));
    border-radius: 50%;
    block-size: var(--credential-badge-size, 1.5rem);
    color: var(--credential-color, #1a1a1a); /* Badge colors are fixed, so the ink is too */
    display: inline-flex;
    flex-shrink: 0;
    inline-size: var(--credential-badge-size, 1.5rem);
    justify-content: center;

    .icon {
      --icon-size: 0.85rem;
    }
  }

  .credential-badge--expanded {
    border-radius: 1em;
    font-size: var(--text-x-small);
    gap: 0.5ch;
    inline-size: auto;
    padding-inline: 1ch;
  }

  .credential-badge--overflow {
    --credential-bg: var(--color-surface);
    --credential-color: var(--color-ink);

    border: 1px dashed var(--credential-border, var(--color-ink-light));
    font-size: var(--text-x-small);
    font-weight: 500;

    html[data-theme="dark"] & {
      --credential-border: var(--color-ink-medium);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        --credential-border: var(--color-ink-medium);
      }
    }
  }

  /* Overlapping stack of badges, e.g. after a name in a roster row */
  .credential-badge__stack {
    display: inline-flex;

    .credential-badge {
      isolation: isolate;
    }

    .credential-badge + .credential-badge {
      margin-inline-start: -0.5rem;
    }
  }
}

@layer utilities {
  /* The icon picker only applies to credentials shown as badges */
  .credential-form:not(:has(.credential-form__visible:checked)) .credential-form__icons {
    display: none;
  }
}