<section class="demo-section">
  <h2>Badges</h2>

  <h3>Variants</h3>
  <div class="demo-row">
    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-secondary">Secondary</span>
    <span class="badge badge-accent">Accent</span>
    <span class="badge badge-success">Success</span>
    <span class="badge badge-warning">Warning</span>
    <span class="badge badge-info">Info</span>
    <span class="badge badge-danger">Danger</span>
  </div>

  <h3>Outline</h3>
  <div class="demo-row">
    <span class="badge badge-primary-outline">Primary outline</span>
    <span class="badge badge-success badge-outline">Success outline</span>
    <span class="badge badge-danger badge-outline">Danger outline</span>
  </div>

  <h3>Sizes</h3>
  <div class="demo-row">
    <span class="badge badge-primary badge-sm">Small</span>
    <span class="badge badge-primary">Default</span>
    <span class="badge badge-primary badge-lg">Large</span>
  </div>

  <h3>With icon</h3>
  <div class="demo-row">
    <span class="badge badge-success with-icon">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
      Verified
    </span>
    <span class="badge badge-danger with-icon">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
      Failed
    </span>
  </div>

  <h3>Vue badges</h3>
  <div id="vue-badges-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnBadge } from "/vue/index.js";

    createApp({
      components: { GnBadge },
      template: `
        <div class="demo-row">
          <gn-badge variant="primary">Vue primary</gn-badge>
          <gn-badge variant="success">Vue success</gn-badge>
          <gn-badge variant="warning">Vue warning</gn-badge>
        </div>
      `
    }).mount("#vue-badges-app");
  </script>
</section>