@layer components {
    .notification-box {
        @apply flex items-center gap-2 bg-lightwarning text-sm text-warningemphasis rounded-md p-2 dark:bg-darkwarning dark:text-warning border;

        &.warning-box {
            @apply bg-lightwarning text-warningemphasis dark:bg-darkwarning dark:text-warning border-warning;
        }

        &.info-box {
            @apply bg-lightinfo text-infoemphasis dark:bg-darkinfo dark:text-info border-info;
        }

        &.error-box {
            @apply bg-lighterror text-erroremphasis dark:bg-darkerror dark:text-error border-error;
        }

        &.success-box {
            @apply bg-lightsuccess text-successemphasis dark:bg-darksuccess dark:text-success border-success;
        }
    }
}