<script setup lang="ts">
defineProps<{ padding?: boolean }>();
</script>

<template>
	<div class="card" :class="{ 'has-padding': padding !== false }">
		<slot/>
	</div>
</template>

<style scoped>
.card {
	background-color: hsl(var(--surface0) / 0.5);
	border: 1px solid hsl(var(--surface1));
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
}
.has-padding {
	padding: var(--space-4);
}
</style>
