<script lang="ts">
  export let tone: 'default' | 'warning' | 'danger' | 'success' = 'default';
</script>

<span class={`badge ${tone}`}><slot /></span>

<style>
  .badge {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    gap: 6px;
  }
  .badge.warning {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.35);
    color: var(--color-warning);
  }
  .badge.danger {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--color-danger);
  }
  .badge.success {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.35);
    color: var(--color-success);
  }
</style>
