src/components/icon/IconInline.astro
---
// IconInline, recovered from blurr-components.pages.dev
---
<div class="iinl-wrap"> <span class="iinl-badge" style="--badge-color: #6366f1"> <span class="iinl-icon">→</span> <span class="iinl-label">Strategie</span> </span><span class="iinl-badge" style="--badge-color: #10b981"> <span class="iinl-icon">→</span> <span class="iinl-label">Groei</span> </span><span class="iinl-badge" style="--badge-color: #f59e0b"> <span class="iinl-icon">→</span> <span class="iinl-label">Ideeën</span> </span><span class="iinl-badge" style="--badge-color: #ec4899"> <span class="iinl-icon">→</span> <span class="iinl-label">Lancering</span> </span><span class="iinl-badge" style="--badge-color: #3b82f6"> <span class="iinl-icon">→</span> <span class="iinl-label">Data</span> </span><span class="iinl-badge" style="--badge-color: #8b5cf6"> <span class="iinl-icon"></span> <span class="iinl-label">Samenwerking</span> </span><span class="iinl-badge" style="--badge-color: #ef4444"> <span class="iinl-icon"></span> <span class="iinl-label">Content</span> </span><span class="iinl-badge" style="--badge-color: #14b8a6"> <span class="iinl-icon"></span> <span class="iinl-label">SEO</span> </span><span class="iinl-badge" style="--badge-color: #f97316"> <span class="iinl-icon">→</span> <span class="iinl-label">Social</span> </span> </div>
<style>
.iinl-wrap{display:flex;flex-wrap:wrap;gap:10px;padding:24px;font-family:system-ui,sans-serif}
.iinl-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--badge-color) 10%,transparent);border:1px solid color-mix(in srgb,var(--badge-color) 30%,transparent);transition:transform .15s,opacity .15s}
.iinl-badge:hover{transform:scale(1.05);opacity:.85}
.iinl-icon{font-size:.95rem}
.iinl-label{font-size:.82rem;font-weight:600;color:var(--badge-color);white-space:nowrap}
</style>