/* Small inline status pill. Pair the base with one tone:
 *
 *   <span class="status-badge success">Found</span>
 */

.status-badge {
  @apply inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium;

  &.neutral {
    @apply border-slate-200 bg-slate-50 text-slate-700;
  }

  &.success {
    @apply border-success bg-success-light text-success-dark;
  }

  &.info {
    @apply border-info bg-info-light text-info-dark;
  }

  &.warning {
    @apply border-warning bg-warning-light text-warning-dark;
  }

  &.danger {
    @apply border-danger bg-danger-light text-danger-dark;
  }
}