<script setup>
import TMessage from "@/components/ui/TMessage.vue";

const props = defineProps({
	disableSpacing: {
		type: Boolean,
		default: false
	}
})
</script>

<template>
	<div class="mb-4" :class="{'mt-4': !disableSpacing}">
		<TMessage severity="warn" icon="pi pi-exclamation-triangle">
			<div class="content">
				<slot></slot>
			</div>
		</TMessage>
	</div>
</template>

<style scoped>
:deep(.p-message-content) {
	position: relative;
}

:deep(.p-message-content a) {
	color: var(--p-primary-color);
}

:deep(.p-message-content a:hover) {
	color: var(--p-primary-700);
}

:deep(.p-message-content .pi.pi-remove), :deep(.p-message-content .icon.remove) {
	position: absolute;
	right: 1em;
	top: 0.9em;
}
</style>