<script setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
  gutter: { type: String, required: false, default: "none" },
  label: { type: String, required: false }
});
</script>

<style scoped>
body.body--dark fieldset{border-color:hsla(0,0%,100%,.6)}fieldset{border:1px solid rgba(0,0,0,.24);border-radius:4px}legend{padding-left:.5rem;padding-right:.5rem}
</style>

<template>
    <fieldset>
        <legend v-if="props.label">{{ t(props.label) }}</legend>

        <div :class="`q-gutter-${props.gutter}`">
            <slot></slot>
        </div>

    </fieldset>
</template>
