<script setup lang="ts">
const props = defineProps<{
  class?: string
  ux?: any
}>()

const classes = useStyling(
  'scaffoldContent',
  {
    slots: {
      base: 'relative isolate w-full',
      background: 'absolute inset-0 z-0 w-full h-full',
      content:
        'min-w-(--min-content-width) max-w-(--max-content-width) relative z-50 mx-auto w-full h-full',
    },
  },
  props
)
</script>

<template>
  <div :class="classes.base">
    <div v-if="$slots.background" :class="classes.background">
      <slot name="background" />
    </div>

    <div :class="classes.content">
      <slot />
    </div>
  </div>
</template>
