<template>
  <section :class="style">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <slot></slot>
  </section>
</template>

<script setup lang="ts">
withDefaults(defineProps<{ style?: 'flat' | 'border' }>(), { style: 'flat' });
</script>

<style scoped lang="scss">
.header:deep(h1),
.header:deep(h2),
.header:deep(h3),
.header:deep(h4),
.header:deep(h5) {
  margin-top: 0;
}

.flat {
  border: none;
  background: none;
  padding: 0;
}

.border {
  border: 1px solid var(--bms-border-color);
  background-color: var(--bms-white);
  border-radius: var(--bms-border-radius-large);
  padding: 1em 2em 1em 2em;
}
</style>
