/**
 * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
 * Copyright 2025 by Keenthemes Inc
 */

@layer components {
	.kt-modal {
		@apply fixed inset-0 overflow-auto p-4;

		&:not(.open) {
			@apply hidden;
		}
	}

	.kt-modal-backdrop {
		@apply transition-all duration-300 fixed inset-0 bg-black/30 [backdrop-filter:blur(4px)];
	}

	/* Alert Close */
	.kt-modal-close {
		@apply shrink-0 size-6 cursor-pointer -me-2.5;

		i {
			@apply opacity-70 text-xs;
		}

		> svg {
			@apply size-4 opacity-70;
		}

		&:focus,
		&:hover {
			i {
				@apply opacity-100;
			}

			> svg {
				@apply opacity-100;
			}
		}
	}

	.kt-modal-dialog {
		@apply hidden fixed overflow-auto top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 p-4;
	}

	.kt-modal-content {
		@apply relative flex flex-col mx-auto rounded-lg shadow-md bg-popover text-popover-foreground border border-border;
	}

	.kt-modal-header {
		@apply flex items-center justify-between gap-2 px-5 py-4 border-b border-border;
	}

	.kt-modal-title {
		@apply text-base font-semibold text-mono;
	}

	.kt-modal-body {
		@apply overflow-y-auto px-5 py-4;
	}

	.kt-modal-footer {
		@apply flex items-center justify-between gap-2 px-5 py-4 border-t border-border;
	}

	.kt-modal-center:not(.kt-modal-fit) {
		.kt-modal-content {
			@apply top-1/2 -translate-y-1/2;
		}
	}

	.kt-modal-fit {
		@apply p-0 overflow-visible;

		&.kt-modal-center {
			@apply start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
		}
	}
}

@custom-variant kt-modal-open {
	&[data-kt-modal-initialized].open {
		@slot;
	}
	[data-kt-modal-initialized].open & {
		@slot;
	}
}