<template>
    <div class="field">
        <div class="left-center">
            <label v-if="label">{{ label }} <span class="required" v-if="required">*</span></label>
            <slot name="label"></slot>
        </div>
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    label?: string,
    required?: boolean
}>();
</script>

<style scoped>
.field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
</style>

<style>
.field input, .field .input, .field textarea, .field select {
    min-height: 2.5rem;
    border-radius: 0.25rem;
    background-color: rgb(51, 51, 51);
    width: 100%;
    border: 2px solid #444444;
    outline: none;
    padding: 0.25rem;
    font-size: 1rem;
}
.field textarea {
    min-height: 5rem;
    padding: 0.25rem;
}
.field input:focus, .field textarea:focus, .field select:focus {
    border-color: var(--primary-color);
}
.required {
    color: #e63515;
    font-weight: bold;
}
.field input:disabled, textarea:disabled, select:disabled {
    border: 2px solid #7a7a7a;
    background-color: #f1f1f1;
}
</style>