<!--
    #VUE3 Todo

    Basic card component
-->
<template>
    <div :class="bem()">
        <slot />
    </div>
</template>

<script>
export default {
    name: 'px-card',
};
</script>

<style lang="scss">
@use '../styles/px.scss' as *;

.px-card {
    /// Configuration defautls for px-calendar
    $-defaults: (
        'px-card.background-color': site-var(page-bg),
        'px-card.padding': 1rem,
        'px-card.border-radius': 0.5rem,
        'px-card.box-shadow': depth-shadow(20, 0.1, black),
        'px-card.aspect-ratio': calc(4 / 5),
        'px-card.min-width': 12rem,
        'px-card.max-width': 24rem,
    );

    @include defaults($-defaults);

    $card: flat-merge(get('px-card'));

    @include css-map($card);
}
</style>
