<script lang="ts">
  /**
   * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.
   */
  interface Props {
    [key: string]: any;
    /**
     * Label of the Flag.
     */
    label: string;
    /**
     * Allows to define the Flag appearance.
     */
    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
  }

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

<div class={['mc-flag', `mc-flag--${appearance}`, className]} {...attrs}>
  <span class="mc-flag__label">
    {label}
  </span>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-flag {
  padding: 0 0.5rem;
  border-radius: var(--border-radius-xs, 0.125rem);
  white-space: nowrap;
  font-size: var(--font-size-100, 0.875rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-s, 1.3);
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  color: var(--flag-color-text-standard, #ffffff);
  background-color: var(--flag-color-background-standard, #191919);
}
.mc-flag--accent {
  color: var(--flag-color-text-accent, #ffffff);
  background-color: var(--flag-color-background-accent, #117f03);
}
.mc-flag--danger {
  color: var(--flag-color-text-danger, #ffffff);
  background-color: var(--flag-color-background-danger, #c61112);
}
.mc-flag--inverse {
  color: var(--flag-color-text-inverse, #000000);
  background-color: var(--flag-color-background-inverse, #ffffff);
}</style>
