@layer components {
    .modal {
        @apply fixed hidden z-50 inset-0 pointer-events-none;

        &.fade {
            @apply opacity-0 transition-opacity duration-150 ease-linear;
        }

        &.show {
            @apply block opacity-100;
        }

        &.lg {
            .modal-dialog {
                @apply max-w-screen-lg;
            }
        }
    }

    .modal-dialog {
        max-width: calc(100% - 1.75rem * 2);
        @apply relative mx-auto md:max-w-screen-md flex items-center overflow-hidden pointer-events-none;
        height: calc(100% - 1.75rem * 2);
        margin-top: 1.75rem;
        margin-bottom: 1.75rem;
    }

    .modal-content {
        @apply relative flex flex-col w-full max-h-full border border-gray-200 rounded-lg shadow bg-white dark:bg-gray-800 dark:border-gray-700;
        @apply pointer-events-auto outline-0;
        background-clip: padding-box;
    }

    .modal-header {
        @apply flex items-center justify-between px-3 py-1.5 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-white border-b border-gray-200 dark:border-gray-700 rounded-t-lg;

        .btn-close {
            @apply text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white;
        }
    }

    .modal-title {
        @apply font-semibold mb-0;
    }

    .modal-body {
        @apply relative p-3 text-gray-700 dark:text-gray-300 overflow-y-auto;
        flex: 1 1 auto;
    }

    .modal-footer {
        @apply flex px-3 py-1.5 items-center space-x-2 rtl:space-x-reverse bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-white border-t border-gray-200 dark:border-gray-700 rounded-b-lg;
    }

    .modal-backdrop {
        @apply fixed top-0 left-0 right-0 bottom-0 opacity-50 bg-black z-40 hidden transition-opacity;

        &.show {
            @apply block;
        }
    }
}