/* ===========================================
   Badges
   ===========================================
   Quiet labels: coloured text and a hairline
   border, never a solid fill or all caps.
   =========================================== */

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--space-2);
    font-size: 0.8125rem;
    font-weight: var(--font-semibold);
    line-height: 1.4;
    white-space: nowrap;
    color: var(--color-text);
    background-color: transparent;
    border: 1px solid var(--color-gray-400);
    border-radius: var(--radius-sm);

    &.badge--owner,
    &.badge--success {
      color: var(--color-success);
      border-color: var(--color-success);
    }

    &.badge--admin,
    &.badge--primary {
      color: var(--color-text);
      border-color: var(--color-text);
    }

    &.badge--draft {
      color: var(--color-text-muted);
      border-color: var(--color-gray-400);
      vertical-align: middle;
      margin-left: var(--space-2);
    }

    &.severity--notice,
    &.badge--info {
      color: var(--color-text-muted);
      border-color: var(--color-gray-400);
    }

    &.severity--warning,
    &.badge--warning {
      color: var(--color-warning);
      border-color: var(--color-warning);
    }

    &.severity--error,
    &.badge--error {
      color: var(--color-error);
      border-color: var(--color-error);
    }
  }

  /* Older markup for severities; same look as .badge */
  .severity-badge,
  .severity-badge--error,
  .severity-badge--warning,
  .severity-badge--notice {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--space-2);
    font-size: 0.8125rem;
    font-weight: var(--font-semibold);
    line-height: 1.4;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
  }

  .severity-badge.severity--error,
  .severity-badge--error {
    color: var(--color-error);
  }

  .severity-badge.severity--warning,
  .severity-badge--warning {
    color: var(--color-warning);
  }

  .severity-badge.severity--notice,
  .severity-badge--notice {
    color: var(--color-text-muted);
  }
}