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

<script lang="ts">
  /**
   * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
   *
   * @slot icon - Use this slot to insert an icon.
   * @slot default - Use this slot to insert custom content.
   * @slot footer - Use this slot to insert a button or a link in the footer of the callout.
   */
  interface Props {
    [key: string]: any;
    /**
     * Title of the callout.
     */
    title: string;
    /**
     * Description of the callout.
     */
    description: string;
    /**
     * Allows to define the callout appearance.
     */
    appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
  }

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

<section class={['mc-callout', `mc-callout--${appearance}`, className]} role="status" {...attrs}>
  <div class="mc-callout__icon">
    <slot name="icon" />
  </div>
  <div class="mc-callout__content">
    <h2 class="mc-callout__title">{title}</h2>

    <p class="mc-callout__message">
      {description}
    </p>

    <slot />

    <div class="mc-callout__footer">
      <slot name="footer" />
    </div>
  </div>
</section>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-callout {
  border-radius: var(--border-radius-m, 0.5rem);
  background: var(--callout-color-background-standard, #eff1f6);
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  position: relative;
  box-sizing: border-box;
  color: var(--callout-color-text, #000000);
}
.mc-callout__icon {
  width: 2rem;
  height: 2rem;
  margin: 0.75rem;
  color: currentcolor;
}
.mc-callout__content {
  flex: 1 1 0;
  padding: 0.75rem 1rem 0.75rem 0;
}
.mc-callout__title, .mc-callout__message {
  line-height: var(--line-height-s, 1.3);
  margin-block: 0;
}
.mc-callout__title {
  font-weight: var(--font-weight-semi-bold, 600);
  font-size: var(--font-size-150, 1rem);
  margin-block-end: 0.25rem;
}
.mc-callout__message {
  font-size: var(--font-size-100, 0.875rem);
}
.mc-callout__footer {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}
.mc-callout--standard {
  background: var(--callout-color-background-standard, #eff1f6);
}
.mc-callout--accent {
  background: var(--callout-color-background-accent, #ebf5de);
}
.mc-callout--tips {
  background: var(--callout-color-background-tips, #ffebaf);
}
.mc-callout--inverse {
  background: var(--callout-color-background-inverse, #ffffff);
}

.mc-callout__footer:empty {
  display: none;
}</style>
