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

	export const layerCardSecondary = tv({
		base: "flex min-w-0 items-center gap-xs px-md py-1 text-foreground-muted"
	});
</script>

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

	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
		class?: string;
		children?: Snippet;
	}

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

<div class={layerCardSecondary({ class: className })} {...rest}>
	{@render children?.()}
</div>