<script lang="ts">
	import type { ContainerElement } from '../types';

	interface Props {
		element: ContainerElement;
	}
	let { element }: Props = $props();

	const fill = $derived(element.fillColor || 'transparent');
	const borderCss = $derived(
		element.borderWidth && element.borderColor
			? `${element.borderWidth}px solid ${element.borderColor}`
			: 'none'
	);
</script>

<div class="animot-container-element"
	style:width="100%"
	style:height="100%"
	style:background={fill}
	style:border={borderCss}
	style:border-radius="{element.borderRadius ?? 0}px"
></div>

<style>
	.animot-container-element {
		box-sizing: border-box;
		pointer-events: none;
	}
</style>
