@layer components {
  .hm-c-badge {
    display: inline-block;
    padding: 0 var(--hm-space-sm);
    border-radius: var(--hm-radius-pill);
    background: var(--hm-color-neutral-bg);
    color: var(--hm-color-neutral);
    font-size: var(--hm-font-size-sm);
    white-space: nowrap;
  }

  .hm-c-badge.hm-m-success {
    background: var(--hm-color-success-bg);
    color: var(--hm-color-success);
  }

  .hm-c-badge.hm-m-warning {
    background: var(--hm-color-warning-bg);
    color: var(--hm-color-warning);
  }

  .hm-c-badge.hm-m-danger {
    background: var(--hm-color-danger-bg);
    color: var(--hm-color-danger);
  }
}