<script setup lang="ts">
defineProps<{
  label: string
}>()
</script>
<template>
  <div class="app-form-control">
    <label>
      {{ label }}
      <slot></slot>
    </label>
  </div>
</template>
<style lang="css">
.app-form-control {
  flex-grow: 1;
  margin: 0.5rem;
}

.app-form-control > label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  font-weight: 700;
}

/* Styles for different form controls under here: */

.app-form-control > label > input {
  font-size: 16px;
  font-family: 'OpenSans', sans-serif;
  padding: 0.25rem 0.5rem;
}

.app-form-control > label > textarea {
  font-size: 16px;
  font-family: 'OpenSans', sans-serif;
  padding: 0.25rem 0.5rem;
}

.app-form-control > label > select {
  font-size: 16px;
  font-family: 'OpenSans', sans-serif;
  padding: 0.25rem 0.5rem;
}
</style>
