{{- $type := .Get 0 | default "info" }}

<info-callout type="{{ $type }}">
  <template shadowrootmode="open">
    <style>
      #content {
        display: block;
        margin: 1rem 0;
        border-radius: 0.5rem;
        background: var(--color-accent);
        border-left: 4px solid var(--callout-color);
        overflow: hidden;

        &.info { --callout-color: var(--color-theme); }
        &.warning { --callout-color: #fbbf24; }
        &.error { --callout-color: #ef4444; }
        &.success { --callout-color: #10b981; }

        .inner {
          padding: 1rem;
          color: var(--color-text);

          ::slotted(*:first-child) {
            margin-top: 0;
          }

          ::slotted(*:last-child) {
            margin-bottom: 0;
          }
        }
      }
    </style>

    <div id="content" class="{{ $type }}" part="callout">
      <div class="inner" part="content">
        <slot></slot>
      </div>
    </div>
  </template>

  {{ markdownify .Inner }}
</info-callout>

<script type="module" src="/js/info-callout.js"></script>