<script setup>

const props = defineProps({
  hasError: {
    type: Boolean,
    default: false
  },
});

</script>

<template>
  <div class="pankow-form-group" :class="{ 'has-error': hasError }">
    <slot></slot>
  </div>
</template>

<style>

.pankow-form-group {
  display: flex;
  flex-direction: column;
  align-content: stretch;
}

/* spacing between adjacent FormGroups */
.pankow-form-group + .pankow-form-group {
  margin: 6px 0;
}

.pankow-form-group > div[description]:first-of-type {
  margin-bottom: 6px;
}

</style>
