<script lang="ts">
  /**
   * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.
   */
  interface Props {
    [key: string]: any;
    /**
     * Allows to define the status dot type.
     */
    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
    /**
     * Determines the size of the status dot.
     */
    size?: 's' | 'm' | 'l';
  }

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

<div
  class={['mc-status-dot', `mc-status-dot--${size}`, `mc-status-dot--${status}`, className]}
  {...attrs}
></div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.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>
