@if (isOpen()) {
	<div
		[@inOutAnimation]
		class="fixed inset-0 z-20 bg-black/20 backdrop-blur-sm"
		(click)="close.emit()"></div>
	<div [@inOutAnimation] [class]="[defaultModalClass, modalClass()] | cn">
		@if (showHeader()) {
			<div class="flex items-center p-4">
				<h4 class="text-xl">{{ title() }}</h4>
				<button
					appButton
					size="icon"
					variant="ghost"
					class="ml-auto text-current"
					type="button"
					(click)="close.emit()">
					<span class="material-icons">close</span>
				</button>
			</div>
		}
		<div [class]="['max-h-[80vh] overflow-auto p-4', contentClass()] | cn">
			<ng-content />
		</div>
	</div>
}