---
interface Props {
    svg: string;
    fitWidth?: boolean;
}

const {svg, fitWidth = false} = Astro.props;
---

<div class:list={[
         "h-full flex items-center justify-center",
         "text-neutral-400 dark:text-neutral-600",
         "[--accent:var(--color-neutral-400)] dark:[--accent:var(--color-neutral-600)]",
         "group-interact:text-neutral-600 dark:group-interact:text-neutral-300",
         "group-interact:[--accent:var(--color-blue-700)] dark:group-interact:[--accent:var(--color-blue-200)]",
         fitWidth ? "w-full overflow-hidden [&_svg]:w-full [&_svg]:h-auto" : "[&_svg]:h-full [&_svg]:w-auto",
     ]}
     set:html={svg}/>
