@layer components {
    /* Container for notifications, fixed full screen at bottom with padding and pointer-events disabled */
    .notification-container {
        @apply fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start;
    }

    /* Wrapper for stacking notifications vertically, centered on small screens and aligned right on larger */
    .notification-wrapper {
        @apply w-full flex flex-col items-center space-y-4 sm:items-end;
    }

    /* Individual notification box with max width, shadow, rounded corners, and pointer events enabled */
    .notification {
        @apply max-w-sm w-full shadow-lg rounded-lg pointer-events-auto ring-1 ring-black overflow-hidden;
    }

    /* Inner padding inside the notification */
    .notification-inner {
        @apply p-4;
    }

    /* Flex container for notification content aligning items at the start */
    .notification-content {
        @apply flex items-start;
    }

    /* Icon inside notification, fixed size, white color, no shrinking */
    .notification-icon {
        @apply h-6 w-6 text-white flex-shrink-0;
    }

    /* Message text inside notification with left margin, flexible width, smaller font, and white color */
    .notification-message {
        @apply ml-3 w-0 flex-1 pt-0.5 text-sm font-medium text-white;
    }

    /* Close button container with left margin and no shrinking */
    .notification-close {
        @apply ml-4 flex-shrink-0 flex;
    }

    /* Actual close button: transparent background, white text, focus ring for accessibility */
    .notification-close-button {
        @apply bg-transparent text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white;
    }

    /* Close icon size and white color */
    .notification-close-icon {
        @apply h-5 w-5 text-white;
    }

    /* Notification background colors by type: error = red, success = green */
    .notification-error {
        @apply bg-red-500;
    }

    .notification-success {
        @apply bg-green-500;
    }
}