<script module lang="ts">
	import { tv, type VariantProps } from "tailwind-variants";

	export const kbd = tv({
		base: "inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-sm border px-1 pb-3xs font-sans typography-paragraph-mini not-italic select-none",
		variants: {
			inverted: {
				false: "border-border-default bg-background-default text-foreground-default shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)]",
				true: "border-inverse-border bg-inverse-background text-inverse-foreground shadow-[inset_0_-2px_0_0_var(--color-inverse-shadow-inner)]"
			}
		},
		defaultVariants: {
			inverted: false
		}
	});

	export type KbdVariants = VariantProps<typeof kbd>;
</script>

<script lang="ts">
	import type { Snippet } from "svelte";

	interface Props {
		inverted?: boolean;
		class?: string;
		children: Snippet;
	}

	let { inverted = false, class: className, children }: Props = $props();
</script>

<kbd class={kbd({ inverted, class: className })}>{@render children()}</kbd>