---
import type { Badge } from '../schemas/badge';

interface Props {
	variant?: Badge['variant'] | 'outline';
	text?: string;
}
const { variant = 'default', text } = Astro.props;
---

<span class:list={['sl-badge', variant]} set:html={text} />

<style>
	.sl-badge {
		display: inline-block;
		border: 1px solid var(--sl-color-border-badge);
		border-radius: 0.25rem;
		font-family: var(--sl-font-system-mono);
		font-size: var(--sl-text-xs);
		font-weight: 400;
		padding: 0.125rem 0.375rem;
		line-height: 1;
		color: #fff;
		background-color: var(--sl-color-bg-badge);
		overflow-wrap: anywhere;
	}

	.outline {
		--sl-color-bg-badge: transparent;
		--sl-color-border-badge: currentColor;
		color: inherit;
	}

	.default {
		--sl-color-bg-badge: var(--sl-color-accent-low);
		--sl-color-border-badge: var(--sl-color-accent);
	}

	.note {
		--sl-color-bg-badge: var(--sl-color-blue-low);
		--sl-color-border-badge: var(--sl-color-blue);
	}

	.danger {
		--sl-color-bg-badge: var(--sl-color-red-low);
		--sl-color-border-badge: var(--sl-color-red);
	}

	.success {
		--sl-color-bg-badge: var(--sl-color-green-low);
		--sl-color-border-badge: var(--sl-color-green);
	}

	.caution {
		--sl-color-bg-badge: var(--sl-color-orange-low);
		--sl-color-border-badge: var(--sl-color-orange);
	}

	.tip {
		--sl-color-bg-badge: var(--sl-color-purple-low);
		--sl-color-border-badge: var(--sl-color-purple);
	}

	:global([data-theme='light']) .default {
		--sl-color-bg-badge: var(--sl-color-accent-high);
	}

	:global([data-theme='light']) .note {
		--sl-color-bg-badge: var(--sl-color-blue-high);
	}

	:global([data-theme='light']) .danger {
		--sl-color-bg-badge: var(--sl-color-red-high);
	}

	:global([data-theme='light']) .success {
		--sl-color-bg-badge: var(--sl-color-green-high);
	}

	:global([data-theme='light']) .caution {
		--sl-color-bg-badge: var(--sl-color-orange-high);
	}

	:global([data-theme='light']) .tip {
		--sl-color-bg-badge: var(--sl-color-purple-high);
	}
</style>