/* Variables in the body of a template, and the placeholder a generated
   document shows where the practice lacks a datum. */
@layer components {
  .template-variable {
    display: inline-block;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: var(--border);
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .template-variable-group {
    margin-inline-end: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  .template-placeholder {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: var(--border);
    border-color: var(--color-warning-border);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-1);
  }

  .template-blank {
    white-space: nowrap;
  }
}