@layer components {
    .tw-toast-wrap {
        @apply block fixed m-0 p-0;
        z-index: 1051;
    }

    .tw-toast-loader {
        @apply transition ease-in-out w-1 bg-custom-grey-50;
    }

    .tw-toast {
        @apply flex items-center w-full max-w-xl p-3 mb-4 text-custom-grey-500 bg-white rounded-lg shadow
    }

    .tw-toast-icon {
        @apply inline-flex items-center justify-center flex-shrink-0 w-8 h-8
    }

    .tw-toast-success .tw-toast-icon {
        @apply text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200
    }

    .tw-toast-error .tw-toast-icon {
        @apply text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200
    }

    .tw-toast-warning .tw-toast-icon {
        @apply text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200
    }

    .tw-toast-info .tw-toast-icon {
        @apply text-custom-grey-600 bg-custom-grey-50 rounded-lg

    }

    .tw-toast-content {
        @apply ms-3 text-sm font-normal
    }

    .tw-toast-close {
        @apply ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700
    }
}