<!-- Template -->
<component 
  :style="{
    '--_component-padding': `var(--space-${size})`,
    '--_component-bg': `var(--${backgroundColor})`
  }"
>

<!-- CSS -->
<style>
.component {
  --_component-padding: var(--space-l); /* fallback */
  --_component-bg: transparent; /* fallback */
  
  padding: var(--_component-padding);
  background: var(--_component-bg);
}
</style>

const props = defineProps({
  size: {
    type: String,
    default: 'l',
    validator: (value) => ['xs', 's', 'm', 'l', 'xl', '2xl', '3xl'].includes(value)
  }
})