<script lang="ts">
  import StatusDot from '../statusdot/StatusDot.svelte';
  /**
   * A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.
   */
  interface Props {
    [key: string]: any;
    /**
     * Content of the status badge.
     */
    label: string;
    /**
     * Allows to define the status badge type.
     */
    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
  }

  let { status = 'info', label, class: className, ...attrs }: Props = $props();
</script>

<div class={['mc-status-badge', `mc-status-badge--${status}`, className]} {...attrs}>
  <StatusDot {status} size="m" />
  <span class="mc-status-badge__label">{label}</span>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-status-badge {
  background-color: var(--status-badge-color-background-info, #e1f3f9);
  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-info, #a7d9ed);
  font-weight: var(--font-weight-regular, 400);
  font-size: var(--font-size-100, 0.875rem);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--border-radius-s, 0.25rem);
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  text-transform: lowercase;
  white-space: nowrap;
  min-height: 1.5rem;
}
.mc-status-badge__label {
  color: var(--status-badge-color-label, #000000);
}
.mc-status-badge__label::first-letter {
  text-transform: uppercase;
}
.mc-status-badge--success {
  background-color: var(--status-badge-color-background-success, #ebf5de);
  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-success, #c5e39e);
}
.mc-status-badge--error {
  background-color: var(--status-badge-color-background-error, #fdeaea);
  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-error, #f8bcbb);
}
.mc-status-badge--warning {
  background-color: var(--status-badge-color-background-warning, #fdf1e8);
  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-warning, #f8d2b3);
}
.mc-status-badge--neutral {
  background-color: var(--status-badge-color-background-neutral, #f2f2f2);
  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-neutral, #cccccc);
}

.mc-status-dot {
  background-color: var(--status-dot-color-background-info, #0b96cc);
  height: 0.5rem;
  width: 0.5rem;
  border-radius: var(--border-radius-full, 100%);
  display: inline-block;
}
.mc-status-dot--s {
  height: 0.25rem;
  width: 0.25rem;
}
.mc-status-dot--l {
  height: 1rem;
  width: 1rem;
}
.mc-status-dot--success {
  background-color: var(--status-dot-color-background-success, #3f9e10);
}
.mc-status-dot--error {
  background-color: var(--status-dot-color-background-error, #ea302d);
}
.mc-status-dot--warning {
  background-color: var(--status-dot-color-background-warning, #ea7315);
}
.mc-status-dot--neutral {
  background-color: var(--status-dot-color-background-neutral, #808080);
}</style>
