/* Swippable Notification Styles - Works for both popup and database notifications */

/* Toast Notifications */
.fi-no-notification {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  touch-action: pan-y;
  cursor: grab;
}

.fi-no-notification:active {
  cursor: grabbing;
}

/* Database Notifications (in modal) */
[x-data*="notificationComponent"] {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  touch-action: pan-y;
  cursor: grab;
}

[x-data*="notificationComponent"]:active {
  cursor: grabbing;
}

/* Dragging state for both types */
.fi-no-notification.swippable-notification-dragging,
[x-data*="notificationComponent"].swippable-notification-dragging {
  cursor: grabbing;
  z-index: 50;
}

/* Closing animation for both types */
.fi-no-notification.swippable-notification-closing,
[x-data*="notificationComponent"].swippable-notification-closing {
  animation: slideOutNotification 0.3s ease forwards;
}

@keyframes slideOutNotification {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(110%);
    opacity: 0;
  }
}

/* Smooth transition when returning to normal */
.fi-no-notification[data-swippable-initialized="true"],
[x-data*="notificationComponent"][data-swippable-initialized="true"] {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
}