@layer components {
  .notification {
    @apply bg-white shadow-xl dark:shadow-2xl rounded-xl mb-3 relative border border-gray-100 dark:bg-gray-700 dark:border-transparent font-semibold;
  }

  .notification-content {
    @apply py-5 px-6 flex;

    &.no-child {
      @apply items-center;
    }
  }

  .notification-title {
    @apply font-bold text-base text-gray-800 dark:text-white;
  }

  .notification-close {
    @apply top-5 ltr:right-4 rtl:left-4;
  }
}