.notification {
  @apply pointer-events-auto flex w-full max-w-sm items-start gap-4 rounded-xl border;
  .icon-container {
    @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-full;
  }
  &.success {
    @apply border-emerald-200 bg-white p-4 ring-1 ring-black/5;
    .icon-container {
      @apply  bg-emerald-100;
      .icon {
        @apply text-emerald-600;
      }
    }
  }
  &.error {
    @apply border-red-200 bg-white p-4 ring-1 ring-black/5;
    .icon-container {
      @apply  bg-red-100;
      .icon {
        @apply text-red-600;
      }
    }
  }
  .notification-message {
    @pply flex-1;
    .title {
      @apply font-semibold text-gray-900;
    }
    .message {
      @apply mt-1 text-sm text-gray-600;
    }
  }
  .close {
    @apply rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600;
  }
}