/**
 * <Label> — vanilla component kit primitive.
 *
 * Flex row: leading label text + optional trailing help link slot.
 *
 * Markup:
 *   <label class="c-label" for="key-id">
 *     <span class="c-label__text">Public ID</span>
 *     <a class="c-label__help" href="#help-pub-id">Where do I find this?</a>
 *   </label>
 */

.c-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  font-weight: 400;
  margin: var(--space-2) 0 var(--space-xs);
}

.c-label__text {
  flex: 0 1 auto;
}

.c-label__help {
  flex: 0 0 auto;
  font-size: var(--font-size-small);
  color: var(--info-text);
  text-decoration: none;
}

.c-label__help:hover,
.c-label__help:focus-visible {
  text-decoration: underline;
}

.c-label__help:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}