.spot-icon{--spot-brand:#245c4a;--spot-mint:#7ecfa6;--spot-paper:var(--card,#fff);--spot-edge:color-mix(in oklab,var(--foreground,#18181b) 20%,transparent);display:inline-grid;flex-shrink:0;place-items:center;border:1px solid var(--border,#e4e4e7);background:var(--spot-paper);box-shadow:0 6px 16px -10px rgb(0 0 0/.28)}.dark .spot-icon{--spot-brand:#7ecfa6;--spot-mint:#bfeed6}.spot-icon[data-size=sm]{width:32px;height:32px;border-radius:10px}.spot-icon[data-size=sm] svg{width:20px;height:20px}.spot-icon[data-size=md]{width:40px;height:40px;border-radius:12px}.spot-icon[data-size=md] svg{width:24px;height:24px}.spot-icon[data-size=lg]{width:56px;height:56px;border-radius:16px}.spot-icon[data-size=lg] svg{width:30px;height:30px}.spot-paper{fill:var(--spot-paper)}.spot-edge{stroke:var(--spot-edge)}.spot-line{stroke:var(--foreground,#18181b)}.spot-dot{fill:color-mix(in oklab,var(--foreground,#18181b) 32%,transparent)}.spot-brand{fill:var(--spot-brand)}.spot-brand-stroke{stroke:var(--spot-brand)}.spot-soft-stroke{stroke:color-mix(in oklab,var(--foreground,#18181b) 22%,transparent)}.spot-mint{fill:var(--spot-mint)}.spot-mint-stroke{stroke:var(--spot-mint)}.spot-on-brand,.spot-ring{stroke:var(--spot-paper)}.spot-alert{fill:#d4483b}.spot-alert-stroke{stroke:#d4483b}.spot-alert-soft{fill:#fdeeec}.spot-alert-edge{stroke:#f3cbc6}.dark .spot-alert-soft{fill:#3a1d1b}.dark .spot-alert-edge{stroke:#6b2e29}