<svelte:options customElement={{ tag: 'm-number-badge' }} />

<script lang="ts">
  /**
   * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.
   */
  interface Props {
    [key: string]: any;
    /**
     * Content of the badge.
     */
    label: number;
    /**
     * Allows to define the badge appearance.
     */
    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';

    /**
     * Allows to define the badge size.
     */
    size?: 's' | 'm';
  }

  let { label, appearance = 'standard', size = 's', class: className, ...attrs }: Props = $props();
</script>

<div
  class={[
    'mc-number-badge',
    `mc-number-badge--${appearance}`,
    `mc-number-badge--${size}`,
    className,
  ]}
  {...attrs}
>
  {label}
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-number-badge {
  color: var(--number-badge-color-text-standard, #ffffff);
  background-color: var(--number-badge-color-background-standard, #464e63);
  height: 1rem;
  min-width: 1rem;
  padding-inline: 0.125rem;
  font-size: var(--font-size-25, 0.625rem);
  border-radius: var(--border-radius-l, 1rem);
  font-weight: var(--font-weight-semi-bold, 600);
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  line-height: 1;
}
.mc-number-badge--m {
  height: 1.5rem;
  min-width: 1.5rem;
  padding-inline: 0.25rem;
  font-size: var(--font-size-50, 0.75rem);
}
.mc-number-badge--accent {
  color: var(--number-badge-color-text-accent, #ffffff);
  background-color: var(--number-badge-color-background-accent, #117f03);
}
.mc-number-badge--danger {
  color: var(--number-badge-color-text-danger, #ffffff);
  background-color: var(--number-badge-color-background-danger, #c61112);
}
.mc-number-badge--inverse {
  color: var(--number-badge-color-text-inverse, #464e63);
  background-color: var(--number-badge-color-background-inverse, #ffffff);
}</style>
