<script
    setup
    lang="ts"
>
    const model = defineModel<string | number | undefined>({ required: true });

    defineProps<{
        labelString: string;
    }>();
</script>

<template>
    <q-input
        v-model="model"
        readonly
        dense
        stack-label
        autogrow
        outlined
        label-color="accent"
        label-slot
        class="q-mx-xs q-my-sm"
        input-class="text-weight-light"
        input-style="font-size: 1.5em"
    >
        <template #label>
            <span class="text-weight-bolder text-accent text-uppercase">{{ labelString }}</span>
        </template>
    </q-input>
</template>

<style scoped>
:deep(.q-field__label) {
    background-color: var(--q-dark);
    padding: 0 5px;
    transform: translateY(-60%) scale(0.75) !important;
}

:deep(.q-field__control-container) {
    padding-left: 16px;
}

:deep(.q-field__control::before) {
  border: 1px solid var(--q-accent) !important;
  background-color: transparent;
}
</style>